]>
Commit | Line | Data |
---|---|---|
26bfeca1 LS |
1 | Ext.define('PVE.window.UploadToStorage', { |
2 | extend: 'Ext.window.Window', | |
3 | alias: 'widget.pveStorageUpload', | |
4 | ||
5 | resizable: false, | |
6 | ||
7 | modal: true, | |
8 | ||
9 | initComponent: function() { | |
10 | var me = this; | |
11 | ||
12 | if (!me.nodename) { | |
13 | throw "no node name specified"; | |
14 | } | |
15 | if (!me.storage) { | |
16 | throw "no storage ID specified"; | |
17 | } | |
18 | ||
19 | let baseurl = `/nodes/${me.nodename}/storage/${me.storage}/upload`; | |
20 | ||
21 | let pbar = Ext.create('Ext.ProgressBar', { | |
22 | text: 'Ready', | |
23 | hidden: true, | |
24 | }); | |
25 | ||
26 | let acceptedExtensions = { | |
27 | iso: ".img, .iso", | |
28 | vztmpl: ".tar.gz, .tar.xz", | |
29 | }; | |
30 | ||
31 | let defaultContent = me.contents[0] || ''; | |
32 | ||
33 | let fileField = Ext.create('Ext.form.field.File', { | |
34 | name: 'filename', | |
35 | buttonText: gettext('Select File...'), | |
36 | allowBlank: false, | |
37 | setAccept: function(content) { | |
38 | let acceptString = acceptedExtensions[content] || ''; | |
39 | this.fileInputEl.set({ | |
40 | accept: acceptString, | |
41 | }); | |
42 | }, | |
43 | listeners: { | |
44 | afterrender: function(cmp) { | |
45 | cmp.setAccept(defaultContent); | |
46 | }, | |
47 | }, | |
48 | }); | |
49 | ||
50 | me.formPanel = Ext.create('Ext.form.Panel', { | |
51 | method: 'POST', | |
52 | waitMsgTarget: true, | |
53 | bodyPadding: 10, | |
54 | border: false, | |
55 | width: 300, | |
56 | fieldDefaults: { | |
57 | labelWidth: 100, | |
58 | anchor: '100%', | |
59 | }, | |
60 | items: [ | |
61 | { | |
62 | xtype: 'pveContentTypeSelector', | |
63 | cts: me.contents, | |
64 | fieldLabel: gettext('Content'), | |
65 | name: 'content', | |
66 | value: defaultContent, | |
67 | allowBlank: false, | |
68 | listeners: { | |
69 | change: function(cmp, newValue, oldValue) { | |
70 | fileField.setAccept(newValue); | |
71 | }, | |
72 | }, | |
73 | }, | |
74 | fileField, | |
75 | pbar, | |
76 | ], | |
77 | }); | |
78 | ||
79 | let form = me.formPanel.getForm(); | |
80 | ||
81 | let doStandardSubmit = function() { | |
82 | form.submit({ | |
83 | url: "/api2/htmljs" + baseurl, | |
84 | waitMsg: gettext('Uploading file...'), | |
85 | success: function(f, action) { | |
86 | me.close(); | |
87 | }, | |
88 | failure: function(f, action) { | |
89 | var msg = PVE.Utils.extractFormActionError(action); | |
90 | Ext.Msg.alert(gettext('Error'), msg); | |
91 | }, | |
92 | }); | |
93 | }; | |
94 | ||
95 | let updateProgress = function(per, bytes) { | |
96 | var text = (per * 100).toFixed(2) + '%'; | |
97 | if (bytes) { | |
98 | text += " (" + Proxmox.Utils.format_size(bytes) + ')'; | |
99 | } | |
100 | pbar.updateProgress(per, text); | |
101 | }; | |
102 | ||
103 | let abortBtn = Ext.create('Ext.Button', { | |
104 | text: gettext('Abort'), | |
105 | disabled: true, | |
106 | handler: function() { | |
107 | me.close(); | |
108 | }, | |
109 | }); | |
110 | ||
111 | let submitBtn = Ext.create('Ext.Button', { | |
112 | text: gettext('Upload'), | |
113 | disabled: true, | |
114 | handler: function(button) { | |
115 | var fd; | |
116 | try { | |
117 | fd = new FormData(); | |
118 | } catch (err) { | |
119 | doStandardSubmit(); | |
120 | return; | |
121 | } | |
122 | ||
123 | button.setDisabled(true); | |
124 | abortBtn.setDisabled(false); | |
125 | ||
126 | var field = form.findField('content'); | |
127 | fd.append("content", field.getValue()); | |
128 | field.setDisabled(true); | |
129 | ||
130 | field = form.findField('filename'); | |
131 | var file = field.fileInputEl.dom; | |
132 | fd.append("filename", file.files[0]); | |
133 | field.setDisabled(true); | |
134 | ||
135 | pbar.setVisible(true); | |
136 | updateProgress(0); | |
137 | ||
138 | let xhr = new XMLHttpRequest(); | |
139 | me.xhr = xhr; | |
140 | ||
141 | xhr.addEventListener("load", function(e) { | |
142 | if (xhr.status === 200) { | |
143 | me.close(); | |
144 | return; | |
145 | } | |
146 | let err = Ext.htmlEncode(xhr.statusText); | |
147 | let msg = `${gettext('Error')} ${xhr.status.toString()}: ${err}`; | |
148 | if (xhr.responseText !== "") { | |
149 | let result = Ext.decode(xhr.responseText); | |
150 | result.message = msg; | |
151 | msg = Proxmox.Utils.extractRequestError(result, true); | |
152 | } | |
153 | Ext.Msg.alert(gettext('Error'), msg, btn => me.close()); | |
154 | }, false); | |
155 | ||
156 | xhr.addEventListener("error", function(e) { | |
157 | let err = e.target.status.toString(); | |
158 | let msg = `Error '${err}' occurred while receiving the document.`; | |
159 | Ext.Msg.alert(gettext('Error'), msg, btn => me.close()); | |
160 | }); | |
161 | ||
162 | xhr.upload.addEventListener("progress", function(evt) { | |
163 | if (evt.lengthComputable) { | |
164 | let percentComplete = evt.loaded / evt.total; | |
165 | updateProgress(percentComplete, evt.loaded); | |
166 | } | |
167 | }, false); | |
168 | ||
169 | xhr.open("POST", `/api2/json${baseurl}`, true); | |
170 | xhr.send(fd); | |
171 | }, | |
172 | }); | |
173 | ||
174 | form.on('validitychange', (f, valid) => submitBtn.setDisabled(!valid)); | |
175 | ||
176 | Ext.apply(me, { | |
177 | title: gettext('Upload'), | |
178 | items: me.formPanel, | |
179 | buttons: [abortBtn, submitBtn], | |
180 | listeners: { | |
181 | close: function() { | |
182 | if (me.xhr) { | |
183 | me.xhr.abort(); | |
184 | delete me.xhr; | |
185 | } | |
186 | }, | |
187 | }, | |
188 | }); | |
189 | ||
190 | me.callParent(); | |
191 | }, | |
192 | }); |