Dropzone.JS send files and form data in the same request

Question

I am using dropzone.js within my existing form to store images, am i able to store the images at the same time i save the form ? I mean, send the images dropped on the dropzone on the same request as the form ?

     {{ Form::open(array('method'=>'post','class'=> 'ajaxaddevent','url' => 
'/savenewevent', 'enctype' => 'multipart/form-data')) }}
            <div class="form-group">
                    <label for="name">Título do Evento</label>
                    <input type="text" id="name" name="name" class="form-
control" />
                </div>

                <div class="form-group">
                    <label for="eventtype">Tipo</label>
                    <select class="form-control selecttype" name="eventtype" id="eventtype">
                        @foreach ($eventtypes as $eventtype)
                            <option value="{{ $eventtype->id }}" > {{ $eventtype->name }} </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label for="eventsubtype">Sub-tipo</label>
                    <select class="form-control selectsubtypes" name="eventsubtype" id="eventsubtype">
                        @foreach ($eventsubtypes as $eventsubtype)
                            <option value="{{ $eventsubtype->id }}" > {{ $eventsubtype->name }} </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label for="eventsubtype">Temas</label>
                    <span class="interest_text">podes escolher mais que um</span>
                    <div class="interests_list submit_event">
                            @foreach ($themes as $theme)                    
                                <div>
                                    <input type="checkbox" id="theme{{ $theme->id }}" name="themes[]" value="{{ $theme->id }}"/>
                                    <label for="theme{{ $theme->id }}"><span></span>{{ $theme->name }}</label>
                                </div>   
                            @endforeach  
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="startdate">Data</label>
                        <input type="date" id="startdate" name="startdate" class="form-control" data-country="PT" placeholder="Início">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="enddate">&nbsp;</label>
                        <input type="date" id="enddate" name="enddate" class="form-control" data-country="PT" placeholder="Fim">
                        <span id="adddata" class="adddata">Adicionar mais horas</span>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="schedule_start">Horário</label>
                        <input type="date" id="schedule_start" name="schedule_start" class="form-control" data-country="PT" placeholder="Início">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="schedule_end">&nbsp;</label>
                        <input type="date" id="schedule_end" name="schedule_end" class="form-control" data-country="PT" placeholder="Fim">
                        <span id="addschedule" class="addschedule">Adicionar mais horas</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="duration">Duração</label>
                    <input type="text" id="duration" name="duration" class="form-control" placeholder="Escreve apenas números" />
                    <div class="duration_tips">
                        <input type="radio" id="duration_tips_hours" name="duration_tips[]" value="hours" /><label for="duration_tips_hours"><span></span>Horas</label>
                        <input type="radio" id="duration_tips_weeks" name="duration_tips[]" value="weeks" /><label for="duration_tips_weeks"><span></span>Semanas</label>
                        <input type="radio" id="duration_tips_days" name="duration_tips[]" value="days" /><label for="duration_tips_days"><span></span>Dias</label>
                        <input type="radio" id="duration_tips_months" name="duration_tips[]" value="months" /><label for="duration_tips_months"><span></span>Meses</label>
                    </div>
                </div>

                <div class="form-group">
                    <label for="available">Número de vagas</label>
                    <input type="text" id="available" name="available" class="form-control" placeholder="Escreve apenas números" />
                </div>

                <div class="form-group">
                    <label for="price">Preço</label>
                    <input type="text" id="price" name="price" class="form-control" placeholder="Escreve apenas números" />
                </div>


                <div class="form-group">
                    <label for="email">E-mail</label>
                    <input type="email" id="email" class="form-control" />
                </div>

                <div class="form-group">
                    <label for="telemovel">Telemóvel</label>
                    <input type="text" id="telemovel" class="form-control" />
                </div>

                <div class="form-group">
                    <label for="distrito">Distrito / região</label>
                    <select class="form-control selectdistrict" name="districtID" id="districtID">
                        @foreach ($districts as $district)
                            <option value="{{ $district->id }}" > {{ $district->name }} </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label for="concelho">Concelho</label>
                    <select class="form-control selectcounties" name="countyID" id="countyID">
                        @foreach ($counties as $county)
                            <option value="{{ $county->id }}" > {{ $county->name }} </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label for="morada">Morada</label>
                    <input type="text" id="morada" class="form-control" />
                </div>
                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="freguesia">Freguesia</label>
                        <input type="text" name="parish" id="parish" class="form-control" />
                    </div>

                    <div class="form-group col-md-6">
                        <label for="cod_postal">Código Postal</label>
                        <input type="text" id="cod_postal" class="form-control" />
                    </div>
                </div>

                <div class="form-group">
                    <label for="website">Website</label>
                    <input type="text" id="website" class="form-control" />
                </div>

                <div class="form-group">
                    <label for="facebook">Facebook</label>
                    <input type="text" name="facebooklink" id="facebook" class="form-control" placeholder="www.facebook.com/" />
                </div>

                <div class="form-group">
                    <label for="descricao">Descrição</label>
                    <textarea id="description" name="description" class="form-control descricao_anunciante" placeholder="(quem és, o que fazes ou o que representas, temas e tipos de eventos)"></textarea>
                </div>

                <div class="dropzone" id="myDropzone"> </div>

                <button type="submit" id="submit" class="btn btn-primary">GUARDAR DADOS</button>
                {{Form::close()}}

