Clone the repository somewhere on your system and add the path with the prefix to Ext.Loader
:
Ext.Loader.setPath({
'Ext.ux.upload' : '/my/path/to/extjs-upload-widget/lib/upload'
});
In the most simple case, you can just open the dialog and pass the uploadUrl
paramter:
var dialog = Ext.create('Ext.ux.upload.Dialog', {
dialogTitle: 'My Upload Widget',
uploadUrl: 'upload.php'
});
dialog.show();
Ext.ux.upload.Dialog
is just a simple wrapper window. The core functionality is implemented in the Ext.uz.upload.Panel
object, so you can implement your own dialog and pass the panel:
var myDialog = Ext.create('MyDialog', {
items: [
Ext.create('Ext.ux.upload.Panel', {
uploadUrl: 'upload.php'
});
]
});
The intention behind the uploaders implementation is to have the upload process decoupled from the UI as much as possible. This allows us to create alternative uploader implementations to serve our use case and at the same time, we don't need to touch the UI.
Currently, these uploaders are implemented:
Ext.data.Connection
object is used with a small tweak to allow progress reporting.Each uploader requires different processing at the backend side. Check the public/upload.php
file for the ExtJsUploader and the public/upload_multipart.php
for the FormDataUploader.
The default uploader is the ExtJsUploader. If you want to use an alternative uploader, you need to pass the uploader class name to the upload panel:
var panel = Ext.create('Ext.ux.upload.Panel', {
uploader: 'Ext.ux.upload.uploader.FormDataUploader',
uploaderOptions: {
url: 'upload_multipart.php',
timeout: 120*1000
}
});
Or you can pass the uploader instance:
var panel = Ext.create('Ext.ux.upload.Panel', {
uploader: Ext.create('Ext.ux.upload.uploader.FormDataUploader', {
url: 'upload_multipart.php',
timeout: 120*1000
});
});
Clone the repository and make the public
directory accessible through your web server. Open the public/_config.php
file and set the _uploaddir option to point to a directory the web server can write to. If you just want to test the upload process and you don't really want to save the uploaded files, you can set the fake option to true and no files will be written to the disk.
The example index.html
expects to find the Ext JS instance in the public/extjs
directory. You can create a link to the instance or copy it there.