examples/form/file-upload.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     'Ext.form.field.File',
  17     'Ext.form.Panel',
  18     'Ext.window.MessageBox'
  19 ]);
  20
  21 Ext.onReady(function(){
  22
  23     var msg = function(title, msg) {
  24         Ext.Msg.show({
  25             title: title,
  26             msg: msg,
  27             minWidth: 200,
  28             modal: true,
  29             icon: Ext.Msg.INFO,
  30             buttons: Ext.Msg.OK
  31         });
  32     };
  33
  34     var fibasic = Ext.create('Ext.form.field.File', {
  35         renderTo: 'fi-basic',
  36         width: 400,
  37         hideLabel: true
  38     });
  39
  40     Ext.create('Ext.button.Button', {
  41         text: 'Get File Path',
  42         renderTo: 'fi-basic-btn',
  43         handler: function(){
  44             var v = fibasic.getValue();
  45             msg('Selected File', v && v != '' ? v : 'None');
  46         }
  47     });
  48
  49     Ext.create('Ext.form.field.File', {
  50         renderTo: 'fi-button',
  51         buttonOnly: true,
  52         hideLabel: true,
  53         listeners: {
  54             'change': function(fb, v){
  55                 var el = Ext.get('fi-button-msg');
  56                 el.update('<b>Selected:</b> '+v);
  57                 if(!el.isVisible()){
  58                     el.slideIn('t', {
  59                         duration: 200,
  60                         easing: 'easeIn',
  61                         listeners: {
  62                             afteranimate: function() {
  63                                 el.highlight();
  64                                 el.setWidth(null);
  65                             }
  66                         }
  67                     });
  68                 }else{
  69                     el.highlight();
  70                 }
  71             }
  72         }
  73     });
  74
  75     Ext.create('Ext.form.Panel', {
  76         renderTo: 'fi-form',
  77         width: 500,
  78         frame: true,
  79         title: 'File Upload Form',
  80         bodyPadding: '10 10 0',
  81
  82         defaults: {
  83             anchor: '100%',
  84             allowBlank: false,
  85             msgTarget: 'side',
  86             labelWidth: 50
  87         },
  88
  89         items: [{
  90             xtype: 'textfield',
  91             fieldLabel: 'Name'
  92         },{
  93             xtype: 'filefield',
  94             id: 'form-file',
  95             emptyText: 'Select an image',
  96             fieldLabel: 'Photo',
  97             name: 'photo-path',
  98             buttonText: '',
  99             buttonConfig: {
 100                 iconCls: 'upload-icon'
 101             }
 102         }],
 103
 104         buttons: [{
 105             text: 'Save',
 106             handler: function(){
 107                 var form = this.up('form').getForm();
 108                 if(form.isValid()){
 109                     form.submit({
 110                         url: 'file-upload.php',
 111                         waitMsg: 'Uploading your photo...',
 112                         success: function(fp, o) {
 113                             msg('Success', 'Processed file "' + o.result.file + '" on the server');
 114                         }
 115                     });
 116                 }
 117             }
 118         },{
 119             text: 'Reset',
 120             handler: function() {
 121                 this.up('form').getForm().reset();
 122             }
 123         }]
 124     });
 125
 126 });