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