--- /dev/null
+/**\r
+ * Makes a Panel to provide the ability to upload multiple files using the SwfUpload flash script.\r
+ *\r
+ * @author Michael Giddens\r
+ * @website http://www.silverbiology.com\r
+ * @created 2008-03-06\r
+ * @version 0.4\r
+ *\r
+ * @known_issues \r
+ * - Progress bar used hardcoded width. Not sure how to make 100% in bbar\r
+ * - Panel requires width / height to be set. Not sure why it will not fit\r
+ * - when panel is nested sometimes the column model is not always shown to fit until a file is added. Render order issue.\r
+*/\r
+\r
+// Create user extension namespace\r
+Ext.namespace('Ext.ux');\r
+\r
+Ext.ux.SwfUploadPanel = function(config){\r
+\r
+ // Default Params for SwfUploader\r
+// if (!config.title) config.title = 'File Upload';\r
+ if (!config.single_select) config.single_select = false;\r
+ if (!config.file_types) config.file_types = "*.*";\r
+ if (!config.file_types_description) config.file_types_description = "All Files";\r
+ if (!config.file_size_limit) config.file_size_limit = "102400"; //100MB\r
+ if (!config.file_upload_limit) config.file_upload_limit = "0";\r
+ if (!config.file_post_name) config.file_post_name = "Filedata"; // This is the "name" of the file item that the server-side script will receive. Setting this doesn't work in the Linux Flash Player\r
+ if (!config.flash_url) config.flash_url = "swfupload_f9.swf"; // Relative to this file\r
+ if (!config.debug) config.debug = false;\r
+ \r
+ this.rec = Ext.data.Record.create([\r
+ {name: 'name'},\r
+ {name: 'size'},\r
+ {name: 'id'},\r
+ {name: 'type'},\r
+ {name: 'creationdate', type: 'date', dateFormat: 'm/d/Y'},\r
+ {name: 'status'},\r
+ {name: 'note'}\r
+ ]);\r
+ \r
+ var store = new Ext.data.Store({\r
+ reader: new Ext.data.JsonReader({\r
+ id: 'id'\r
+ }, this.rec)\r
+ });\r
+\r
+ this.suo = new SWFUpload({\r
+ upload_url: config.upload_url,\r
+ post_params: config.post_params,\r
+ file_post_name: config.file_post_name, \r
+ file_size_limit : config.file_size_limit,\r
+ file_types : config.file_types,\r
+ file_types_description : config.file_types_description,\r
+ file_upload_limit : config.file_upload_limit,\r
+ flash_url : config.flash_url, \r
+\r
+ // Event Handler Settings\r
+ file_queued_handler : this.fileQueue.createDelegate(this),\r
+ file_queue_error_handler : this.fileQueueError.createDelegate(this),\r
+ file_dialog_complete_handler : this.fileDialogComplete.createDelegate(this),\r
+ \r
+ upload_error_handler : this.uploadError.createDelegate(this), \r
+ upload_progress_handler : this.uploadProgress.createDelegate(this),\r
+ upload_complete_handler : this.uploadComplete.createDelegate(this),\r
+\r
+ upload_success_handler : this.fileComplete.createDelegate(this),\r
+ upload_error_handler : this.fileCancelled.createDelegate(this),\r
+\r
+ swfupload_loaded_handler : this.swfUploadLoaded.createDelegate(this),\r
+\r
+ debug: config.debug\r
+\r
+ });\r
+\r
+ this.progress_bar = new Ext.ProgressBar({\r
+ text:'Progress Bar'\r
+// , width: config.width - 7\r
+ }); \r
+\r
+ var cm = new Ext.grid.ColumnModel([{id:'name', header: "Filename", width: 150, dataIndex: 'name'}\r
+ , {id:'size', header: "Size", width: 80, dataIndex: 'size', renderer: this.formatBytes }\r
+ , {id:'status', header: "Status", width: 80, dataIndex: 'status', renderer: this.formatStatus }\r
+ , {id:'note', header: "Note", dataIndex: 'note'}\r
+ ]);\r
+ \r
+ config = config || {};\r
+ config = Ext.apply(config || {}, {\r
+\r
+ store: store\r
+ , cm: cm\r
+ , autoExpandColumn: 'note'\r
+ , enableColumnResize: true\r
+ , enableColumnMove: false\r
+ \r
+ , sm: new Ext.grid.RowSelectionModel({singleSelect: config.single_select})\r
+ , tbar: [{ text:'Add File(s)'\r
+ , iconCls: 'SwfUploadPanel_iconAdd'\r
+ , scope: this\r
+ , handler: function() {\r
+ if (config.single_file_select)\r
+ this.suo.selectFile();\r
+ else\r
+ this.suo.selectFiles();\r
+ }\r
+ }, '->', {\r
+ text: 'Cancel Upload'\r
+ , id: 'cancel'\r
+ , iconCls: 'SwfUploadPanel_iconCancel'\r
+ , handler: this.stopUpload.createDelegate(this)\r
+ , hidden: true\r
+ }, {\r
+ text: 'Upload File(s)'\r
+ , iconCls: 'SwfUploadPanel_iconUpload'\r
+ , handler: this.uploadFiles.createDelegate(this)\r
+ , hidden: true\r
+ }\r
+ ]\r
+\r
+ , bbar: [ this.progress_bar ]\r
+ \r
+ , listeners: {\r
+ \r
+ 'keydown': function(e) {\r
+ // Delete Row \r
+ function removeRows(grid) {\r
+ var selRecords = grid.getSelections();\r
+ for (var i=0; i < selRecords.length; i++) {\r
+ if (selRecords[i].data.status != 1) {\r
+ grid.suo.cancelUpload(selRecords[i].id);\r
+ grid.store.remove(selRecords[i]);\r
+ }\r
+ }\r
+ \r
+ if (grid.suo.getStats().files_queued == 0) {\r
+ grid.getTopToolbar().items.get(3).setVisible(false);\r
+ }\r
+\r
+ }\r
+ \r
+ if (config.confirm_delete) {\r
+ if(e.getKey() == e.DELETE) {\r
+ Ext.MessageBox.confirm('Remove File','Are you sure you wish to remove this file from queue?', function(e) {\r
+ if (e == 'yes') {\r
+ removeRows(this);\r
+ }\r
+ });\r
+ } \r
+ } else {\r
+ if(e.getKey() == e.DELETE) {\r
+ removeRows(this);\r
+ }\r
+ }\r
+ }\r
+ \r
+ // Prevent the default right click to show up in the grid.\r
+ , 'contextmenu': function(e) {\r
+ e.stopEvent();\r
+ }\r
+ }\r
+\r
+ });\r
+\r
+ cm.defaultSortable = false;\r
+\r
+ Ext.ux.SwfUploadPanel.superclass.constructor.apply(this, arguments);\r
+\r
+ try {\r
+ this.progress_bar.setWidth(this.bbar.getWidth() - 5);\r
+ Ext.fly(this.progress_bar.el.dom.firstChild.firstChild).applyStyles("height: 16px");\r
+ } catch (ex1) {\r
+ }\r
+ \r
+ this.on('resize', function() { \r
+ this.progress_bar.setWidth(this.bbar.getWidth() - 5); \r
+ Ext.fly(this.progress_bar.el.dom.firstChild.firstChild).applyStyles("height: 16px");\r
+ });\r
+\r
+};\r
+\r
+Ext.extend(Ext.ux.SwfUploadPanel, Ext.grid.GridPanel, {\r
+\r
+ /**\r
+ * Formats file status\r
+ * @param {Integer} status\r
+ * @return {String}\r
+ */\r
+ formatStatus: function(status) {\r
+ switch(status) {\r
+ case 0: return("Ready");\r
+ case 1: return("Uploading...");\r
+ case 2: return("Completed");\r
+ case 3: return("Error");\r
+ case 4: return("Cancelled");\r
+ }\r
+ }\r
+ \r
+ /**\r
+ * Formats raw bytes into kB/mB/GB/TB\r
+ * @param {Integer} bytes\r
+ * @return {String}\r
+ */\r
+ , formatBytes: function(bytes) {\r
+ if(isNaN(bytes)) { return (''); }\r
+ \r
+ var unit, val;\r
+ \r
+ if(bytes < 999) {\r
+ unit = 'B';\r
+ val = (!bytes && this.progressRequestCount >= 1) ? '~' : bytes;\r
+ } else if(bytes < 999999) {\r
+ unit = 'kB';\r
+ val = Math.round(bytes/1000);\r
+ } else if(bytes < 999999999) {\r
+ unit = 'MB';\r
+ val = Math.round(bytes/100000) / 10;\r
+ } else if(bytes < 999999999999) {\r
+ unit = 'GB';\r
+ val = Math.round(bytes/100000000) / 10;\r
+ } else {\r
+ unit = 'TB';\r
+ val = Math.round(bytes/100000000000) / 10;\r
+ }\r
+ \r
+ return (val + ' ' + unit);\r
+ }\r
+\r
+ /**\r
+ * Show notice when error occurs\r
+ * @param {Object, Integer, Integer}\r
+ * @return {}\r
+ */\r
+ , uploadError: function(file, error, code) {\r
+ switch (error) {\r
+ case -200: Ext.MessageBox.alert('Error','File not found 404.');\r
+ break;\r
+ case -230: Ext.MessageBox.alert('Error','Security Error. Not allowed to post to different url.');\r
+ break;\r
+ }\r
+ }\r
+\r
+\r
+ /**\r
+ * Add file to store / grid\r
+ * @param {file}\r
+ * @return {}\r
+ */\r
+ , fileQueue: function(file) {\r
+ file.status = 0;\r
+ r = new this.rec(file);\r
+ r.id = file.id;\r
+ this.store.add(r);\r
+ this.fireEvent('fileQueued', this, file); \r
+ }\r
+\r
+ /**\r
+ * Error when file queue error occurs\r
+ */\r
+ , fileQueueError: function(a, code, queue_remaining) {\r
+ switch (code) {\r
+ case -100: Ext.MessageBox.alert('Error','The selected files you wish to add exceedes the remaining allowed files in the queue. There are ' + queue_remaining + ' remaining slots.');\r
+ break;\r
+ }\r
+ }\r
+\r
+ , fileComplete: function(file, result) {\r
+\r
+ var o = Ext.decode(result); \r
+ this.fireEvent('fileUploadComplete', this, file, o);\r
+ \r
+ if ('success' in o && o.success) {\r
+ this.store.getById(file.id).set('status', 2);\r
+ this.store.getById(file.id).set('note', o.message || o.error);\r
+ this.store.getById(file.id).commit();\r
+ }\r
+ else {\r
+ this.store.getById(file.id).set('status', 3);\r
+ this.store.getById(file.id).set('note', o.message || o.error);\r
+ this.store.getById(file.id).commit();\r
+ }\r
+ \r
+ if (this.suo.getStats().files_queued > 0) {\r
+ this.uploadFiles();\r
+ } else {\r
+ this.getTopToolbar().items.get(2).setVisible(false); \r
+ this.getTopToolbar().items.get(3).setVisible(false);\r
+ \r
+ this.fireEvent('queueUploadComplete', this);\r
+ \r
+ }\r
+ \r
+ }\r
+\r
+ , fileDialogComplete: function(file_count) {\r
+ if (file_count > 0)\r
+ this.getTopToolbar().items.get(3).setVisible(true);\r
+ }\r
+\r
+ , uploadProgress: function(file, current_size, total_size) {\r
+ this.store.getById(file.id).set('status', 1); \r
+ this.store.getById(file.id).commit();\r
+ this.progress_bar.updateProgress(current_size/total_size, 'Uploading file: ' + file.name + ' (' + this.formatBytes(current_size) + ' of ' + this.formatBytes(total_size) + ')');\r
+ }\r
+\r
+ , uploadComplete: function(file, result) {\r
+\r
+ if (this.cancelled) {\r
+ this.cancelled = false;\r
+ } else {\r
+ //var o = Ext.decode(result); \r
+ \r
+ //this.store.getById(file.id).set('status', 2);\r
+ //this.store.getById(file.id).commit();\r
+ this.progress_bar.reset();\r
+ this.progress_bar.updateText('Progress Bar');\r
+ \r
+ if (this.remove_completed) {\r
+ this.store.remove(this.store.getById(file.id));\r
+ }\r
+ \r
+ //this.fireEvent('fileUploadComplete', this, file, o);\r
+ }\r
+ }\r
+\r
+ , uploadFiles: function() {\r
+ this.getTopToolbar().items.get(2).setVisible(true); \r
+ this.suo.startUpload();\r
+ }\r
+ \r
+ , addPostParam: function( name, value ) {\r
+ this.suo.settings.post_params[name] = value;\r
+ this.suo.setPostParams( this.suo.settings.post_params );\r
+ }\r
+ \r
+ , stopUpload: function( cancel_btn ) {\r
+ this.suo.stopUpload();\r
+ this.getStore().each(function() {\r
+ if (this.data.status == 1) {\r
+ this.set('status', 0);\r
+ this.commit();\r
+ }\r
+ });\r
+\r
+ this.getTopToolbar().items.get(2).setVisible(false); \r
+ this.progress_bar.reset();\r
+ this.progress_bar.updateText('Progress Bar');\r
+ \r
+ }\r
+ \r
+ , fileCancelled: function(file, code, b, c, d) {\r
+ if (code == -280) return;\r
+ \r
+ this.store.getById(file.id).set('status', 4);\r
+ this.store.getById(file.id).commit();\r
+ this.progress_bar.reset();\r
+ this.progress_bar.updateText('Progress Bar');\r
+\r
+ if (this.suo.getStats().files_queued > 0) {\r
+ this.getTopToolbar().items.get(2).setVisible(false); \r
+ } else {\r
+ this.getTopToolbar().items.get(2).setVisible(false); \r
+ this.getTopToolbar().items.get(3).setVisible(false); \r
+ }\r
+\r
+ this.cancelled = true;\r
+ }\r
+ \r
+ , swfUploadLoaded: function() {\r
+ this.fireEvent('swfUploadLoaded', this);\r
+ }\r
+ \r
+});
\ No newline at end of file