Quick file uploader for s3, html form submission
https://quick-file-uploader.netlify.app
This project requires NodeJS (version 8 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.
$ npm -v && node -v
8.19.2
v18.10.0
- Installation
npm install quick-file-uploader
- add
upload-container
id where you want to display uploader:<div id="upload-container"></div>
- Now, import upload class and initialize:
import Upload from 'quick-file-uploader' new Upload();
you can customise file input, preview, error and success messages base on your desire.
Name | Description |
---|---|
container | element id, by default upload-container is set for uploading |
input-name | name attribute, default name is name="file-input" |
storage | s3, local , by default local is set |
mime-types | for file type validation Example: "jpg|jpeg|png|pdf|svg|mp4|3gp|mov|avi|wmv" |
preview | callback function for file preview Received args: src, type, file number |
accept | attribute Example: accept="image/*,video/*,application/pdf" |
size | size in bytes |
error | callback function whenever error occur Received args: errors, file number |
success | callback function when file successfully upload Received args: message, file number |
progress | callback function for file uploading progress Received args: progress, file number |
multiple | boolean |
path | file path for s3 upload. by default tmp/ path is set |
draggable | boolean |
onDrag | callback function |
onDrop | callback function |
- define s3 credentials before initialize
window.credentials = { AWS_ACCESS_KEY_ID: 'xxxxxxx', AWS_SECRET_ACCESS_KEY:'xxxxxxx', AWS_DEFAULT_REGION:'xxxxxxx', AWS_BUCKET:'xxxxxxx', }
- Now, import upload class and initialize:
import Upload from 'quick-file-uploader' new Upload({storage: 's3'});
- define s3 credentials before initialize
window.credentials = { UPLOAD_URL: 'xxxxxxx' }
- Now, import upload class and initialize:
import Upload from 'quick-file-uploader' new Upload({storage: 'api', headers: {'Authorization': 'TOKEN'}});