Vue-dropzone: Get dataURL from file (v-on:vdropzone-file-added)

[jtorfs01]

Hi,
I'm sorry if this is a stupid question but: How can I get the dataURL from the (file) in a vdropzone-file-added(file) event, or is that not possible?

I'm trying to create my own upload event to upload multiple images to Firebase storage and I would need the dataURL to upload.

Thanks in advance for the response.

[rowanwins]

Hi @jtorfs01

That should be fairly easy
<vue-dropzone ref="myVueDropzone" id="dropzone" @vdropzone-file-added="vfileAdded" > ... methods: { vfileAdded(file) { console.log(file.dataURL) } }

[jtorfs01]

Hi, thanks for the response. I wish it was that easy. :)

I can doconsole.log(file.name)

nd that gives me the name of the file but console.log(file.dataURL)or any other value always returns an error. I don't have the project on my current computer, but I will add some of the code later today and check the exact error message I get.

[jtorfs01]

My code looks like this:

<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions" v-on:vdropzone-file-added="fileAdded"></vue-dropzone>

 fileAdded: function(file) {
      console.log(file.name);
      console.log("data url: " + file.dataURL);
    }

But the file.dataURL always comes back as 'undefined'. Any idea what I could be doing wrong?

And this is what I get when I print out console.log(file) :

File(1313997) {upload: {…}, status: "added", previewElement: div.dz-preview.dz-file-preview, previewTemplate: div.dz-preview.dz-file-preview, name: "IMG_1018.jpg", …}
accepted
:
true
dataURL
:
"data:image/jpeg;base64,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AAUAAAABAAAHbAAAAAAAAAAzAAAAAQAAAAwAAAABAAALjgAAAGQAAAAEAAAAAQAAABkAAAABAAALqAAAAGQAABG5AAAJ4wAAAA8AAAABAAAAJwAAAAEAAAAiAAAAAQAAAAgAAAAZAAFCzQAAA/EAAULNAAAD8TIwMTY6MDk6MjUAAAAAAAoAAAAB/+ENO2h0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6bXdnLXJzPSJodHRwOi8vd3d3Lm1ldGFkYXRhd29ya2luZ2dyb3VwLmNvbS9zY2hlbWFzL3JlZ2lvbnMvIiB4bWxuczpzdERpbT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL0RpbWVuc2lvbnMjIiB4bWxuczpzdEFyZWE9Imh0dHA6Ly9ucy5hZG9iZS5jb20veG1wL3NUeXBlL0FyZWEjIiB4bWxuczphcHBsZS1maT0iaHR0cDovL25zLmFwcGxlLmNvbS9mYWNlaW5mby8xLjAvIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxNi0wOS0yNVQxNzozOTozNS4yMjYiIHhtcDpNb2RpZnlEYXRlPSIyMDE2LTA5LTI1VDE3OjM5OjM1IiB4bXA6Q3JlYXRvclRvb2w9IjEwLjAuMSIgcGhvdG9zaG9wOkRhdGVDcmVhdGVkPSIyMDE2LTA5LTI1VDE3OjM5OjM1LjIyNiI+IDxtd2ctcnM6UmVnaW9ucyByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+IDxtd2ctcnM6QXBwbGllZFRvRGltZW5zaW9ucyBzdERpbTpoPSIyNDQ4IiBzdERpbTp3PSIzMjY0IiBzdERpbTp1bml0PSJwaXhlbCIvPiA8bXdnLXJzOlJlZ2lvbkxpc3Q+IDxyZGY6U2VxPiA8cmRmOmxpPiA8cmRmOkRlc2NyaXB0aW9uIG13Zy1yczpUeXBlPSJGYWNlIj4gPG13Zy1yczpBcmVhIHN0QXJlYTp5PSIwLjQ1NTUwMCIgc3RBcmVhOnc9IjAuMDY4MDAwIiBzdEFyZWE6eD0iMC4xNTIwMDAiIHN0QXJlYTpoPSIwLjA5MTAwMCIgc3RBcmVhOnVuaXQ9Im5vcm1hbGl6ZWQiLz4gPG13Zy1yczpFeHRlbnNpb25zIGFwcGxlLWZpOkFuZ2xlSW5mb1lhdz0iMCIgYXBwbGUtZmk6QW5nbGVJbmZvUm9sbD0iMjcwIiBhcHBsZS1maTpDb25maWRlbmNlTGV2ZWw9Ijk5IiBhcHBsZS1maTpUaW1lc3RhbXA9IjY0ODI2NDAxMTE3MzciIGFwcGxlLWZpOkZhY2VJRD0iMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6bGk+IDwvcmRmOlNlcT4gPC9td2ctcnM6UmVnaW9uTGlzdD4gPC9td2ctcnM6UmVnaW9ucz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI…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"
height
:
3264
lastModified
:
1534420244145
lastModifiedDate
:
Thu Aug 16 2018 13:50:44 GMT+0200 (Central European Summer Time) {}
name
:
"IMG_1018.jpg"
previewElement
:
div.dz-preview.dz-image-preview
previewTemplate
:
div.dz-preview.dz-image-preview
size
:
1313997
status
:
"queued"
type
:
"image/jpeg"
upload
:
{uuid: "4cb2fc4e-12b3-4a06-ac26-68dd6456460f", progress: 0, total: 1313997, bytesSent: 0, filename: "IMG_1018.jpg", …}
webkitRelativePath
:
""
width
:
2448
__proto__
:
File

[rowanwins]

Looks like the dataURL is there (that long set of characters), it's just a matter of working out how to access it.
Do you know how to set a break point using chrome devtools rather than relying on console.log statements?

[jtorfs01]

Yes I do know how to do that, and I also tried that. Could the problem be that the 'name' attribute is in the 'header' . If you check the first line:
File(2351) {upload: Object, status: "added", previewElement: div.dz-preview.dz-file-preview, previewTemplate: div.dz-preview.dz-file-preview, name: "facebook.png", …}

the name attribute is there, but the 'dataURL' is a level below that?

File(2351) {upload: Object, status: "added", previewElement: div.dz-preview.dz-file-preview, previewTemplate: div.dz-preview.dz-file-preview, name: "facebook.png", …}
accepted:true
dataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAYAAACI7Fo9AAAACXBIWXMAAAsSAAALEgHS3X78AAAI4UlEQVR4Ae3dXYhU5xnA8ePumLqu0Rg/U2u2JiJNbZuSkBRSqiH246IsFRoSelMDhURCL2oLzU0pIeQ6Df2U0ot61RQClUgvhEoRkrSUhsa2pk1QozWmju46WbOzs3VXt5xlNJt1d3Vn1p3zzvP7wYDKgmee499z5sw7cxaMjY1lM9m2c9/HsyzbXn9snfGHgfl0MMuyvfnjwO7e4zP9vdOGXg/86SzLdth1UHh78l6nC37K0Lft3PedLMt+ZN9CcnYd2N37/OSNvir0bTv3/dpRHJK258Du3scmPoGOib8RObSFHfWWr7gSev10XeTQHnbUmx43fupev/D2th0MbWdDfoHu8hH9afsX2tJ42wseeuIlR3Nobxs66gthgPa1XejQ/sZDt6wV2tvWDjsY2p/QIQChQwBChwCEDgEIHQIQOgQgdAhA6BCA0CEAoUMAQocAhA4BCB0CEDoEIHQIQOgQgNAhAKFDAEKHAIQOAQgdAhA6BCB0CEDoEEDJTiZlG9cvzbq7Fjb9DI6+cz4bHBpp238LQqfw8pg39dxSu2Pd0jP33rWq1N1VKq1YtmjNjd7u/oHh8vCFi8OXf3/4aKVUrY2M5r8+dur86lNnql1ZIv9JCJ3CycO+b/PqygN3rx3ctH7ZylKpIw8qf/TM57ZO/s9k3aruGX/+u8+9mh16q/9Gb1ZDhE4h5HFvf3BD35Z7buvs7lq4PMuyyw/mgNBpmSWLF2a9W3oqj355Y8fNixcuy7Jspb1xYwidebd2xeLsyUc2lz+3efXSUqnDUXseCJ15kx/Bv7/js+XP3702f+17wy+m8QGhMy8e+dKdw9/62ifGSqUOgbeA0Lmh8otszz55f9+q5V1ef7eQ0Llh8qP4E1//5CIX2VpP6My5/LX4Mzvv67t70wqBF4TQmVNO1YtJ6...
height:250
lastModified:1534417876469
lastModifiedDate:Thu Aug 16 2018 13:11:16 GMT+0200 (Central European Summer Time) {}
__proto__:Object {constructor: , toString: , toDateString: , …}
name:"facebook.png"
previewElement:div.dz-preview.dz-image-preview {align: "", title: "", lang: "", …}
previewTemplate:div.dz-preview.dz-image-preview {align: "", title: "", lang: "", …}
size:2351
status:"queued"
type:"image/png"
upload:Object {uuid: "6cf72602-b499-453d-9863-8f90a8b69583", progress: 0, total: 2351, …}
webkitRelativePath:""
width:250
__proto__:File {name: <accessor>, lastModified: <accessor>, lastModifiedDate: <accessor>, …}
facebook.png

[jtorfs01]

OK, I finally figured it out. The dataURL isn't part of the file object so I don't think there is a way to access the dataURL? Or maybe it is but I have no idea how to do that.

What I did now is, I used vdropzone-thumbnail instead of vdropzone-file-added and that does have the dataURL as an attribute so for now I'm going to use that approach. Feel free to correct me if you think there is a better approach or if i'm missing something.

[rowanwins]

I'm not sure why you can access using the event that you did given that the data is there, but you've got it resolved so perhaps let's leave it at that :)

