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 |