Dropzone image upload options not working :(

Asked 3/8, 2013 at 11:2 Answered 11/12, 2016 at 4:52

Solved php javascript jquery dropzone.js

Im trying to build a drag and drop image upload but dropzone options dont work and I dont know if im doing it the right way.

I would love to set up the following options:

Upload only one file (multiupload parameter)
Possibility to remove that file (addremovelink?)
Max file size of 2mb (maxfilesize)

Can you help me please?

here is the code:

    <html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="dropzone.js" type="text/javascript"></script>
    <link href="css/basic.css" rel="stylesheet" type="text/css" />
    <link href="css/dropzone.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#uploadme").dropzone({
                paramName: 'photos',
                url: 'upload.php',
                dictDefaultMessage: "Drag your images",
                clickable: true,
                enqueueForUpload: true,
                maxFilesize: 1,
                uploadMultiple: false,
                addRemoveLinks: true
            });

        });
    </script>
    <form action="upload.php" class="dropzone">
        <div id="uploadme" class="fallback">
            <input name="file" type="file" multiple />
        </div>
    </form>
</body>
</html>

Thank you guys, you rock! :)

Hankow answered 3/8, 2013 at 11:2 Comment(1)

Hi. What is the problem you are having? – Quadrillion 20/8, 2013 at 14:14

Just add before Jquery call

Dropzone.autoDiscover = false;

and remove the action from the <form>. That will disable the auto discover function so you can specify all the options for your form.

This is what your code should look like:

<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="dropzone.js" type="text/javascript"></script>
    <link href="css/basic.css" rel="stylesheet" type="text/css" />
    <link href="css/dropzone.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function(){
            Dropzone.autoDiscover = false;
            $("#uploadme").dropzone({
                paramName: 'photos',
                url: 'upload.php',
                dictDefaultMessage: "Drag your images",
                clickable: true,
                enqueueForUpload: true,
                maxFilesize: 1,
                uploadMultiple: false,
                addRemoveLinks: true
            });

        });
    </script>
    <form action="" class="dropzone">
        <div id="uploadme" class="fallback">
            <input name="file" type="file" multiple />
        </div>
    </form>
</body>
</html>

Cleft answered 14/9, 2013 at 7:38 Comment(2)

The autoDiscover statement ought to be outside of the DOM ready event. Other than that, this code does not make drag & drop work for me. The dropzone also refuses to generate any thumbnails. – Mesarch 25/9, 2019 at 15:45

Same here. The options have no effect, and there's a button for adding file instead of drag'n drop. – Incredulous 28/4, 2021 at 18:42

In my situation I had to use the vanilla JS Dropzone Class instantiation and put the Dropzone.autoDiscover = false; outside of the $(document).ready function.

html:

<form id="image-upload" action="/upload" class="dropzone" method="post" name="file"></form>

javascript:

<script>
Dropzone.autoDiscover = false;
$(document).ready(function() {
    var myDropzone = new Dropzone('form#image-upload',{
        maxFiles:12,
        acceptedFiles: 'image/*',
        dictInvalidFileType: 'This form only accepts images.'
    });
});

Kremenchug answered 11/12, 2016 at 4:52 Comment(0)

maxFilesize: 2,
uploadMultiple: false,
addRemoveLinks: true,
maxFiles: 1,
autoProcessQueue: false

You will need to add in a button or event handler to allow for processing of the previewed file, if you let it autoProcessQueue you don't have time to decide if you want the file or not unless you add an event handler at the "process" event.

$("#uploadme").dropzone.processQueue()

Inhumanity answered 23/1, 2014 at 0:1 Comment(0)

Recommended topics

Hot tags