Combine dropzone with simple form

Question

I want to insert a file uploader with DropzoneJS into my HTML form. I writed the following code based on the tutorial.

Here is my form:

<form id="createProject" class="dropzone" action="/new_project" method="post" enctype="multipart/form-data">
    <input type="hidden" name="new_project" value="1">
    <div class="panel-body">
        <div class="row egal">
            <div action="#" class="col-md-4 col-xs-12 picture dropzone-previews">
                <div class="egal-center">
                    <h5>
                        Add Picture
                    </h5>
                    <div class="upload-box btn">
                        <i class="glyphicon glyphicon-plus"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-8 col-xs-12">
                <input type="text" name="title" class="form-control" placeholder="Add a new title"/>
                <input type="text" name="web_page" class="form-control" placeholder="Type in your project's website"/>
                <textarea name="description" cols="40" rows="5" class="form-control" placeholder="Say something about your project "></textarea>
            </div>
        </div>
        <div class="row">
            <div class="input-group">
                <input name="video[]" class="form-control" type="text" placeholder="Video"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-login addNewField">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
            <div class="input-group">
                <input name="prezi[]" class="form-control" type="text" placeholder="Prezi"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-login addNewField">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-login btn-block">
            Create project
        </button>
    </div>
</form>

As you see, I have some input fields and a box which I make into a dropzone with JavaScript. I setted the things like was writed in the tutorial, but the following JavaScript not working. It's successfully add the event listeners, just the processQueue() method not working. I setted the maximal file uploads to 1 because there is only one image is allowed.

Dropzone.options.createProject={
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 1,
    maxFiles: 1,
    clickable: ".dropzone-previews",
    previewsContainer: ".dropzone-previews",
    paramName:"picture",
    init: function() {
        var myDropzone=this;
        this.element.querySelector("button[type=submit]").addEventListener("click", function(e){
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
            $(this).closest('form').ajaxFormSend(function(data){
                $('.projects-panel').prepend(Mustache.to_html(window.templates.panelProjects, data.data));
            });
        });
        this.on("sendingmultiple", function(){
        });
        this.on("successmultiple", function(files, response){
        });
        this.on("errormultiple", function(files, response){
        });
        this.on("maxfilesexceeded", function(file){
            myDropzone.removeFile(file);
            noty({
                type:'error',
                text:'No more files plesase!'
            });
        });
    }
}

The best solution would be if the Dropzone only set the value of a hidden file input with a specific name in the form and send the files normally with the other data when the form being sent.

Note: The ajaxFormSend is a jQuery method which I writed to send the files and the other data in one connection. I just left it in the code, because I want to send the whole form with AJAX with this method, so I just need to add a hidden input field and the Dropzone set the value of this one input field.

Answer 1

You should be able to send the form with dropzone without problem, but I don't think you can pass the file from dropzone to a regular input field, I believe its for security reasons.

To send the form using dropzone use a configuration like this:

Dropzone.options.createProject = {
    autoProcessQueue: false,
    parallelUploads: 1,
    maxFiles: 1,
    previewsContainer: ".dropzone-previews",
    dictDefaultMessage: '',
    clickable: '.upload-box',
    paramName:"picture",
    init: function() {
        var myDropzone=this;
        this.element.querySelector("button[type=submit]").addEventListener("click", function(e){
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();

        });
        this.on('addedfile', function(file){
            $('.upload-box').hide();
        });
        this.on('success', function(file){
            console.log(file.xhr.response);
        });
    }
}

If you only want to allow one image don't need the uploadMultiple option, and when the upload is done, you can place the code you want to execute in the success event. In the example just prints in the console the response from the server.

Also notice the options dictDefaultMessage to remove the default message from dropzone, and the clickable option to use a different element from the dropzone container.