ui: move upload window into UploadToStorage.js
Signed-off-by: Lorenz Stechauner <l.stechauner@proxmox.com> Reviewed-by: Dominik Csapak <d.csapak@proxmox.com> Tested-by: Dominik Csapak <d.csapak@proxmox.com>
This commit is contained in:
Lorenz Stechauner
Dominik Csapak
parent
8262c90bbe
commit
40848d5078
@ -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 \
|
||||
|
||||
@ -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],
|
||||
|
||||
192
www/manager6/window/UploadToStorage.js
Normal file
192
www/manager6/window/UploadToStorage.js
Normal file
@ -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();
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user