Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Flex's avatar
Level 4

Not uploading images to the dropzoneJS box in my form

I am working laravel 5.6 with dropzone JS box to upload images in my form. I am using dropzone box in programmatically. http://www.dropzonejs.com/#create-dropzones-programmatically

<form method="post" action="{{url('form')}}" enctype="multipart/form-data"> 
            {{csrf_field()}}
<div class="form-group">
        <label for="formGroupExampleInput">Email</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" name="email">
        </div>

        <div class="form-group">
        <label for="formGroupExampleInput">Name</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" name="name">
        </div>
<!--  start dropzone image upload-->
       <div class="dropzone" id="my-dropzone"> 
    <div class="dz-message">

              <div class="col-xs-8">
                 <div class="message">
                    <p>Drop files here or Click to Upload</p>
                 </div>
              </div>
    </div>
    <div class="fallback">
        <input type="file" name="file" multiple>

    </div>
</div>
<button type="submit" class="btn btn-primary" style="margin-top:10px">Submit</button>
</form> 

Dropzone class:

var myDropzone = new Dropzone("div#myId", { url: "/form"});

dropzone.config.js

var total_photos_counter = 0;
Dropzone.options.myDropzone = {
    uploadMultiple: true,
    parallelUploads: 2,
    maxFilesize: 5,
    previewTemplate: document.querySelector('#preview').innerHTML,
    addRemoveLinks: true,
    dictRemoveFile: 'Remove file',
    dictFileTooBig: 'Image is larger than 16MB',
    timeout: 10000,

    init: function () {
        this.on("removedfile", function (file) {
            $.post({
                url: '/images-delete',
                data: {id: file.name, csrf_token: $('[name="csrf_token"]').val()},
                dataType: 'json',
                headers: {
                  'X-CSRF-TOKEN':  '{{ csrf_token() }}'
         },
                success: function (data) {
                    total_photos_counter--;
                    $("#counter").text("# " + total_photos_counter);
                }
            });
        });
    },
    success: function (file, done) {
        total_photos_counter++;
        $("#counter").text("# " + total_photos_counter);
    },

    sending: function(file, xhr, formData){
        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
    }

};

Controller

public function store(Request $request)
    {
        $photos = $request->file('file');

        if (!is_array($photos)) {
            $photos = [$photos];
        }

        if (!is_dir($this->photos_path)) {
            mkdir($this->photos_path, 0777);
        }

        for ($i = 0; $i < count($photos); $i++) {
            $photo = $photos[$i];
            $name = sha1(date('YmdHis') . str_random(30));
            $save_name = $name . '.' . $photo->getClientOriginalExtension();
            $resize_name = $name . str_random(2) . '.' . $photo->getClientOriginalExtension();

            Image::make($photo)
                ->resize(250, null, function ($constraints) {
                    $constraints->aspectRatio();
                })
                ->save($this->photos_path . '/' . $resize_name);

            $photo->move($this->photos_path, $save_name);

            $upload = new Upload();
            $upload->filename = $save_name;
            $upload->resized_name = $resize_name;
            $upload->original_name = basename($photo->getClientOriginalName());
            $upload->save();
        }
        return Response::json([
            'message' => 'Image saved Successfully'
        ], 200);
    }

But when I drag and drop images to the dropzone box images are not uploading to the box. image preview showing with the cross mark (not success uploads). then how can fix this problem

0 likes
1 reply

Please or to participate in this conversation.