1

I'm working in laravel 5.3 project.

before asking question I have tried these links :

1st , 2nd , 3rd , 4th ,5th but no luck.

let me show you my code.

details.blade.php

<form class="form"  method="post" action="{{url('add_user_photo_gallery')}}" id="my-awesome-dropzone"  name="validate_resume">
<input name="_token" type="hidden" value="{{ csrf_token() }}"/>
<div class="card-body">
    <div class="row">
        <div class="col-md-12 col-sm-12 text-center">
            <div class="form-group floating-label">
                <div id="dropzonephoto" class="dropzone dz-clickable form-fileupload">
                    <div class="dz-message dz-default" style="text-align:center;">

                        <span>Click Here to upload Photo </span>
                    </div>
                </div>
            </div>
            <small>jpg, png , jpeg - upto 1 Mb max</small>
        </div>

        <div class="col-md-12">
            <input type="text" name="first_name" />
        </div>

        <div class="col-md-12">
            <input type="text" name="last_name" />
        </div>

        <div class="col-md-12">
            <input type="email" name="email" />
        </div>

        <div class="row">
            <div class="col-md-12">
                <input type="submit" id="btn_save_photo" class="custom-btn primary-btn pull-right" required>
                <input type="reset" id="btn_reset_photo" class="custom-btn warning-btn pull-right" value="Cancle" required>
            </div>
        </div>
    </div>
</div>
</form>

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('#dropzonephoto', { // Make the whole body a dropzone
    url: base_path + '/add_user_photo_gallery',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },        
    paramName: "images",
    parallelUploads: 1,
    maxFilesize: 1.0,
    maxFiles:20,
    acceptedFiles: ".png,.jpg,.jpeg",
    dictInvalidFileType: 'This file type is not supported.',
    dictFileTooBig:'File size too Big',
    addRemoveLinks: true
});



public function add_user_photo_gallery(Request $request){

    dd($request->all());

}

In my controller function I print request that coming from form. I'm getting all the field except dropzone image.

using above dropzone script when I select image it's immediately go to controller and I can see all image details in console / network.I don't want that so I added below code in my script.

autoProcessQueue:false,

$('#btn_save_photo').on('click',function(e){
    e.preventDefault();
    myDropzone.processQueue();
});

After add this code image is upload on submit button but other form element is not submitted. and this upload process is shown in inspect element / network section .

So what I want is on submit button want to page refresh and print all form data with dropzone image.

Anyone is here to solve my problem ?

Community
  • 1
  • 1
Dhaval
  • 1,393
  • 5
  • 29
  • 55
  • 1
    see http://stackoverflow.com/questions/34235849/trouble-with-dropzone-js-file-upload/34250550#34250550 it describes a way to accomplish what you need. Just want to point that with `parallelUploads: 1` you are going to send a request for each file added to dropzone and every one of these requests are going to contain the same form data, maybe you should consider sending all the images in one request with `uploadMultiple` – wallek876 Feb 26 '17 at 08:51
  • 1
    Hi Dhaval, did you solve this problem? I am facing similar problem too – Sead Lab Apr 14 '20 at 23:37

0 Answers0