@shapla/vue-file-uploader v1.0.0

Shapla File Uploader

A component for handling drag and drop file upload functionality for Vue 3.

Table of contents

• Installation
• Usage

Installation

npm install --save @shapla/vue-file-uploader

Usage

Styles

with Sass:

import '@shapla/vue-file-uploader/src/index.scss';

with CSS:

import '@shapla/vue-file-uploader/dist/style.css';

Javascript Instantiation

import ShaplaFileUploader from '@shapla/vue-file-uploader';

export default {
  name: 'Hello',

  components: {
    ShaplaFileUploader
  },
  
  methods: {
    handleSuccess(fileObject,serverResponse){
      // Handle click event
    }
  }
}

<shapla-file-uploader @success="handleSuccess"/>

Props

Listeners

The uploader component fires the following events:

init: It fires the event when a file initiate to upload. FormData pass as parameter.

before:send: It fires the event before sending data to server. XMLHttpRequest pass as first parameter and FormData pass as second parameter.

progress: It fires the event when a file upload in progress. fileObject object pass as first parameter and event pass as second parameter.

success: It fires the event when a file uploaded successfully. fileObject object pass as first parameter and serverResponse pass as second parameter.

fail: It fires the event when a file uploaded failed on server. fileObject object pass as first parameter and serverResponse pass as second parameter.

error: It fires the event when a file uploaded failed. fileObject object pass as first parameter.

<!-- template -->
<shapla-file-uploader 
    @before:send="handleBeforeSendEvent"
    @success="handleSuccess"
/>

<!-- method -->
methods: {
    handleBeforeSendEvent(xhr,formData){
        // You can add custom header to xhr
        xhr.setRequestHeader('Authorization', 'authorization code goes here');
    },
    handleSuccess(fileObject,serverResponse){
        // Handle click event
    }
}