Drag&Drop File Uploads for Elgg

Drag&Drop File Uploads for Elgg

Features

• Cross-browser support for drag&drop file uploads
• Easy to integrate into existing forms

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.

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;
		}
	}
}

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

Requirements

• For icons to display as expected, install a plugin that provides FontAwesome support, or add FontAwesome to your theme

Acknowledgements / Credits

• Dropzone.js is a really cool library by Matias Meno http://www.dropzonejs.com/