Laravel Dropzone without class form Invalid element

Question

i am trying to make a multiple upload with dropzone on laravel and i take a look on documentation of dropzone.

The example must be using form and give class dropzone , here my case i want to use dropzone and others text field and got error Uncaught Error: Invalid dropzone element. here is the screenshot : error screenshot

here is my html code :

<form method="POST" action="/backend/blog" enctype="multipart/form-data" id="formku">

                    <div class="form-group label-floating">
                        <label class="control-label">Title</label>
                        <input type="text" name="title" class="form-control">
                    </div>

                    <div class="form-group label-floating">
                        <label class="control-label">Written By</label>
                        <input type="text" name="written_by" class="form-control">
                    </div>


                    <div class="form-group" id="place_image" style="display: none;">
                      <img src="" id="image_category" style="width: 95px;height: 50px;">
                     </div>

                      <div class="form-group">
                          <a class="btn btn-primary" id="btn_choose_image" onclick="$('#choose_image').click();">Choose Image</a>
                          <input style="display: none;" type="file" id="choose_image" name="image"></input>
                      </div>

                   <textarea id="bodyField" name="description"></textarea>

                    @ckeditor('bodyField', ['height' => 250])


                    <div class="form-group label-floating">
                        <div class="row">
                            <label class="control-label">Category</label>
                            <select class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7" name="category">
                                <option disabled selected>Choose Category</option>
                                @foreach( $categories as $key => $category): 
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach;
                            </select>
                        </div>
                    </div>

                    <div class="dropzone" id="imageUpload">
                        <h3>Upload Multiple Image By Click On Box</h3>
                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="status"> Status
                        </label>
                    </div>



                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="submit" class="btn btn-fill btn-rose" value="Submit">
                </form>

and here is my JS code :

Dropzone.autoDiscover = false;
    var imageUpload =  new Dropzone("div#imageUpload", { 
        url: "dropzone/store", 
        autoProcessQueue:false,
        uploadMultiple: true,
        maxFilesize:5,
        maxFiles:3,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",

        init: function() {
            var submitButton = document.querySelector("#submit-all")
                //imageUpload = this; // closure

            submitButton.addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                imageUpload.processQueue(); // Tell Dropzone to process all queued files.
            });

            // You might want to show the submit button only when 
            // files are dropped here:
            this.on("addedfile", function() {
              // Show submit button here and/or inform user to click it.
            });

        }
    });

anyone have solution of this trouble ?

Answer 1

You could try to check if the imageUpload element is there first :

Dropzone.autoDiscover = false;
if (document.getElementById('imageUpload')) {
    var imageUpload =  new Dropzone("div#imageUpload", { 
        url: "dropzone/store", 
        autoProcessQueue:false,
        uploadMultiple: true,
        maxFilesize:5,
        maxFiles:3,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",

        init: function() {
            var submitButton = document.querySelector("#submit-all")
                //imageUpload = this; // closure

            submitButton.addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                imageUpload.processQueue(); // Tell Dropzone to process all queued files.
            });

            // You might want to show the submit button only when 
            // files are dropped here:
            this.on("addedfile", function() {
            // Show submit button here and/or inform user to click it.
            });

        }
    });
}