hypejunction / hypedropzone
Drag-n-drop file uploads for Elgg
Installs: 445
Dependents: 1
Suggesters: 0
Security: 0
Stars: 1
Watchers: 1
Forks: 1
Type:elgg-plugin
Requires
- php: >=5.5
- composer/installers: ~1.0
- npm-asset/dropzone: <=5.4.0 || >5.5.0
README
Drag&Drop File Uploads for Elgg
Features
- Cross-browser support for drag&drop file uploads
- Easy to integrate into existing forms
- Supports chunked uploads of large files
Developer Notes
Adding a drag&drop file input and processing uploads
To add a drag&drop input to your form, add the following:
echo elgg_view('input/dropzone', array( 'name' => 'upload_guids', 'accept' => "image/*", 'max' => 25, 'multiple' => true, 'container_guid' => $container_guid, // optional file container 'subtype' => $subtype, // subtype of the file entities to be created // see the view for more options ));
In your action, you can retrieve uploaded files with get_input('upload_guids');
You also need to implement a fallback solution for when the browser does not support
drag and drop. Check hypeJunction\DropzoneService
for an example.
Initializing and resetting dropzone
You can instantiate and clear dropzone by triggering jQuery events on the containing form:
$('.elgg-form').trigger('initialize'); // will instantiate dropzone inputs contained within the form $('.elgg-form').trigger('reset'); // will clear previews and hidden guid inputs
Acknowledgements / Credits
- Dropzone.js is a really cool library by Matias Meno http://www.dropzonejs.com/