#pat-upload

A pattern that creates a drop area for uploading multiple files.

Based on DropzoneJS.

##demo

To view a demo of how this pattern works, clone the repository:

git clone https://github.com/Patternslib/pat-upload.git

The run the Makefile:

make

And then in your browser open: http://localhost:4001

Form protection

Some systems allow to pass a authentication token to protect against CSRF attacks. You can do this with pat-upload by adding a URL parameter, even if the upload happens in a POST request. This is a valid practice, see: https://stackoverflow.com/a/1592446/1337474

For example, for a plone.protect style token, do:

  <fieldset class="pat-upload"
            data-pat-upload="url: https://example.com/upload?_authenticator=TOKEN"
  >
  </fieldset>

Documentation

Property	Value	Default	Type	Description
ajax-upload	true, false	true	boolean	For letting the widget upload the files via ajax. If false the form will act like a normal form.
post-upload	true, false	true	boolean	Condition value for the file preview in div element to fadeout after file upload is completed.
base-url	url string	null	string	To be used in conjunction with relative-path to.
class-name	class name	upload	string	Value for class attribute in the form element.
clickable	true, false	false	boolean	If you can click on container to also upload.
current-path	path string	null	string	Current path related items is starting with.
label	string	Drop files here…	string	Label text to show on the upload zone.
name	name attr	file	string	Value for name attribute in the file input element.
previews-container		.previews	selector	JavaScript selector for file preview in div element.
trigger	trigger name	button	string	What triggers the upload. 'button' expects user to click upload button, 'auto' starts uploading automatically after the user drags something, and always hides the upload button.
url	url string	null	string	If not used with a form, this option must provide the URL to submit to.