JS

Dropzone.options.myDropzone= {
        url: '/savenewevent',
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 5,
        maxFiles: 5,
        maxFilesize: 1,
        acceptedFiles: 'image/*',
        addRemoveLinks: true,
        init: function() {
            dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

            // for Dropzone to process the queue (instead of default form behavior):
            document.getElementById("submit").addEventListener("click", function(e) {
                // Make sure that the form isn't actually being sent.
                e.preventDefault();
                e.stopPropagation();
                dzClosure.processQueue();
            });

            this.on("sendingmultiple", function(data, xhr, formData) {
                formData.append("name", jQuery("#name").val());
                formData.append("eventtype", jQuery("#eventtype").val());
                formData.append("eventtype", jQuery("#eventtype").val());
                formData.append("eventsubtype", jQuery("#eventsubtype").val());
                formData.append("startdate", jQuery("#startdate").val());
                formData.append("enddate", jQuery("#enddate").val());
                formData.append("schedule_start", jQuery("#schedule_start").val());
                formData.append("schedule_end", jQuery("#schedule_end").val());
                formData.append("available", jQuery("#available").val());
                formData.append("price", jQuery("#price").val());
                formData.append("email", jQuery("#email").val());
                formData.append("telemovel", jQuery("#telemovel").val());
                formData.append("districtID", jQuery("#districtID").val());
                formData.append("morada", jQuery("#morada").val());
                formData.append("cod_postal", jQuery("#cod_postal").val());
                formData.append("website", jQuery("#website").val());
                formData.append("facebook", jQuery("#facebook").val());
                formData.append("description", jQuery("#description").val());
            });
        }

• Send the images/files on the same request (i did a var_dump when i click on submit and the files from the dropzone arent there), how can i achieve that ?

OR

my objective is to store a serialized array on database with the filenames, so if theres another alternative to do that, its okay.

Thank you.

Answer 1

To achieve this you can make your dropzone autoProcessQueue as true then, return the filename as response once its uploaded and store it in the form input.

this.on("success", function (file, response) {
    $('#hidden_input_id').val(response);
}

when you are submitting the form, you will get the filenames from name of #hidden_input_id and store that name into database.

Note: Dropzone ajax/image upload url and the form submission url should be different.

the sample code looks like, html

{{ Form::open(array('method'=>'post','class'=> 'ajaxaddevent','url' => 
'/savenewevent', 'enctype' => 'multipart/form-data')) }}

<input id="hidden_image_name" name="hidden_image_name"

<div class="dropzone" id="myDropzone"> </div>

<button type="submit" id="submit" class="btn btn-primary">GUARDAR DADOS</button>
{{Form::close()}}

and the script like,

Dropzone.options.myDropzone= {
    url: '/uploadimage',
    autoProcessQueue: true,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        this.on("success", function (file, response) {
            $('#hidden_image_name').val(response);
        }

    }
};

/uploadimage route should return the name of the uploaded image file.

In /savenewevent route you can check the posted params and if the hidden_image_name is not empty map that image name to that event.