examples/image-organizer/imgorg/UploadQueue.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Imgorg.UploadQueue = Ext.extend(Ext.Panel,{
   8     swfu: '',
   9     autoRemove: false,
  10     uploaded: false,
  11
  12     initComponent: function() {
  13         Ext.apply(this,{
  14             layout: 'fit',
  15             autoScroll: true,
  16             items: [{
  17                 xtype: 'dataview',
  18                 id: 'img-uploaddv',
  19                 autoWidth: true,
  20                 tpl: new Ext.XTemplate(
  21                     '<tpl for=".">',
  22                         '<div class="upload-file" id="{id}">',
  23                             '<div class="upload-name">{name}</div>',
  24                             '<div id="{id}-pb" class="upload-pb"></div>',
  25                             '<div class="x-clear"></div>',
  26                             '<div class="upload-info">{size:fileSize}</div>',
  27                         '</div>',
  28                     '</tpl>'
  29                 ),
  30                 store: new Ext.data.JsonStore({
  31                     root: '',
  32                     id: 'id',
  33                     fields: [
  34                         {name: 'creationdate', type: 'date'},
  35                         {name: 'modificationdate', type: 'date'},
  36                         'filestatus','id','index','name','size','type','dbid'
  37                     ]
  38                 }),
  39                 itemSelector: 'div.upload-file',
  40                 selectedClass: 'upload-file-selected',
  41                 singleSelect: true
  42             }],
  43             tbar:[{
  44                 text: 'Start Upload',
  45                 handler: this.startUpload,
  46                 scope: this,
  47                 iconCls: 'start-upload'
  48             },{
  49                 text: 'Clear',
  50                 handler: this.cancelUpload,
  51                 scope: this,
  52                 iconCls: 'cancel'
  53             },'-',{
  54                 text: 'Add to Album',
  55                 handler: this.addAllAlbum,
  56                 scope: this,
  57                 iconCls: 'album-add'
  58             },{
  59                 text: 'Tag',
  60                 handler: this.tagAll,
  61                 scope: this,
  62                 iconCls: 'tag'
  63             },
  64             '->',{
  65                 xtype: 'checkbox',
  66                 checked: this.autoRemove,
  67                 listeners: {
  68                     check: function(cb, checked) {
  69                         this.autoRemove = checked;
  70                     },
  71                     scope: this
  72                 }
  73             },'Auto-Remove Uploaded']
  74         });
  75         Imgorg.UploadQueue.superclass.initComponent.call(this);
  76
  77         this.progressBars = {};
  78
  79         Ext.ux.SwfuMgr.on('filequeued', this.addFile, this);
  80         Ext.ux.SwfuMgr.on('uploadprogress', this.updateProgress, this);
  81         Ext.ux.SwfuMgr.on('uploadsuccess', this.uploadSuccess, this);
  82     },
  83
  84     getDv: function() {
  85         if (!this.imgUplDv) {
  86             this.imgUplDv = this.getComponent('img-uploaddv');
  87         }
  88         return this.imgUplDv;
  89     },
  90
  91     startUpload: function() {
  92         this.swfu.startUpload();
  93     },
  94
  95     cancelUpload: function() {
  96         this.swfu.cancelUpload();
  97         for (var pb in this.progressBars) {
  98             this.progressBars[pb].destroy();
  99         }
 100         this.getDv().store.removeAll();
 101         this.uploaded = false;
 102     },
 103
 104     addFile: function(swfu, file) {
 105         this.getDv().store.loadData([file], true);
 106     },
 107
 108     addAllAlbum: function(btn) {
 109         if (!this.uploaded) {
 110             Ext.Msg.alert('Warning', 'You must upload files before you can add them to an Album');
 111             return;
 112         }
 113         var dv = this.getDv();
 114         var recs = dv.getRecords(dv.getNodes());
 115         if (!this.albumWin) {
 116             this.albumWin = new Imgorg.AlbumWin();
 117         }
 118         this.albumWin.selectedRecords = recs;
 119         this.albumWin.show(btn.btnEl.dom);
 120     },
 121
 122     tagAll: function(btn) {
 123         if (!this.uploaded) {
 124             Ext.Msg.alert('Warning', 'You must upload files before you can Tag them');
 125             return;
 126         }
 127         var dv = this.getDv();
 128         var recs = dv.getRecords(dv.getNodes());
 129         Imgorg.TagWin.selectedRecords = recs;
 130         Imgorg.TagWin.show(btn.btnEl.dom);
 131     },
 132
 133     updateProgress: function(swfu, file, complete, total) {
 134         if (this.progressBars[file.id]) {
 135             this.progressBars[file.id].updateProgress(file.percentUploaded/100,Math.round(file.percentUploaded)+'% Completed... '+Ext.util.Format.fileSize(file.currentSpeed)+'s');
 136         } else {
 137             this.progressBars[file.id] = new Ext.ProgressBar({
 138                 text:'0% Completed...',
 139                 renderTo: file.id+'-pb'
 140             });
 141         }
 142     },
 143
 144     uploadSuccess: function(swfu, file, data) {
 145         var store = this.getDv().store;
 146         var rec = store.getById(file.id);
 147         if (this.progressBars[file.id]) {
 148             this.progressBars[file.id].updateProgress(1, '100% Completed...');
 149         }
 150         if (this.autoRemove) {
 151             store.remove(rec);
 152         }
 153         var data = Ext.decode(Ext.util.Format.stripTags(data));
 154         rec.data.dbid = data.result.res.id;
 155         this.uploaded = true;
 156     }
 157 });
 158 Ext.reg('img-uploadqueue', Imgorg.UploadQueue);
 159
 160 Ext.ux.SwfuManager = Ext.extend(Ext.util.Observable, {
 161     constructor: function(config) {
 162         Ext.ux.SwfuManager.superclass.constructor.call(this, config);
 163         this.addEvents(
 164             'filequeued',
 165             'uploadstart',
 166             'uploadprogress',
 167             'uploaderror',
 168             'uploadsuccess'
 169         );
 170     }
 171 });
 172
 173 Ext.ux.SwfuMgr = new Ext.ux.SwfuManager();