examples/form/file-upload.js

   1 Ext.require([
   2     'Ext.form.field.File',
   3     'Ext.form.Panel',
   4     'Ext.window.MessageBox'
   5 ]);
   6
   7 Ext.onReady(function(){
   8
   9     var msg = function(title, msg) {
  10         Ext.Msg.show({
  11             title: title,
  12             msg: msg,
  13             minWidth: 200,
  14             modal: true,
  15             icon: Ext.Msg.INFO,
  16             buttons: Ext.Msg.OK
  17         });
  18     };
  19
  20     var fibasic = Ext.create('Ext.form.field.File', {
  21         renderTo: 'fi-basic',
  22         width: 400,
  23         hideLabel: true
  24     });
  25
  26     Ext.create('Ext.button.Button', {
  27         text: 'Get File Path',
  28         renderTo: 'fi-basic-btn',
  29         handler: function(){
  30             var v = fibasic.getValue();
  31             msg('Selected File', v && v != '' ? v : 'None');
  32         }
  33     });
  34
  35     Ext.create('Ext.form.field.File', {
  36         renderTo: 'fi-button',
  37         buttonOnly: true,
  38         hideLabel: true,
  39         listeners: {
  40             'change': function(fb, v){
  41                 var el = Ext.get('fi-button-msg');
  42                 el.update('<b>Selected:</b> '+v);
  43                 if(!el.isVisible()){
  44                     el.slideIn('t', {
  45                         duration: 200,
  46                         easing: 'easeIn',
  47                         listeners: {
  48                             afteranimate: function() {
  49                                 el.highlight();
  50                                 el.setWidth(null);
  51                             }
  52                         }
  53                     });
  54                 }else{
  55                     el.highlight();
  56                 }
  57             }
  58         }
  59     });
  60
  61     Ext.create('Ext.form.Panel', {
  62         renderTo: 'fi-form',
  63         width: 500,
  64         frame: true,
  65         title: 'File Upload Form',
  66         bodyPadding: '10 10 0',
  67
  68         defaults: {
  69             anchor: '100%',
  70             allowBlank: false,
  71             msgTarget: 'side',
  72             labelWidth: 50
  73         },
  74
  75         items: [{
  76             xtype: 'textfield',
  77             fieldLabel: 'Name'
  78         },{
  79             xtype: 'filefield',
  80             id: 'form-file',
  81             emptyText: 'Select an image',
  82             fieldLabel: 'Photo',
  83             name: 'photo-path',
  84             buttonText: '',
  85             buttonConfig: {
  86                 iconCls: 'upload-icon'
  87             }
  88         }],
  89
  90         buttons: [{
  91             text: 'Save',
  92             handler: function(){
  93                 var form = this.up('form').getForm();
  94                 if(form.isValid()){
  95                     form.submit({
  96                         url: 'file-upload.php',
  97                         waitMsg: 'Uploading your photo...',
  98                         success: function(fp, o) {
  99                             msg('Success', 'Processed file "' + o.result.file + '" on the server');
 100                         }
 101                     });
 102                 }
 103             }
 104         },{
 105             text: 'Reset',
 106             handler: function() {
 107                 this.up('form').getForm().reset();
 108             }
 109         }]
 110     });
 111
 112 });