vue-file-tray
Part of the M2 UI suite.
Component to process, upload and interact with files.
This component is used to process files. Most common use case is of course uploading files to server, but file-tray
does not do any uploading on it's own. Instead, it stores the files data in accessible files
property, so you can process them however you like.
Front end users can add files to file-tray
by dropping them over it, or using standard browser dialog.
file-tray
can take care of validation, will generate data for thumbnails, or for crunched version of images. How to further upload or process the files is up to the you.
file-tray
is a single element component – it's just a plain <div>
– this means that you can style it whatever you like. it also has a default slot, so you can have content in it. This makes file-tray
a very flexible component. Remember to add some styling when you render it, otherwise it will not be visible.
props
property | type | default | comment |
---|---|---|---|
maxFileSize |
Number | 10 |
Max file size in MB. |
maxFiles |
Number | 10 |
Max number of files you can add. |
accepted |
Array | ['image/*'] |
Accepted mime types. |
dragAdd |
Boolean | true |
Allow for adding files by drag and drop. |
clickAdd |
Boolean | true |
Open file dialog on click |
thumbs |
Boolean | true |
Should genereate thumbnails |
thumbSizes |
Array | [300,300] |
[width, height] in px |
processImages |
Boolean | false |
Should generate processed images |
maxEdge |
Number | 1200 |
Processed images largest dimenssion (px) |
quality |
Number | 0.92 |
JPEG processing quality 0-1 |
data
property | comment |
---|---|
files |
Array of files in the file-tray. Also contains thumb Blob, thumb url, processed Blob and processed url. |
over |
Boolean – whether files are dragged over. |
methods
method | args | comment |
---|---|---|
openFinder() |
— | Open file dialog. |
events
name | payload | comment |
---|---|---|
error:accepted |
Rejected mime type. | |
error:maxFileSize |
File too large. | |
error:maxFiles |
Too many files. | |
file:added |
File added. Payload is file ID. | |
files:changed |
Any changes to files property |