Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / examples / form / file-upload.js
1 /*!
2  * Ext JS Library 3.0.0
3  * Copyright(c) 2006-2009 Ext JS, LLC
4  * licensing@extjs.com
5  * http://www.extjs.com/license
6  */
7
8 Ext.onReady(function(){
9
10     Ext.QuickTips.init();
11
12     var msg = function(title, msg){
13         Ext.Msg.show({
14             title: title,
15             msg: msg,
16             minWidth: 200,
17             modal: true,
18             icon: Ext.Msg.INFO,
19             buttons: Ext.Msg.OK
20         });
21     };
22
23     var fibasic = new Ext.ux.form.FileUploadField({
24         renderTo: 'fi-basic',
25         width: 400
26     });
27
28     new Ext.Button({
29         text: 'Get File Path',
30         renderTo: 'fi-basic-btn',
31         handler: function(){
32             var v = fibasic.getValue();
33             msg('Selected File', v && v != '' ? v : 'None');
34         }
35     });
36
37     var fbutton = new Ext.ux.form.FileUploadField({
38         renderTo: 'fi-button',
39         buttonOnly: true,
40         listeners: {
41             'fileselected': function(fb, v){
42                 var el = Ext.fly('fi-button-msg');
43                 el.update('<b>Selected:</b> '+v);
44                 if(!el.isVisible()){
45                     el.slideIn('t', {
46                         duration: .2,
47                         easing: 'easeIn',
48                         callback: function(){
49                             el.highlight();
50                         }
51                     });
52                 }else{
53                     el.highlight();
54                 }
55             }
56         }
57     });
58
59     var fp = new Ext.FormPanel({
60         renderTo: 'fi-form',
61         fileUpload: true,
62         width: 500,
63         frame: true,
64         title: 'File Upload Form',
65         autoHeight: true,
66         bodyStyle: 'padding: 10px 10px 0 10px;',
67         labelWidth: 50,
68         defaults: {
69             anchor: '95%',
70             allowBlank: false,
71             msgTarget: 'side'
72         },
73         items: [{
74             xtype: 'textfield',
75             fieldLabel: 'Name'
76         },{
77             xtype: 'fileuploadfield',
78             id: 'form-file',
79             emptyText: 'Select an image',
80             fieldLabel: 'Photo',
81             name: 'photo-path',
82             buttonText: '',
83             buttonCfg: {
84                 iconCls: 'upload-icon'
85             }
86         }],
87         buttons: [{
88             text: 'Save',
89             handler: function(){
90                 if(fp.getForm().isValid()){
91                         fp.getForm().submit({
92                             url: 'file-upload.php',
93                             waitMsg: 'Uploading your photo...',
94                             success: function(fp, o){
95                                 msg('Success', 'Processed file "'+o.result.file+'" on the server');
96                             }
97                         });
98                 }
99             }
100         },{
101             text: 'Reset',
102             handler: function(){
103                 fp.getForm().reset();
104             }
105         }]
106     });
107
108 });