v-uploader icon indicating copy to clipboard operation
v-uploader copied to clipboard

Include include extra fileParams and uploadHeaders Option

Open pamekar opened this issue 6 years ago • 1 comments

I had an issue in #9, I found a workaround, and there's a need to add form parameters (like user_id, image_title, etc) to the upload request.

Also, because of authentication issues, I kept getting a 401 - Token not provided error. because there was no way to add custom headers.

I have added fileParams and uploadHeaders options to be included by users.

Include plugin in your main.js file like this.

import Vue from 'vue';
import vUploader from 'v-uploader';

/**
 * v-uploader plugin global config
 */
const uploaderConfig = {
    uploadHeaders: {
        Authorization: 'Bearer xxxxxxxxxxxxxxx'
    },
    uploadFileUrl: 'http://xxx/upload',
    deleteFileUrl: 'http://xxx/delete',
    showMessage: (vue, message) => {
        //using v-dialogs to show message
        vue.$vDialog.alert(message, null, {messageType: 'error'});
    }
};

//install plugin with options
Vue.use(vUploader, uploaderConfig);

Then in components:

<template>
  <!-- bind event 'done' to receive file uploaded info -->
  <v-uploader :fileParams="uploadFileParams" @done="uploadDone" ></v-uploader>
</template>

export default {
    data(){
         return {
              uploadFileParams: {
                    user_id: 1, 
                    file_title: "file.jpg"
              }
         }
     },
    methods:{
        //receive uploaded files info
        //@type Array
        uploadDone(files){
            if(files && Array.isArray(files) && files.length){
                // do something...
            }
        }
    }
};

This way, you can add custom headers, and send parameters to the server during an upload.

pamekar avatar Apr 23 '19 19:04 pamekar

Is this still work for adding custom header like Bearer Token ?

fd6130 avatar Sep 15 '20 09:09 fd6130