https://github.com/patternslib/pat-upload
A pattern to create a drop area for upload of multiple files
https://github.com/patternslib/pat-upload
hacktoberfest javascript patternslib ui-components
Last synced: 11 months ago
JSON representation
A pattern to create a drop area for upload of multiple files
- Host: GitHub
- URL: https://github.com/patternslib/pat-upload
- Owner: Patternslib
- License: mit
- Created: 2014-10-15T13:21:35.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-04-07T21:07:12.000Z (about 3 years ago)
- Last Synced: 2024-11-18T01:41:17.137Z (over 1 year ago)
- Topics: hacktoberfest, javascript, patternslib, ui-components
- Language: JavaScript
- Homepage:
- Size: 2.78 MB
- Stars: 1
- Watchers: 14
- Forks: 2
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
README
#pat-upload
A pattern that creates a drop area for uploading multiple files.
Based on [DropzoneJS](https://www.dropzonejs.com/).
##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:
## 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.