Skip to content

Conversation

pamekar
Copy link

@pamekar pamekar commented Apr 23, 2019

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 pamekar mentioned this pull request Apr 23, 2019
@fd6130
Copy link

fd6130 commented Sep 15, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants