DropzoneJS dataURL is undefined

Question

I am making an upload script but I am stuck on getting the dataURL from "file" on the "addedfile" event, here is my code:

$(function() {

    var dropzone = new Dropzone('#avatar', {
        url: '/uploads/avatar',
        clickable: '.upload',
        maxFilesize: 5,
        maxFiles: 1,
        previewsContainer: false,
        headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    dropzone.on('addedfile', function(file) {
        window.test = file;
        document.getElementById('avatar').setAttribute('src', file.dataURL);
        $('#loader').show();
    });

    dropzone.on('success', function(file, result) {
        $('#avatar_url').val(result.url);
        $('#loader').hide();
    });
});

When the following line of the script gets executed:

document.getElementById('avatar').setAttribute('src', file.dataURL);

the src attribute of the image becomes undefined, if I console log file.dataURL it's also undefined but console logging just "file" logs the object correctly; however when I go to the browser console and do this:

console.log(test.dataURL);

it correctly outputs the data url and I can successfully use it.

Here is a screenshot of the "file" logged to the console:

Martelli

What object do you get when you log the file? Make sure you're accessing the dataURL field properly – Quarry

The object is called "File" and it has dataURL as property @VincentNguyen – Martelli

Can you post a screenshot of the file object logged to the console – Quarry

I've added a screenshot @VincentNguyen – Martelli

Is addedfile an asynchronous function? – Quarry

You mean this kind of function: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… if yes then no – Martelli

I am not familiar with dropzoneJS, but it seems that addedfile is asynchronous (I thought so because the screenshot shows a http request). So you may be trying to access the dataUrl before it is available. See if the solution here is of any help: #25927881 – Quarry

I haven't tried it but I think it will work @VincentNguyen thanks – Martelli

@VincentNguyen you are right, also stated in the documentation dropzonejs.com/#event-thumbnail – Stefaniestefano

Awesome, should work for him then – Quarry

Answer 1

The thumbnail is generated asynchronously, meaning the dataURL has not yet been generated when the addedfile event is emitted. There is a thumbnail event which is emitted when the thumbnail has been generated, passing the dataURL value as the second parameter.

You could do:

dropzone.on('thumbnail', function(file, dataURL) {
    document.getElementById('avatar').setAttribute('src', dataURL);
});

Fixity