[spencercap]

great helper library, many thanks @rowanwins !

tho i'm also having issues intercepting the default url Post behavior and uploading an Audio file to firebase storage. when i console.log the file from the vdropzone-file-added event, it seems that the MP3s I'm uploading do not have this .dataURL field to use in the firebase.storage upload function. any suggestions?

File {upload: {…}, status: "added", previewElement: div.dz-preview.dz-file-preview, previewTemplate: div.dz-preview.dz-file-preview, name: "SimonSays.mp3", …}
accepted: true
lastModified: 1555812209000
lastModifiedDate: Sat Apr 20 2019 19:03:29 GMT-0700 (Pacific Daylight Time) {}
name: "SimonSays.mp3"
previewElement: div.dz-preview.dz-file-preview.dz-processing.dz-success.dz-complete
previewTemplate: div.dz-preview.dz-file-preview.dz-processing.dz-success.dz-complete
processing: true
size: 2755956
status: "success"
type: "audio/mp3"
upload: {uuid: "1b60974d-13d2-4fce-b8f5-50cd648dbcc3", progress: 100, total: 2756142, bytesSent: 2756142, filename: "SimonSays.mp3", …}
webkitRelativePath: ""
xhr: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 30000, withCredentials: false, upload: XMLHttpRequestUpload, …}
__proto__: File

[eakenbor]

I am having exactly the same issue. Console.log(file.dataURL) returns "undefined". So how is one expected to get the dataURL to be saved to database?

[vadymsem]

I am having exactly the same issue. Console.log(file.dataURL) returns "undefined". So how is one expected to get the dataURL to be saved to database?

Add a function which will called on vdropzone-file-added event which will receive vdropzone file as an argument. Then inside that function you can do the next to get dataURL:

const reader = new FileReader()
reader.readAsDataURL(file)

reader.onload = function(event) {
  //   event.target.result - is dataURL data
};

[RamananSharma]

I am having exactly the same issue. Console.log(file.dataURL) returns "undefined". So how is one expected to get the dataURL to be saved to database?

Add a function which will called on vdropzone-file-added event which will receive vdropzone file as an argument. Then inside that function you can do the next to get dataURL:

const reader = new FileReader()
reader.readAsDataURL(file)

reader.onload = function(event) {
  //   event.target.result - is dataURL data
};

I had to wait until the file is read, and pass it along with the dropzone file object for further processing. So I used the following (used onloadend event to trigger the function after file reading is completed)
addedFile() is my custom method.

```const reader = new FileReader();
let receivedFile;
reader.readAsDataURL(file);
reader.onload = function(event) {
receivedFile = event.target.result; // event.target.result contains base64 encoded image
};
reader.onloadend = () => this.addedFile(file, receivedFile)

[laszlol]

I am having exactly the same issue. Console.log(file.dataURL) returns "undefined". So how is one expected to get the dataURL to be saved to database?

Add a function which will called on vdropzone-file-added event which will receive vdropzone file as an argument. Then inside that function you can do the next to get dataURL:

const reader = new FileReader()
reader.readAsDataURL(file)

reader.onload = function(event) {
  //   event.target.result - is dataURL data
};

I had to wait until the file is read, and pass it along with the dropzone file object for further processing. So I used the following (used onloadend event to trigger the function after file reading is completed)
addedFile() is my custom method.

let receivedFile;
reader.readAsDataURL(file);
reader.onload = function(event) {
receivedFile = event.target.result; // event.target.result contains base64 encoded image
};
reader.onloadend = () => this.addedFile(file, receivedFile)

I'd like to pass the base64 format in an extra parameter but. When I use the vdropzone-file-added(file) event to get base64 format and set it to the this.base64 it is still empty inside vdropzone-sending(file, xhr, formData).

vsendingFile(file, xhr, formData) {
      console.log('send')
      formData.append('data', this.base64)
    },
    vFileAdded(file) {
      const reader = new FileReader()
      reader.onload = (event) => {
        this.base64 = event.target.result
      };
      reader.readAsDataURL(file)
    }

What am I doing wrong?

[RamananSharma]

vsendingFile(file, xhr, formData) {
      console.log('send')
      formData.append('data', this.base64)
    },
    vFileAdded(file) {
      const reader = new FileReader()
      reader.onload = (event) => {
        this.base64 = event.target.result
      };
      reader.readAsDataURL(file)
    }

What am I doing wrong?

Because the FileReader reading is asynchronous and as soon as you dropped the file into dropzone it'll fire both file-added and sending callbacks while the reading is in progress (Unless you disabled auto queue processing). I'd suggest you read the file inside vsendingFile method using the file object you receive. Even then it's better to wrap the file reading reading into a Promise and use async await so you can block until the file is read, and append to formData then proceed.

[dbipin]

Still getting the issue. While using vdropzone-thumbnail the image i get is of very low quality