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).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();
        },
    });
});

Form:

<form class="form-horizontal dropzone dz-clickable" id="file-form" action="/upload/" method="post" enctype="multipart/form-data" name="file-form">
    <input id="id_base64_data" name="base64_data" type="hidden">
    <input id="id_base64_name" name="base64_name" type="hidden">
    <input id="id_base64_content_type" name="base64_content_type" type="hidden">
    <div class="fileupload fileupload-new" data-provides="fileupload">
        <legend>Search for file</legend>
    </div>
<div class="dz-default dz-message"><span>Drop files here to upload</span></div>
</form>

Any hint?

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).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();
        },
    });
});

Form:

<form class="form-horizontal dropzone dz-clickable" id="file-form" action="/upload/" method="post" enctype="multipart/form-data" name="file-form">
    <input id="id_base64_data" name="base64_data" type="hidden">
    <input id="id_base64_name" name="base64_name" type="hidden">
    <input id="id_base64_content_type" name="base64_content_type" type="hidden">
    <div class="fileupload fileupload-new" data-provides="fileupload">
        <legend>Search for file</legend>
    </div>
<div class="dz-default dz-message"><span>Drop files here to upload</span></div>
</form>

Any hint?

• javascript
• forms
• dropzone.js

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