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