Vue-dropzone: how do i pass a auth token when uploading a image

[kyoukhana]

I am trying with this

 <dropzone id="fileDropZone" url="api/track/upload"
                                  v-bind:dropzone-options="options"
                                  v-bind:use-custom-dropzone-options="true">
                        </dropzone>

        data: function () {
            return {
                options: {headers: {Authorization: 'bearer:'+this.$auth.token(),trackCategory:1}},
            }
        }

[rowanwins]

Didn't we tackle this in #11 @kyoukhana ?

[moeen-basra]

I just submitted a pull request after merging this we can pass the headers object as prop.

<dropzone id="fileDropZone" url="api/track/upload" v-bind:headers="headers" />

computed: { headers() { return { Authorization: 'bearer: '+ token } } }

[rowanwins]

I've now added support for this headers option based on @moeen-basra pull request #26

It is available from npm as version 2.1.4

[MariusWiik]

I cannot get this to work. Is it possible to bind headers and still use a custom options object? I need to add the headers later than the rest of the options (or have the possibility to add the options object at a later stage, in for example computed() ).
Hesitant to open a new issue if its just me using it wrong.
Any ideas?

 <dropzone ref="uploadZone" id="myVueDropzone" 
              url="/api/v1/room/xyzxyz/upload" 
              v-on:vdropzone-success="showSuccess"
              v-on:vdropzone-error="handleError"
              v-bind:headers="headers"
              acceptedFileTypes="image/*"
              useCustomDropzoneOptions
              :dropzoneOptions="dzoptions"
              >

    </dropzone>
data() {
        return {

            dzoptions: {
                clickable: true,
                uploadMultiple: false,
                addRemoveLinks: true,
                autoProcessQueue: false,         
                dictRemoveFile: "Delete",
                previewTemplate: '<div> Long template here </div>',

            }
        }
    },

 computed: {
        headers(){
            return {
                Authorization: "TokenHere" 
            }
        }
    },

[rowanwins]

Gday @MariusWiik

The custom options settings override everything else so if you want to use custom options you need to pass through the headers into your dzoptions object eg
dzoptions: { clickable: true, uploadMultiple: false, addRemoveLinks: true, autoProcessQueue: false, dictRemoveFile: "Delete", previewTemplate: '<div> Long template here </div>', headers: this.headers }

Hope that helps

[MariusWiik]

Thanks for the quick reply @rowanwins. I appreciate it.

I figured (and feared) that this was the case. The problem is that the data I need in the headers aren't ready early enough for me to add it in the dzoptions. Is it possible to add the dzoptions at a later stage? I do it in data() now (as shown above).

The data I need is in a store, and returns null, so this wont work:

dzoptions: {
                clickable: true,
                uploadMultiple: false,
                addRemoveLinks: true,
                autoProcessQueue: false,         
                dictRemoveFile: "Delete",
                previewTemplate: '<div> Long template here </div>',
                headers: this.userData.jwt
            }

If I log this.userData.jwt in computed() the value shows correctly.

Thanks

[rowanwins]

hmmm @MariusWiik i see your problem.

I've just added a setOption method which you can call after the component has been initialised.

So you should be able to do something like once you have your token.
this.$refs.myUniqueID.setOption('headers', {auth: 123})

I've updated npm to v2.2.2 so perhaps give that a go and see if you can get things working

[MariusWiik]

This worked like a charm. Good job! I'm sure others will also appreciate this change :) Thanks!