implement upload GUI

www/manager/storage/ContentView.js

+Ext.define('PVE.storage.Upload', {
+    extend: 'Ext.window.Window',
+    alias: ['widget.pveStorageUpload'],
+
+    resizable: false,
+
+    modal: true,
+
+    initComponent : function() {
+        var me = this;
+
+	var xhr;
+
+	if (!me.nodename) {
+	    throw "no node name specified";
+	}
+
+	if (!me.storage) { 
+	    throw "no storage ID specified";
+	}
+
+	var url = "/api2/htmljs/nodes/" + me.nodename + "/storage/" + me.storage + "/upload";
+
+	var pbar = Ext.create('Ext.ProgressBar', {
+            text: 'Ready',
+	    hidden: true
+ 	});
+
+	me.formPanel = Ext.create('Ext.form.Panel', {
+	    url: url,
+	    method: 'POST',
+	    waitMsgTarget: true,
+	    bodyPadding: 10,
+	    border: false,
+	    width: 300,
+	    fieldDefaults: {
+		labelWidth: 100,
+		anchor: '100%'
+            },
+	    items: [
+		{
+		    xtype: 'pveKVComboBox',
+		    data: [
+			['iso', 'ISO image'],
+			['backup', 'VZDump backup file'],
+			['vztmpl', 'OpenVZ template']
+		    ],
+		    fieldLabel: 'Content type',
+		    name: 'content',
+		    value: 'iso'
+		},
+		{
+		    xtype: 'filefield',
+		    name: 'filename',
+		    filedLabel: 'File',
+		    buttonText: 'Select File...',
+		    allowBlank: false
+		},
+		pbar
+	    ]
+	});
+
+	var form = me.formPanel.getForm();
+
+	var doStandardSubmit = function() {
+	    form.submit({
+		url: me.url,
+		waitMsg: 'Uploading file...',
+		success: function(f, action) {
+		    me.close();
+		},
+		failure: function(f, action) {
+		    var msg = PVE.Utils.extractFormActionError(action);
+                    Ext.Msg.alert('Failed', msg);
+		}
+	    });
+	};
+
+	var updateProgress = function(per, bytes) {
+	    var text = (per * 100).toFixed(2) + '%';
+	    if (bytes) {
+		text += " (" + PVE.Utils.format_size(bytes) + ')';
+	    }
+	    pbar.updateProgress(per, text);
+	};
+ 
+	var abortBtn = Ext.create('Ext.Button', {
+	    text: 'Abort',
+	    disabled: true,
+	    handler: function() {
+		me.close();
+	    }
+	});
+
+	var submitBtn = Ext.create('Ext.Button', {
+	    text: 'Upload',
+	    disabled: true,
+	    handler: function(button) {
+		try {
+		    var 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);
+
+		var field = form.findField('filename');
+		var file = field.fileInputEl.dom;
+		fd.append("filename", file.files[0]);
+		field.setDisabled(true);
+
+		pbar.setVisible(true);
+		updateProgress(0);
+
+		xhr = new XMLHttpRequest();
+
+		xhr.addEventListener("load", function(e) {   
+		    if (xhr.status == 200) {  
+			me.close();
+		    } else {  
+			var msg = "Error " + xhr.status + " occurred uploading your file.";  
+			Ext.Msg.alert('Upload failed', msg, function(btn) {
+			    me.close();
+			});
+
+		    }  
+		}, false);
+
+		xhr.addEventListener("error", function(e) {  
+		    var msg = "Error " + e.target.status + " occurred while receiving the document.";  
+		    Ext.Msg.alert('Upload failed', msg, function(btn) {
+			me.close();
+		    });
+		});
+ 
+		xhr.upload.addEventListener("progress", function(evt) {
+		    if (evt.lengthComputable) {  
+			var percentComplete = evt.loaded / evt.total;  
+			updateProgress(percentComplete, evt.loaded);
+		    } 
+		}, false);
+
+		xhr.open("POST", url);
+		xhr.send(fd);		
+	    }
+	});
+
+	form.on('validitychange', function(f, valid) {
+	    submitBtn.setDisabled(!valid);
+	});
+
+        Ext.applyIf(me, {
+            title: 'Upload',
+ 	    items: me.formPanel,
+	    buttons: [ abortBtn, submitBtn ],
+	    listeners: {
+		close: function() {
+		    if (xhr) {
+			xhr.abort();
+		    }
+		}
+	    }
+	});
+
+        me.callParent();
+    }
+});
+
 Ext.define('PVE.storage.ContentView', {
     extend: 'Ext.grid.GridPanel',
 
@@ -16,11 +190,13 @@ Ext.define('PVE.storage.ContentView', {
 	    throw "no storage ID specified";
 	}
 
+	var url = "/api2/json/nodes/" + nodename + "/storage/" + storage + "/content";
 	var store = new Ext.data.Store({
 	    model: 'pve-storage-content',
+	    groupField: 'content',
 	    proxy: {
                 type: 'pve',
-		url: "/api2/json/nodes/" + nodename + "/storage/" + storage + "/content"
+		url: url
 	    },
 	    sorters: { 
 		property: 'volid', 
@@ -28,6 +204,13 @@ Ext.define('PVE.storage.ContentView', {
 	    }
 	});
 
+	var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
+            groupHeaderTpl: 'ContentType: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
+	});
+
+	var reload = function() {
+	    store.load();
+	};
 
 	Ext.apply(me, {
 	    store: store,
@@ -35,6 +218,26 @@ Ext.define('PVE.storage.ContentView', {
 	    viewConfig: {
 		trackOver: false
 	    },
+	    features: [ groupingFeature ],
+	    tbar: [
+		{
+		    text: 'Restore'
+		},
+		{
+		    text: 'Delete'
+		},
+		{
+		    text: 'Upload',
+		    handler: function() {
+			var win = Ext.create('PVE.storage.Upload', {
+			    nodename: nodename,
+			    storage: storage
+			});
+			win.show();
+			win.on('destroy', reload);
+		    }
+		}
+	    ],
 	    columns: [
 		{
 		    header: 'Name',
@@ -56,9 +259,7 @@ Ext.define('PVE.storage.ContentView', {
 		}
 	    ],
 	    listeners: {
-		show: function() {
-		    store.load();
-		}
+		show: reload
 	    }
 	});
 
@@ -69,7 +270,7 @@ Ext.define('PVE.storage.ContentView', {
     Ext.define('pve-storage-content', {
 	extend: 'Ext.data.Model',
 	fields: [ 
-	    'volid', 'format', 'size', 'used', 'vmid', 
+	    'volid', 'content', 'format', 'size', 'used', 'vmid', 
 	    'channel', 'id', 'lun'
 	],
 	idProperty: 'volid'