vue-file64

Vue-File64

A simple way to convert files to base64 strings, with multiple and extension based filter.

Installation

npm i vue-file64

Importing Globally

You can import this package as usual, here as an example the package is imported globally.

import FileDialog from 'vue-file64; Vue.component('file-dialog-64', FileDialog);

Usage

<file-dialog-64
  :isInvalid="form.errors.errors.hasOwnProperty('image')"
  :accept="''"
  @output="
    (file) => {
      this.form.image = file;
    }
  "
  :label="'Upload your files'"
>
<p slot="errorMessage" class="invalid-feedback d-block"> Image is required </p>
</file-dialog-64>

Props

Prop Name	Type	Description
label	String	Used as common html label
placeholder	String	Can be used to replace the default placeholder "Choose files", however this will be overridden when files are selected
accept	String	Same as HTML accept, can be used to filter extensions, example :accept="'.jpg, .png'"
multiple	Boolean	Enable ability to select multiple files
isInvalid	Boolean	Activates the invalid class if set to true, highlights in red.

Events

Event	Description
output	Returns the base64 strings of the uploaded files.
filecount	Returns the number of uploaded

Slots

Slot Name	Description
errorMessage	Can be used to set your own error message.
onComplete	Make use to show something when the upload is complete. Such as previewing the files.

Feel free to contribute to this project, thanks