Drag&Drop File Uploads for Elgg
- Cross-browser support for drag&drop file uploads
- Easy to integrate into existing forms
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.
You can use the hypeApps()->uploader:
$upload_guids = get_input('upload_guids', array()):
$uploads = hypeApps()->uploader->handle('upload_guids', array
'subtype' => 'file',
'container_guid' => get_input('container_guid'),
'access_id' => ACCESS_PRIVATE
));
if (!empty($uploads)) {
foreach ($uploads as $upload) {
$entity = $upload->file;
if ($entity instanceof \ElggEntity) {
$upload_guids[] = $entity->guid;
}
}
}
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
- For icons to display as expected, install a plugin that provides FontAwesome support, or add FontAwesome to your theme
- Dropzone.js is a really cool library by Matias Meno http://www.dropzonejs.com/