🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The Vue.js Base64 File Upload component allows to upload files as base64 data-uris (URL representing the file’s data as a base64 encoded string).

Featured Form

Documentation

vue-base64-file-upload

Upload files as base64 data-uris (URL representing the file's data as a base64 encoded string).

Install

npm i vue-base64-file-upload --save

Example

import Vue from 'vue'; import VueBase64FileUpload from 'vue-base64-file-upload';  const app = new Vue({   components: {     VueBase64FileUpload   },    data() {     return {       customImageMaxSize: 3 // megabytes     };   },    methods: {     onFile(file) {       console.log(file); // file object     },      onLoad(dataUri) {       console.log(dataUri); // data-uri string     },      onSizeExceeded(size) {       alert(`Image ${size}Mb size exceeds limits of ${this.customImageMaxSize}Mb!`);     }   },    template: `     <div class="container">       <h2>Upload file</h2>       <vue-base64-file-upload          class="v1"         accept="image/png,image/jpeg"         image-class="v1-image"         input-class="v1-input"         :max-size="customImageMaxSize"         @size-exceeded="onSizeExceeded"         @file="onFile"         @load="onLoad" />     </div>   ` });  app.$mount('#app');

API

Props

  • image-class - pass additional classes for preview img tag
  • input-class - pass additional classes for text input tag
  • accept - mimetypes allowed for upload, defaults to 'image/png,image/gif,image/jpeg'
  • max-size - number of megabytes allowed for upload, defaults to 10
  • disable-preview - not show preview image, defaults to false
  • default-preview - pass url or data-uri to be displayed as default image
  • file-name - pass custom filename to be displayed in text input tag
  • placeholder - pass placeholder text for text input tag

Events

  • file - fired when file object is ready
  • load - fired when data-uri is ready
  • size-exceeded - fired if uploaded image size exceeds limits

References


MIT Licensed


You May Also Like