Drag&Drop File Uploads for Elgg
- Cross-browser support for drag&drop file uploads
- Fallback to a normal file input
- Easy to integrate into existing plugins
- Master branch is compatible with Elgg 1.9
- Versions 3.0+ are for Elgg 1.9; anything under is for previous versions of Elgg
-
Dropzone.js is a really cool library by Matias Meno http://www.dropzonejs.com/
-
As always, best in kind FontAwesome http://fontawesome.io/
- 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
'subtype' => $subtype, // subtype of the files to be created
));See the view and the JS file 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 UploadHandler class included with this plugin:
namespace hypeJunction\Filestore;
$upload_guids = get_input('upload_guids', array()):
$handler = new UploadHandler;
$files = $handler->makeFiles('upload_guids', array
'subtype' => 'file',
'container_guid' => get_input('container_guid'),
'access_id' => ACCESS_PRIVATE
));
foreach ($files as $file) {
$upload_guids[] = $file->guid;
}