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