[pve-devel] [PATCH v4 manager 1/5] ui: move upload window into UploadToStorage.js

[Lorenz Stechauner <l.stechauner@proxmox.com>]

Signed-off-by: Lorenz Stechauner <l.stechauner@proxmox.com>
---
 www/manager6/Makefile                  |   1 +
 www/manager6/storage/ContentView.js    | 195 +------------------------
 www/manager6/window/UploadToStorage.js | 192 ++++++++++++++++++++++++
 3 files changed, 194 insertions(+), 194 deletions(-)
 create mode 100644 www/manager6/window/UploadToStorage.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 75d355a5..552e842b 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -106,6 +106,7 @@ JSSRC= 							\
 	window/Snapshot.js				\
 	window/StartupEdit.js				\
 	window/DownloadUrlToStorage.js 			\
+	window/UploadToStorage.js 			\
 	window/Wizard.js				\
 	ha/Fencing.js					\
 	ha/GroupEdit.js					\
diff --git a/www/manager6/storage/ContentView.js b/www/manager6/storage/ContentView.js
index 3f5b686b..ca0ad664 100644
--- a/www/manager6/storage/ContentView.js
+++ b/www/manager6/storage/ContentView.js
@@ -1,196 +1,3 @@
-Ext.define('PVE.storage.Upload', {
-    extend: 'Ext.window.Window',
-    alias: 'widget.pveStorageUpload',
-
-    resizable: false,
-
-    modal: true,
-
-    initComponent: function() {
-        var me = this;
-
-	if (!me.nodename) {
-	    throw "no node name specified";
-	}
-	if (!me.storage) {
-	    throw "no storage ID specified";
-	}
-
-	let baseurl = `/nodes/${me.nodename}/storage/${me.storage}/upload`;
-
-	let pbar = Ext.create('Ext.ProgressBar', {
-            text: 'Ready',
-	    hidden: true,
-	});
-
-	let acceptedExtensions = {
-	    iso: ".img, .iso",
-	    vztmpl: ".tar.gz, .tar.xz",
-	};
-
-	let defaultContent = me.contents[0] || '';
-
-	let fileField = Ext.create('Ext.form.field.File', {
-	    name: 'filename',
-	    buttonText: gettext('Select File...'),
-	    allowBlank: false,
-	    setAccept: function(content) {
-		let acceptString = acceptedExtensions[content] || '';
-		this.fileInputEl.set({
-		    accept: acceptString,
-		});
-	    },
-	    listeners: {
-		afterrender: function(cmp) {
-		    cmp.setAccept(defaultContent);
-		},
-	    },
-	});
-
-	me.formPanel = Ext.create('Ext.form.Panel', {
-	    method: 'POST',
-	    waitMsgTarget: true,
-	    bodyPadding: 10,
-	    border: false,
-	    width: 300,
-	    fieldDefaults: {
-		labelWidth: 100,
-		anchor: '100%',
-            },
-	    items: [
-		{
-		    xtype: 'pveContentTypeSelector',
-		    cts: me.contents,
-		    fieldLabel: gettext('Content'),
-		    name: 'content',
-		    value: defaultContent,
-		    allowBlank: false,
-		    listeners: {
-			change: function(cmp, newValue, oldValue) {
-			    fileField.setAccept(newValue);
-			},
-		    },
-		},
-		fileField,
-		pbar,
-	    ],
-	});
-
-	let form = me.formPanel.getForm();
-
-	let doStandardSubmit = function() {
-	    form.submit({
-		url: "/api2/htmljs" + baseurl,
-		waitMsg: gettext('Uploading file...'),
-		success: function(f, action) {
-		    me.close();
-		},
-		failure: function(f, action) {
-		    var msg = PVE.Utils.extractFormActionError(action);
-                    Ext.Msg.alert(gettext('Error'), msg);
-		},
-	    });
-	};
-
-	let updateProgress = function(per, bytes) {
-	    var text = (per * 100).toFixed(2) + '%';
-	    if (bytes) {
-		text += " (" + Proxmox.Utils.format_size(bytes) + ')';
-	    }
-	    pbar.updateProgress(per, text);
-	};
-
-	let abortBtn = Ext.create('Ext.Button', {
-	    text: gettext('Abort'),
-	    disabled: true,
-	    handler: function() {
-		me.close();
-	    },
-	});
-
-	let submitBtn = Ext.create('Ext.Button', {
-	    text: gettext('Upload'),
-	    disabled: true,
-	    handler: function(button) {
-		var fd;
-		try {
-		    fd = new FormData();
-		} catch (err) {
-		    doStandardSubmit();
-		    return;
-		}
-
-		button.setDisabled(true);
-		abortBtn.setDisabled(false);
-
-		var field = form.findField('content');
-		fd.append("content", field.getValue());
-		field.setDisabled(true);
-
-		field = form.findField('filename');
-		var file = field.fileInputEl.dom;
-		fd.append("filename", file.files[0]);
-		field.setDisabled(true);
-
-		pbar.setVisible(true);
-		updateProgress(0);
-
-		let xhr = new XMLHttpRequest();
-		me.xhr = xhr;
-
-		xhr.addEventListener("load", function(e) {
-		    if (xhr.status === 200) {
-			me.close();
-			return;
-		    }
-		    let err = Ext.htmlEncode(xhr.statusText);
-		    let msg = `${gettext('Error')} ${xhr.status.toString()}: ${err}`;
-		    if (xhr.responseText !== "") {
-			let result = Ext.decode(xhr.responseText);
-			result.message = msg;
-			msg = Proxmox.Utils.extractRequestError(result, true);
-		    }
-		    Ext.Msg.alert(gettext('Error'), msg, btn => me.close());
-		}, false);
-
-		xhr.addEventListener("error", function(e) {
-		    let err = e.target.status.toString();
-		    let msg = `Error '${err}' occurred while receiving the document.`;
-		    Ext.Msg.alert(gettext('Error'), msg, btn => me.close());
-		});
-
-		xhr.upload.addEventListener("progress", function(evt) {
-		    if (evt.lengthComputable) {
-			let percentComplete = evt.loaded / evt.total;
-			updateProgress(percentComplete, evt.loaded);
-		    }
-		}, false);
-
-		xhr.open("POST", `/api2/json${baseurl}`, true);
-		xhr.send(fd);
-	    },
-	});
-
-	form.on('validitychange', (f, valid) => submitBtn.setDisabled(!valid));
-
-	Ext.apply(me, {
-	    title: gettext('Upload'),
-	    items: me.formPanel,
-	    buttons: [abortBtn, submitBtn],
-	    listeners: {
-		close: function() {
-		    if (me.xhr) {
-			me.xhr.abort();
-			delete me.xhr;
-		    }
-		},
-	    },
-	});
-
-        me.callParent();
-    },
-});
-
 Ext.define('PVE.storage.ContentView', {
     extend: 'Ext.grid.GridPanel',
 
@@ -259,7 +66,7 @@ Ext.define('PVE.storage.ContentView', {
 		    text: gettext('Upload'),
 		    disabled: !me.enableUploadButton,
 		    handler: function() {
-			Ext.create('PVE.storage.Upload', {
+			Ext.create('PVE.window.UploadToStorage', {
 			    nodename: nodename,
 			    storage: storage,
 			    contents: [content],
diff --git a/www/manager6/window/UploadToStorage.js b/www/manager6/window/UploadToStorage.js
new file mode 100644
index 00000000..3c35020a
--- /dev/null
+++ b/www/manager6/window/UploadToStorage.js
@@ -0,0 +1,192 @@
+Ext.define('PVE.window.UploadToStorage', {
+    extend: 'Ext.window.Window',
+    alias: 'widget.pveStorageUpload',
+
+    resizable: false,
+
+    modal: true,
+
+    initComponent: function() {
+        var me = this;
+
+	if (!me.nodename) {
+	    throw "no node name specified";
+	}
+	if (!me.storage) {
+	    throw "no storage ID specified";
+	}
+
+	let baseurl = `/nodes/${me.nodename}/storage/${me.storage}/upload`;
+
+	let pbar = Ext.create('Ext.ProgressBar', {
+            text: 'Ready',
+	    hidden: true,
+	});
+
+	let acceptedExtensions = {
+	    iso: ".img, .iso",
+	    vztmpl: ".tar.gz, .tar.xz",
+	};
+
+	let defaultContent = me.contents[0] || '';
+
+	let fileField = Ext.create('Ext.form.field.File', {
+	    name: 'filename',
+	    buttonText: gettext('Select File...'),
+	    allowBlank: false,
+	    setAccept: function(content) {
+		let acceptString = acceptedExtensions[content] || '';
+		this.fileInputEl.set({
+		    accept: acceptString,
+		});
+	    },
+	    listeners: {
+		afterrender: function(cmp) {
+		    cmp.setAccept(defaultContent);
+		},
+	    },
+	});
+
+	me.formPanel = Ext.create('Ext.form.Panel', {
+	    method: 'POST',
+	    waitMsgTarget: true,
+	    bodyPadding: 10,
+	    border: false,
+	    width: 300,
+	    fieldDefaults: {
+		labelWidth: 100,
+		anchor: '100%',
+            },
+	    items: [
+		{
+		    xtype: 'pveContentTypeSelector',
+		    cts: me.contents,
+		    fieldLabel: gettext('Content'),
+		    name: 'content',
+		    value: defaultContent,
+		    allowBlank: false,
+		    listeners: {
+			change: function(cmp, newValue, oldValue) {
+			    fileField.setAccept(newValue);
+			},
+		    },
+		},
+		fileField,
+		pbar,
+	    ],
+	});
+
+	let form = me.formPanel.getForm();
+
+	let doStandardSubmit = function() {
+	    form.submit({
+		url: "/api2/htmljs" + baseurl,
+		waitMsg: gettext('Uploading file...'),
+		success: function(f, action) {
+		    me.close();
+		},
+		failure: function(f, action) {
+		    var msg = PVE.Utils.extractFormActionError(action);
+                    Ext.Msg.alert(gettext('Error'), msg);
+		},
+	    });
+	};
+
+	let updateProgress = function(per, bytes) {
+	    var text = (per * 100).toFixed(2) + '%';
+	    if (bytes) {
+		text += " (" + Proxmox.Utils.format_size(bytes) + ')';
+	    }
+	    pbar.updateProgress(per, text);
+	};
+
+	let abortBtn = Ext.create('Ext.Button', {
+	    text: gettext('Abort'),
+	    disabled: true,
+	    handler: function() {
+		me.close();
+	    },
+	});
+
+	let submitBtn = Ext.create('Ext.Button', {
+	    text: gettext('Upload'),
+	    disabled: true,
+	    handler: function(button) {
+		var fd;
+		try {
+		    fd = new FormData();
+		} catch (err) {
+		    doStandardSubmit();
+		    return;
+		}
+
+		button.setDisabled(true);
+		abortBtn.setDisabled(false);
+
+		var field = form.findField('content');
+		fd.append("content", field.getValue());
+		field.setDisabled(true);
+
+		field = form.findField('filename');
+		var file = field.fileInputEl.dom;
+		fd.append("filename", file.files[0]);
+		field.setDisabled(true);
+
+		pbar.setVisible(true);
+		updateProgress(0);
+
+		let xhr = new XMLHttpRequest();
+		me.xhr = xhr;
+
+		xhr.addEventListener("load", function(e) {
+		    if (xhr.status === 200) {
+			me.close();
+			return;
+		    }
+		    let err = Ext.htmlEncode(xhr.statusText);
+		    let msg = `${gettext('Error')} ${xhr.status.toString()}: ${err}`;
+		    if (xhr.responseText !== "") {
+			let result = Ext.decode(xhr.responseText);
+			result.message = msg;
+			msg = Proxmox.Utils.extractRequestError(result, true);
+		    }
+		    Ext.Msg.alert(gettext('Error'), msg, btn => me.close());
+		}, false);
+
+		xhr.addEventListener("error", function(e) {
+		    let err = e.target.status.toString();
+		    let msg = `Error '${err}' occurred while receiving the document.`;
+		    Ext.Msg.alert(gettext('Error'), msg, btn => me.close());
+		});
+
+		xhr.upload.addEventListener("progress", function(evt) {
+		    if (evt.lengthComputable) {
+			let percentComplete = evt.loaded / evt.total;
+			updateProgress(percentComplete, evt.loaded);
+		    }
+		}, false);
+
+		xhr.open("POST", `/api2/json${baseurl}`, true);
+		xhr.send(fd);
+	    },
+	});
+
+	form.on('validitychange', (f, valid) => submitBtn.setDisabled(!valid));
+
+	Ext.apply(me, {
+	    title: gettext('Upload'),
+	    items: me.formPanel,
+	    buttons: [abortBtn, submitBtn],
+	    listeners: {
+		close: function() {
+		    if (me.xhr) {
+			me.xhr.abort();
+			delete me.xhr;
+		    }
+		},
+	    },
+	});
+
+        me.callParent();
+    },
+});
-- 
2.30.2