vr-file-upload-preview

npm i vr-file-upload-preview
View the source code on GitHub

Playground

Demo with a drop zone

download Drop your files here!

Demo with button

Example

API Reference

Attributes

acceptAcceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or MIME types.
accept="image/png, image/jpeg"
accept=".png, .jpg, .jpeg, .pdf"
multipleThe multiple attribute allows the user to specify multiple files at the same time in the file upload field.
multiple
multiple="true"
max-filesMaximum number of files.
max-files="3"
max-sizeMaximum file size, the value is specified in bytes.
max-size="5000"
previewAllows you to specify your own container for displaying file previews through a selector or a group of selectors.
preview=".custom-preview"
preview="#custom-preview"
preview=".custom-preview.custom-wrapper"
dropzoneThe dropzone attribute allows the user to drag files to the drop zone.
dropzone
dropzone="true"

Methods

uploadUploading files.

parameters: value
value: Blob | Array<Blob>
removeRemoving a file by index.

parameters: index
index: number
clearCleans up all files.

Events

changeTriggered each time file/files are selected. Delivers the array of files.

value: event.detail
{files: Array<File>}
errorTriggered each time an error occurs while selecting a file / files. Delivers file and error type.

value: event.detail
{type: "FORMAT" | "MAX_FILES" | "MAX_SIZE", file: File}