ExtJS 4 has a very handy file component which can be used to upload files to server. Lets see today how to use ExtJS file component to upload file on server. I am using PHP to upload file but you can use Java, Ruby or C#.
First, create a Ext.form.Panel with file component. Add a Upload button and a button click handler. This handler will validate and submit form to upload.php file.
|
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
|
Ext.onReady(function () {
Ext.widget(‘form’, {
title: ‘Upload Demo’,
width: 400,
bodyPadding: 10,
items: [{
xtype: ‘filefield’,
name: ‘file’,
fieldLabel: ‘File’,
labelWidth: 50,
anchor: ‘100%’,
buttonText: ‘Select File…’
}],
buttons: [{
text: ‘Upload’,
handler: function () {
var form = this.up(‘form’).getForm();
if (form.isValid()) {
form.submit({
url: ‘/extjs-tutorials/upload.php’,
waitMsg: ‘Uploading your file…’,
success: function (f, a) {
var result = a.result, data = result.data,
name = data.name, size = data.size,
message = Ext.String.format(‘Message: {0}
‘ + ‘FileName: {1}
‘ + ‘FileSize: {2}’,
result.msg, name, size);
Ext.Msg.alert(‘Success’, message);
},
failure: function (f, a) {
Ext.Msg.alert(‘Failure’, a.result.msg);
}
});
}
}
}],
renderTo: ‘output’
});
});
|
Upload.php file…
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
if ($_FILES[“file”][“error”] > 0)
{
$error = $_FILES[“file”][“error”];
$response = array(‘success’ => false, ‘msg’ => $error);
echo json_encode($response);
}
else
{
$file_name = $_FILES[“file”][“name”];
$file_type = $_FILES[“file”][“type”];
$file_size = round($_FILES[“file”][“size”] / 1024, 2) . ” Kilo Bytes”;
$response = array(‘success’ => true,
‘data’ => array(‘name’ => $file_name, ‘size’ => $file_size),
‘msg’ => ‘File Uploaded successfully’
);
echo json_encode($response);
}
?>
|
Output will look similar to as follows…
After successfully upload of file..
Download Source (1.95 Kb without ExtJS 4 Library)
Source techzoo.org
