Vue-dropzone: How Do I get file source

[hasib32]

Is there any way I can get the uploaded file source? using vdropzone-fileAdded(file) event

[rowanwins]

Hi @hasib32 , can you confirm what you mean, do you mean the file path?

[hasib32]

I did like this:

 fileUploaded(file) {
            console.log(file);
        }

I need to get the Binary String. That way I can post that string to my backend api. Before I was using
Javscript https://developer.mozilla.org/en-US/docs/Web/API/FileReader class to get that.

[hasib32]

Basically I need the raw binary data. If you inspect uploaded image using chrome dev tool you can see it has "src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM....." something like that. I need to access that.

[rowanwins]

So yep you can do something like

````

methods: {
  'success': function (file) {
    var response = JSON.parse(file.xhr.response)
    console.log(response.files.file)
  },

````
Hopefully that get you going in the right direction

Good luck

[hasib32]

Hi @rowanwins Thanks for your reply. It's working. But if I have :autoProcessQueue="false" then the method doesn't get fired. I also tried with vdropzone-fileAdded event. It doesn't get fired either. I can't auto upload the file. I need to send some meta data with it to my backend api.

[rowanwins]

Hi @hasib32

Perhaps try hooking into the sending event
````
v-on:vdropzone-sending="sending"

methods: {
  'sending': function (file, xhr, formData) {
    var response = JSON.parse(xhr.response)
    console.log(response.files.file)
  },

````

[hasib32]

Sorry no Luck. Method doesn't get trigger if I have :autoProcessQueue="false"

[hasib32]

I am able to do this way:

<dropzone id="myVueDropzone" url="https://httpbin.org/post" v-on:vdropzone-fileAdded="fileAdded" :autoProcessQueue="false"></dropzone>

       fileAdded(file) {
            const reader = new FileReader();

            reader.onload = function(e) {
                // file source
                console.log(e.target.result)
            }.bind(this)

            reader.readAsDataURL(file);
        }

[rowanwins]

awesome, glad you got it sorted!