luci-base, luci-mod-system: move file upload handling to ui.js

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 87 insertions, 0 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index c1389a8fdf..c82b397c19 100644
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -2221,6 +2221,93 @@ return L.Class.extend({
 		}
 	}),
 
+	/* File uploading */
+	uploadFile: function(path, progressStatusNode) {
+		return new Promise(function(resolveFn, rejectFn) {
+			L.ui.showModal(_('Uploading file…'), [
+				E('p', _('Please select the file to upload.')),
+				E('div', { 'style': 'display:flex' }, [
+					E('div', { 'class': 'left', 'style': 'flex:1' }, [
+						E('input', {
+							type: 'file',
+							style: 'display:none',
+							change: function(ev) {
+								L.dom.parent(ev.target, '.modal').querySelector('.cbi-button-action.important').disabled = false;
+							}
+						}),
+						E('button', {
+							'class': 'btn',
+							'click': function(ev) {
+								ev.target.previousElementSibling.click();
+							}
+						}, [ _('Browse…') ])
+					]),
+					E('div', { 'class': 'right', 'style': 'flex:1' }, [
+						E('button', {
+							'class': 'btn',
+							'click': function() {
+								L.ui.hideModal();
+								rejectFn(new Error('Upload has been cancelled'));
+							}
+						}, [ _('Cancel') ]),
+						' ',
+						E('button', {
+							'class': 'btn cbi-button-action important',
+							'disabled': true,
+							'click': function(ev) {
+								var input = L.dom.parent(ev.target, '.modal').querySelector('input[type="file"]');
+
+								if (!input.files[0])
+									return;
+
+								var progress = E('div', { 'class': 'cbi-progressbar', 'title': '0%' }, E('div', { 'style': 'width:0' }));
+
+								L.ui.showModal(_('Uploading file…'), [ progress ]);
+
+								var data = new FormData();
+
+								data.append('sessionid', rpc.getSessionID());
+								data.append('filename', path);
+								data.append('filedata', input.files[0]);
+
+								var filename = input.files[0].name;
+
+								L.Request.post('/cgi-bin/cgi-upload', data, {
+									timeout: 0,
+									progress: function(pev) {
+										var percent = (pev.loaded / pev.total) * 100;
+
+										if (progressStatusNode)
+											progressStatusNode.data = '%.2f%%'.format(percent);
+
+										progress.setAttribute('title', '%.2f%%'.format(percent));
+										progress.firstElementChild.style.width = '%.2f%%'.format(percent);
+									}
+								}).then(function(res) {
+									var reply = res.json();
+
+									L.ui.hideModal();
+
+									if (L.isObject(reply) && reply.failure) {
+										L.ui.addNotification(null, E('p', _('Upload request failed: %s').format(reply.message)));
+										rejectFn(new Error(reply.failure));
+									}
+									else {
+										reply.name = filename;
+										resolveFn(reply);
+									}
+								}, function(err) {
+									L.ui.hideModal();
+									rejectFn(err);
+								});
+							}
+						}, [ _('Upload') ])
+					])
+				])
+			]);
+		});
+	},
+
 	/* Reconnect handling */
 	pingDevice: function(proto, ipaddr) {
 		var target = '%s://%s%s?%s'.format(proto || 'http', ipaddr || window.location.host, L.resource('icons/loading.gif'), Math.random());