Upload_dialog.js example

var Application = {};
Application.uploadDialog = {
progressBarText:'Uploading：{0}，{1}%finish',
statuBarText:'File Number：{0} ，Size：{1}',
fileQueued:function(file){
var obj=Application.uploadDialog;

var filetype=(file.type.substr(1)).toUpperCase();
// if(filetype=='JPG' | filetype=='GIF'){
var data=[];
data.push([file.id,'selected',file.name,file.size,filetype]);
obj.uploadGrid.store.loadData(data,true);
obj.uploadAction[1].enable();
obj.uploadAction[2].enable();
obj.uploadAction[3].enable();
obj.stateInfo.getEl().innerHTML=String.format(obj.statuBarText,obj.uploadGrid.store.getCount(),Ext.util.Format.fileSize(obj.uploadGrid.store.sum('size')));
// }
// var filetype=(file.type.substr(1)).toUpperCase();
//
// if(filetype=='JPG' | filetype=='GIF'){
//
// swfu.startUpload();
//
// }else{
//
// Ext.Msg.alert('错误','only jpg,gif')
//
// }
},

uploadFileStar:function(file){
var obj=Application.uploadDialog;
var index=obj.findData(file.id);
if(index>=0){
obj.uploadGrid.store.getAt(index).set('state','uploading');
}
obj.uploadProgressBar.updateProgress(0,String.format(obj.progressBarText,file.name,0));
return true;
},

uploadProgress:function(file,bytesloaded){
var obj=Application.uploadDialog
var percent = Math.ceil((bytesloaded / file.size) * 100);
obj.uploadProgressBar.updateProgress(percent/100,String.format(obj.progressBarText,file.name,percent));
},

uploadFileComplete:function(file,serverData){
var msg = Ext.decode(serverData);
var obj=Application.uploadDialog;
var index=obj.findData(file.id);
if (msg.success){
if(index>=0){
obj.uploadGrid.store.getAt(index).set('state','ok');
}
if(obj.swfu.getStats().files_queued>0)
obj.swfu.startUpload();
}else{
if(index>=0){
obj.uploadGrid.store.getAt(index).set('state','Upload Failed');
Ext.Msg.alert('error','You are not able to upload any more photo as you have exceeded your photo quota. You are currently using ' + msg.space + 'M/ 1024 M of your photo quota!');
}
}
},

uploadFileCancelled:function(file, queuelength){
},

uploadQueueComplete:function(file){
try {
var obj=Application.uploadDialog;
obj.uploadProgressBar.updateProgress(1,'success');
obj.uploadAction[2].enable();
obj.uploadAction[4].enable();
Ext.getCmp("view_photo").store.reload({
callback: function(){
// tpl = ""
// <div>
// <h2>Gallery Space</h2>
// <p>Total: 8M</p>
// <p>Using: <%= @used_space %> M</p>
// <p>Photo number: <%= @user_photo.size %></p>
// </div>
// tp
}
});
// Ext.getCmp("info").load({
// url: "/photos/update_panel"
// });
} catch (ex) {
this.debug(ex);
}
},
fileQueueError:function(file,error,msg){
switch (error) {
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
Ext.Msg.alert('error','You can not upload files greater than 2MB!')
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
Ext.Msg.alert('error','Not to select file of zeno size!')
break;
case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
Ext.Msg.alert('error','You are not able to upload any more photo as you have exceeded your photo quota. You are currently using 95/100 of your photo quota!')
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
Ext.Msg.alert('error','Only select JPG,GIF,PNG file!')
break;
default:
Ext.Msg.alert('Upload Failed','Error:'+error+',file_name'+file.name)
break;
}
},
uploadError:function(file,error,msg){
var index=Application.uploadDialog.findData(file.id);
if(index>=0)
Application.uploadDialog.uploadGrid.store.getAt(index).set('state','faild');
//alert(errcode+','+file.name+','+msg);
},
uploadCancel:function(file, queuelength){
var index=Application.uploadDialog.findData(file.id);
if(index>=0)
Application.uploadDialog.uploadGrid.store.getAt(index).set('state','unselected');
},

fileDialogStart:function(){
},

fileDialogComplete:function (num_files_queued){

},

findData:function(id){
var rowindex=Application.uploadDialog.uploadGrid.store.find('id',id);
return rowindex;
},
show:function(){
if(!this.dialog)
this.initDialog();
this.uploadGrid.store.removeAll();
// if(data)
// this.classStore.loadData(data);
// this.uploadAction[0].enable();
// this.uploadAction[1].disable();
// this.uploadAction[2].disable();
// this.uploadAction[3].disable();
// this.uploadAction[4].enable();
//this.uploadProgressBar.updateProgress(0,'');
this.dialog.show();
Application.uploadDialog.swfu=new SWFUpload({

upload_url:"/photos/create",
// prevent_swf_caching : false,
file_post_name : "Filedata",
file_size_limit : "2MB",
file_types : "*.jpg;*.jpeg;*.gif;*.png",
file_types_description : "Picture",
file_upload_limit : 10,
custom_settings : {
myFileListTarget : "upload",
degraded_container_id : "divDegraded"
},
// post_params :
// {
// "userid" : 1
// },

requeue_on_error: false,
button_placeholder_id: "add_picture",
button_image_url: "/javascripts/gallery/images/add_image.png",
button_width: "50",
button_height: "17",
button_text: "Add",
button_text_left_padding: 20,
// button_icon: 'add_gallery_btn',
// button_disable : false,
button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,
button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
file_dialog_start_handler : Application.uploadDialog.fileDialogStart,
file_queued_handler : Application.uploadDialog.fileQueued,
file_queue_error_handler : Application.uploadDialog.fileQueueError,
file_dialog_complete_handler : Application.uploadDialog.fileDialogComplete,
upload_start_handler : Application.uploadDialog.uploadFileStar,
upload_progress_handler : Application.uploadDialog.uploadProgress,
upload_error_handler : Application.uploadDialog.uploadError,
upload_success_handler : Application.uploadDialog.uploadFileComplete,
upload_complete_handler : Application.uploadDialog.uploadQueueComplete,
// file_complete_handler : Application.uploadDialog.uploadFileComplete,
flash_url:"/swfupload.swf",
debug: false
})
},
hide:function(){
this.dialog.hide();
},

uploadAction:[
new Ext.Action({
text:'Add',
iconCls: 'add_gallery_btn',
handler:function(){
// Application.uploadDialog.swfu.selectFiles();
}
}),
new Ext.Action({
text:'Delete',
iconCls: 'delete_photo_btn',
disabled:true,
handler:function(){
var obj=Application.uploadDialog;
var grid=obj.uploadGrid;
var store=grid.store;
var selection=grid.getSelectionModel().getSelections();
for(var i=0;i<selection.length;i++){
var rec=store.getAt(store.indexOfId(selection[i].id));
obj.swfu.cancelUpload(rec.data.id);
store.remove(rec);
}
obj.stateInfo.getEl().innerHTML=String.format(obj.statuBarText,obj.uploadGrid.store.getCount(),Ext.util.Format.fileSize(obj.uploadGrid.store.sum('size')));
if(obj.uploadGrid.store.getCount()==0){
obj.uploadGrid.store.removeAll();
obj.uploadAction[1].disable();
obj.uploadAction[2].disable();
obj.uploadAction[3].disable();
}
}
}),
new Ext.Action({
text:'Reset',
iconCls: 'reset_btn',
disabled:true,
handler:function(){
var obj=Application.uploadDialog;
var store=obj.uploadGrid.store;
var len=store.getCount();
for(var i=0;i<len;i++){
var rec=store.getAt(i);
obj.swfu.cancelUpload(rec.data.id);
}
store.removeAll();
obj.swfu.setStats({successful_uploads: 0});
// obj.classCombo.clearValue();
obj.stateInfo.getEl().innerHTML=String.format(obj.statuBarText,0,Ext.util.Format.fileSize(0));
obj.uploadProgressBar.updateProgress(0,'');
obj.uploadProgressBar.updateText("");
obj.uploadAction[0].enable();
obj.uploadAction[1].disable();
obj.uploadAction[2].disable();
obj.uploadAction[3].disable();
}
}),
new Ext.Action({
text:'Upload',
iconCls: 'upload_btn',
disabled:true,
handler:function(){
var obj=Application.uploadDialog;
obj.uploadAction[0].disable();
obj.uploadAction[1].disable();
obj.uploadAction[2].disable();
obj.uploadAction[3].disable();
obj.uploadAction[4].disable();
var store=obj.uploadGrid.store;
var len=store.getCount();
// var userid=kk;
// obj.swfu.setPostParams({
// 'user_id': //defaulte userid = 1
// });
obj.swfu.startUpload();
}
}),
new Ext.Action({
text:'Close',
iconCls: 'close_btn',
handler:function(){
Application.uploadDialog.hide();
}
})
],

initDialog:function(){
// this.classCombo=new Ext.form.ComboBox({
// hiddenName:'classid',
// name: 'classid_name',
// valueField:"id",
// displayField:"text",
// mode:'local',
// store:this.classStore,
// blankText:'Select your Mygallery',
// emptyText:'Select your Mygallery',
// editable:true,
// anchor:'90%'
// })
this.dialog=new Ext.Window({
layout:'fit',
width:600,
height:500,
title:'Upload your picture',
closeAction:'hide',
border:false,
modal:true,
plain:true,
closable:false,
resizable:false,
bbar:[this.uploadProgressBar=new Ext.ProgressBar({
width:586
})],
items:[
Application.uploadDialog.uploadGrid=new Ext.grid.GridPanel({
autoExpandColumn:2,
enableHdMenu:false,
tbar:[this.uploadbuttom = new Ext.Button({
text:'Add',
id: 'add_picture', // assign menu by instance
iconCls: 'add_gallery_btn'
}),Application.uploadDialog.uploadAction[1],Application.uploadDialog.uploadAction[2],
'-',Application.uploadDialog.uploadAction[3],"-"
,Application.uploadDialog.uploadAction[4]],
bbar:[Application.uploadDialog.stateInfo=new Ext.Toolbar.TextItem(String.format(Application.uploadDialog.statuBarText,0,Ext.util.Format.fileSize(0)))],
store: new Ext.data.SimpleStore({
fields: ["id","state", "file","size","type"],
data:[]
}),
columns:[
new Ext.grid.RowNumberer(),
{
id:'id',
header: "id",
hidden:true,
width:150,
dataIndex:'id',
resizable:false,
sortable:false
},

{
header: "File name",
width:Ext.grid.GridView.autoFill,
dataIndex:'file',
sortable:true
},

{
header: "Size",
width: 80,
renderer:Ext.util.Format.fileSize,
dataIndex:'size',
sortable:true,
align:'right'
},

{
header: "Type",
width: 80,
dataIndex:'type',
align:'center',
sortable:true
},

{
header: "Status",
width: 100,
dataIndex:'state',
align:'center',
sortable:true
}
]
})
]
})
}

}//Application.uploadDialog