PDA

View Full Version : Ext.ux.SWFUpload



Akujin
13 Oct 2011, 10:36 PM
http://jarv.us/img/dynamicWearMagnify.png
GitHub (https://github.com/JarvusInnovations/Ext.ux.SWFUpload) SWFUpload.js (https://raw.github.com/JarvusInnovations/Ext.ux.SWFUpload/master/src/SWFUpload.js)


/*
* 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'

,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:<br><br>'+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:<br><br>'+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);

}
});

Mycoding
13 Oct 2011, 11:07 PM
It's really needed.
Thanks.

Could you be so kind to place one simple sample of working?

Akujin
13 Oct 2011, 11:18 PM
Here's two instances being assigned references in some object. Could be anything.

this.frontUploaderSWF = Ext.create('Ext.ux.SWFUpload', {
renderTo: artworkBox.frontUploadBtn
,config: {
autoStart: true
,debugMode: false
,targetUrl: '/artwork/json/upload'
,fieldName: 'Front'
,file_size_limit: "50 MB"
,file_types: '*'
,file_types_description: 'Front T-Shirt Artwork'
,button_width: 158
,button_height: 55
,button_image_url: '/img/buttons/upload-front.png'
,button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE
}
,listeners: {
scope: this
,ready: function() {
//this.onReady('front');
}
,uploadStarted: function(file) { //start
this.frontArtwork = null;
this.frontArtworkUploading = true;
this.updateFrontArtwork();

artworkBox.frontProgressBar.setWidth(0);
artworkBox.frontProgressCt.show(true);
artworkBox.frontUploadedFile.show(true);
}
,uploadProgress: function(file, bytesLoaded, bytesTotal) { //progress
artworkBox.frontProgressBar.setWidth(parseInt((bytesLoaded / bytesTotal) * 100) + '%');
}
,uploadComplete: function(file) { //finish
artworkBox.frontProgressBar.setWidth('100%');
artworkBox.frontProgressCt.hide({
listeners: {
afteranimate: function() {
artworkBox.frontProgressBar.setWidth(0);
}
}
});
}
,uploadError: function(file, errorCode, errorMessage) { //error
console.info(file,errorCode, errorMessage);
this.frontArtworkUploading = false;
}
,uploadResponse: function(file, responseText, receivedResponse) { //file upload response
var r = Ext.decode(responseText);

if(r.success)
{
this.frontArtwork = Ext.ModelManager.create(r.data.Front, 'DWD.model.Artwork');
this.updateFrontArtwork();
}
else
{
Ext.Msg.alert('Upload failed', r.message ? r.message : 'Your upload failed, please try again later or contact support');
}

this.frontArtworkUploading = false;
}
}
});

this.backUploaderSWF = Ext.create('Ext.ux.SWFUpload', {
renderTo: artworkBox.backUploadBtn
,config: {
autoStart: true
,debugMode: false
,targetUrl: '/artwork/json/upload'
,fieldName: 'Back'
,file_size_limit: "50 MB"
,file_types: '*'
,file_types_description: 'Back T-Shirt Artwork'
,button_width: 158
,button_height: 55
,button_image_url: '/img/buttons/upload-back.png'
,button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE
}
,listeners: {
scope: this
,ready: function() {
//this.onReady('back');
}
,uploadStarted: function(file) { //start
this.backArtwork = null;
this.backArtworkUploading = true;
this.updateBackArtwork();

artworkBox.backProgressBar.setWidth(0);
artworkBox.backProgressCt.show(true);
artworkBox.backUploadedFile.show(true);
}
,uploadProgress: function(file, bytesLoaded, bytesTotal) { //progress
artworkBox.backProgressBar.setWidth(parseInt((bytesLoaded / bytesTotal) * 100) + '%');
}
,uploadComplete: function(file) { //finish
artworkBox.backProgressBar.setWidth('100%');
artworkBox.backProgressCt.hide({
listeners: {
afteranimate: function() {
artworkBox.backProgressBar.setWidth(0);
}
}
});
}
,uploadError: function(file, errorCode, errorMessage) { //error
console.info(file,errorCode, errorMessage);
this.backArtworkUploading = false;
}
,uploadResponse: function(file, responseText, receivedResponse) { //file upload response
var r = Ext.decode(responseText);

if(r.success)
{
this.backArtwork = Ext.ModelManager.create(r.data.Back, 'DWD.model.Artwork');

this.updateBackArtwork();
}
else
{
Ext.Msg.alert('Upload failed', r.message ? r.message : 'Your upload failed, please try again later or contact support');
}

this.backArtworkUploading = false;
}
}
});
}

Mycoding
14 Oct 2011, 8:12 AM
Thanks a lot.
As only I will have time I will test it.

It is odd that in ExtJS 3 and 4 there are not actionscript uploader and some more actionscript extentions like:
video,audio players, ...
I also like HTML5 but in fact it is really needed actionscript decisions.
So developers have to find some code or to develop it by themselves.(and it is not stable and take time)
I wish in ExtJS some actionscript extentions will appear.