search

Patternslib / pat-upload

A pattern to create a drop area for upload of multiple files
MIT License
1 stars 2 forks source link
hacktoberfest javascript patternslib ui-components

readme

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.