$_FILES returns empty when using HTML Form and Dropzone JS

Question

I have spent way too much time on this and browsed various questions/answers here on stackoverflow.

I am using dropzone.js to add a basic drag and drop upload feature to our HTML/PHP form. The drag and drop is working great however when the form is submitted or a file is uploaded the $_FILES returns empty and I cant figure it out.

I checked a tutorial and no luck, also checked some Q & A's from stackoverflow before posting here but nothing has helped.

Here is the form in its simplest form:

<form action="<? echo BASE_URL; ?>/process-uploads.php" method="POST" class="form-signin" role="form" enctype="multipart/form-data">

        <div class="upload_container dropzone">Drag & drop file here or

                <div class="fallback">
                    <input name="ad" type="file" />
                </div>
            </div><!--fileUpload btn btn-primary-->

        <div class="dropzone-previews"></div>

                <input class="btn btn-lg btn-primary btn-block btn-forward" style="background:#00a85a;" type="submit" name="submit" value="Next Step" />
            </form>

The JS is:

<script type="text/javascript">

var myDropzone = new Dropzone(".dropzone", { 
    url: "<? echo BASE_URL; ?>/process-uploads.php/",
    paramName: "ad",
    addRemoveLinks: true,
    //maxFiles: 1,
    autoProcessQueue: false,
    //uploadMultiple: false,
    acceptedFiles: "image/png",
    dictInvalidFileType: "This file type is not supported.",

});
</script>

And process-upload.php just checks to see if anything was sent, but returning empty:

<?php

if (!empty($_FILES)) {

    echo 'We have a file';

    if($_FILES['ad']) {
        echo 'We grabbed the ad<br />';

        echo '<pre>';
        var_dump($_FILES);
        echo '</pre>';
    }
}
?>

Any help would be greatly appreciated. For reference I already checked enyo's tutorial for combining a form with dropzone and php

as per http://www.dropzonejs.com/ you should give 'dropzone' class to your
tag. let me know if it solves your issue — K D, Jan 09 '15 at 17:55

score 4 · Answer 1 · answered Jan 12 '16 at 23:26

I had the same issue today getting no response, no error whatsoever when uploading a file and search through all SO questions, i read your code couple of time but no solution. i later found out that post_max_size = 8M is set too small, large files cannot be uploaded. Make sure you set post_max_size large enough, so kindly create/add this to your .htaccess file, i needed to upload a file of 2gb

php_value upload_max_filesize    2047M
php_value post_max_size          2047M
php_value max_execution_time     10800

score 0 · Answer 2 · answered Dec 09 '14 at 13:37

0

You need to add name to your field:

<input type="file" name="ad" />

answered Dec 09 '14 at 13:37

vaso123

12,347
4
34
64

Thanks, I had that in there originally but after troubleshooting I removed it and put it back, that wasnt the issue though. – Derek Dec 09 '14 at 13:43

score -2 · Answer 3 · answered Jan 09 '15 at 17:58

I think you took reference of this article... Dropzone Demo

Can you please add class 'dropzone' to your form like following and try

<form action="<? echo BASE_URL; ?>/process-uploads.php" method="POST" class="dropzone form-signin" role="form" enctype="multipart/form-data">

$_FILES returns empty when using HTML Form and Dropzone JS

3 Answers3