[pve-devel] [PATCH v5 manager 1/5] ui: move upload window into UploadToStorage.js
Lorenz Stechauner
l.stechauner at proxmox.com
Mon Nov 8 09:53:46 CET 2021
Signed-off-by: Lorenz Stechauner <l.stechauner at proxmox.com>
Reviewed-by: Dominik Csapak <d.csapak at proxmox.com>
Tested-by: Dominik Csapak <d.csapak at 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 4011d4e5..f6c1e3af 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -109,6 +109,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
More information about the pve-devel
mailing list