Submitting Dropzone.js With Base64 Encoding File

I am trying to base64 encode file from a dropzone.js and send it to a handler page using PJAX. However I have an issue with base64_data being empty in a POST request. $(document).r

Solution 1:

It was an issue with deferred handleReaderLoad being executed after the pjax request is sent. Working example:

$(document).ready(function(){
    Dropzone.autoDiscover = false;
    $("#file-form").dropzone({
        paramName: 'file',
        clickable: true,
        maxFilesize: 1,
        uploadMultiple: false,
        autoProcessQueue: false,
        accept: function(file, done){
            reader = new FileReader();
            reader.onload = handleReaderLoad;
            reader.readAsDataURL(file);
            function handleReaderLoad(evt) {
                document.getElementById("id_base64_data")
                    .setAttribute('value', evt.target.result);
                document.getElementById("id_base64_name")
                    .setAttribute('value', file.name);
                document.getElementById("id_base64_content_type")
                    .setAttribute('value', file.type);
                form = $('#file-form');
                $.pjax( {
                    method: "POST",
                    container: "#pjax-container", 
                    timeout: 2000,
                    url: "/upload/",
                    data: form.serialize(),
                });
            }
            done();
        },
    });
});