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 bees 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:

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 bees 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:

• javascript
• file-upload
• image-uploading
• dropzone.js

• What object do you get when you log the file? Make sure you're accessing the dataURL field properly – Vincent Nguyen Commented May 15, 2018 at 13:08
• The object is called "File" and it has dataURL as property @VincentNguyen – Petar Vasilev Commented May 15, 2018 at 13:49
• Can you post a screenshot of the file object logged to the console – Vincent Nguyen Commented May 15, 2018 at 13:53
• 1 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: stackoverflow./questions/25927381/… – Vincent Nguyen Commented May 15, 2018 at 14:37
• 1 @VincentNguyen you are right, also stated in the documentation dropzonejs./#event-thumbnail – wallek876 Commented May 15, 2018 at 16:31

1 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);
});