/* * SWFUpload adapter for Ext * Author: Chris Alfano (chris@devnuts.com) - Sep 06,2009 * Author: Henry Paradiz (henry@devnuts.com) - June 17, 2011 - Upgraded to Ext 4 * * See SWFUpload documentation: http://demo.swfupload.org/Documentation/#settingsobject */ // REQUIRES THIS EXTERNAL FILE: //name: 'SWFUpload' //,URL: '/jslib/SWFUpload/swfupload.js' // need to figure out how to dynamically load this with Extjs4 Ext.define('Ext.ux.SWFUpload', { extend: 'Ext.Component' ,requires: ['Ext.util.Cookies'] ,config: { autoStart: true ,debugMode: false ,targetUrl: '/media/json/upload' ,fieldName: 'mediaFile' ,swfUrl: '/jslib/SWFUpload/Flash/swfupload.swf' ,swfUploadCfg: {} ,relayCookies: false ,baseParams: [] ,progressBar: false ,file_size_limit: "16 MB" ,file_types: '*.jpg; *.jpeg; *.png; *.gif; *.JPG; *.JPEG; *.PNG; *.GIF' ,file_types_description: 'Media' ,button_width: 100 ,button_height: 22 ,button_image_url: '/img/icons/blank_upload_button.png' ,scope: null ,button_action: SWFUpload.BUTTON_ACTION.SELECT_FILES } ,constructor: function(config) { this.initConfig(config); return this.callParent(arguments); } ,initComponent: function() { if(!this.relayCookies) this.relayCookies = ['s']; // init error state this.errorOccurred = false; // generate ID for SWFUpload container this.flashContainerId = Ext.id(null, 'swfupload'); // register custom events this.addEvents({ 'ready': true ,'queueError': true ,'filesSelected': true ,'fileQueued': true ,'uploadError': true ,'uploadStarted': true ,'uploadProgress': true ,'uploadComplete': true ,'uploadResponse': true ,'allUploadsComplete': true }); // call parent this.callParent(arguments); } ,onRender: function(container, position) { // call parent this.callParent(arguments); this.photoUploaderSpan = this.el.createChild({ tag: 'span' ,id: this.flashContainerId ,style: 'margin: 2px' }); var params = Ext.apply({},this.baseParams); Ext.each(this.relayCookies, function(cookieName) { params[cookieName] = Ext.util.Cookies.get(cookieName) }); // create SWF uploader var config = this.getConfig(params); //console.log('Creating with %o', config); this.SWFUpload = new SWFUpload(config); } ,setPostParams: function(params) { for(var field in params) { this.addPostParam(field, params[field]); } } ,addPostParam: function(field, value) { this.SWFUpload.addPostParam(field, value); } ,getConfig: function(params) { return Ext.apply({ // backend settings debug: this.debugMode ,upload_url: this.targetUrl ,file_post_name: this.fieldName ,flash_url: this.swfUrl ,post_params: params // trigger settings ,button_placeholder_id: this.flashContainerId ,button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT ,button_width: this.button_width ,button_height: this.button_height ,button_image_url: this.button_image_url ,button_text_left_padding: 20 ,button_text_top_padding: 2 ,button_action: this.button_action ,file_size_limit: this.file_size_limit ,file_types: this.file_types ,file_types_description: this.types_description ,file_upload_limit: "0" // event handlers ,swfupload_loaded_handler: Ext.bind(function() { if(false!==this.fireEvent('ready') && this.progressBar) { this.progressBar.updateProgress(0, 'Ready to upload media', false); this.progressBar.enable(); } },this) ,file_queue_error_handler: Ext.bind(function(file, errorCode, errorMessage) { this.errorOccurred = true; if(false!==this.fireEvent('queueError', file, errorCode, errorMessage)) { Ext.Msg.alert('Upload Failed', 'This file cannot be uploaded:

'+errorMessage); } },this) ,upload_error_handler: Ext.bind(function(file, errorCode, errorMessage) { this.errorOccurred = true; if(false!==this.fireEvent('uploadError', file, errorCode, errorMessage)) { Ext.Msg.alert('Upload Failed', 'An error occured while uploading your file:

'+errorMessage); } },this) ,file_dialog_complete_handler: Ext.bind(function(numFilesSelected, numFilesQueued, queueTotal) { // reset error state this.errorOccurred = false; if(false!==this.fireEvent('filesSelected', numFilesSelected, numFilesQueued, queueTotal) && this.progressBar) { if(numFilesQueued) this.progressBar.updateProgress(0, 'Preparing to upload '+queueTotal+(queueTotal>1?' files...':' file...'), false); else this.progressBar.updateProgress(0, 'Ready to upload media', false); } if(this.autoStart) { try { if (numFilesSelected > 0) { this.SWFUpload.startUpload(); } } catch (ex) { this.SWFUpload.debug(ex); } } },this) ,file_queued_handler: Ext.bind(function(file) { this.fireEvent('fileQueued', file); },this) ,upload_start_handler: Ext.bind(function(file) { // skip during errors if(this.errorOccurred) { return; } if(false!==this.fireEvent('uploadStarted',file) && this.progressBar) { this.progressBar.updateProgress(0, 'Uploading ' + file.name, false); } },this) ,upload_progress_handler: Ext.bind(function(file, bytesLoaded, bytesTotal) { // skip during errors if(this.errorOccurred) { return; } if(false!==this.fireEvent('uploadProgress', file, bytesLoaded, bytesTotal) && this.progressBar) { this.progressBar.updateProgress(bytesLoaded / bytesTotal, 'Uploading ' + file.name, true); } },this) ,upload_success_handler: Ext.bind(function(file, responseText, receivedResponse) { // skip during errors if(this.errorOccurred) { return; } this.fireEvent('uploadResponse', file, responseText, receivedResponse); if(this.debugMode) { console.log('Received upload response for %s: %o', file.name, responseText); } },this) ,upload_complete_handler: Ext.bind(function(file) { // skip during errors if(this.errorOccurred) { return; } if(false!==this.fireEvent('uploadComplete', file) && this.progressBar) { this.progressBar.updateProgress(1, 'Finished uploading ' + file.name, true); this.progressBar.el.frame(); } if (this.SWFUpload.getStats().files_queued == 0) { if(false!==this.fireEvent('allUploadsComplete') && this.progressBar) { this.progressBar.updateText('Finished uploading all files. Ready to upload media'); } } else { // start next file if(this.autoStart) { this.SWFUpload.startUpload(); } } },this) }, this.swfUploadCfg); } ,getStats: function() { return this.SWFUpload.getStats(); } ,getFile: function(index) { return this.SWFUpload.getFile(index); } ,cancelUpload: function(index,triggerErrorEvent) { if (triggerErrorEvent !== false) { triggerErrorEvent = true; } return this.SWFUpload.cancelUpload(index); } ,startUpload: function(index) { return this.SWFUpload.startUpload(index); } });