Receiving Dropzone Files

Try dd($request->files(), $request->all()) to see/check if anything was sent.

Also look into your Debugbar/Console to see if there is an error

It just returns the regular form data. Not the images.

@bensen You can't actually see the file but you should be able to see the tmp path etc. Try do a foreach on the request->files then return (or dd()) the $file->getClientOriginalName();

Hi, the request always returns null.

@bensen What's your HTML like? If it's not sending the files, you need to check browser network tab in developer tools. That way you can see the form data.

@bashy - i don't upload the files on drop. i need the id of the photos before creating the post to relate them to the post.

<form class="" action="store-item" method="post" enctype="multipart/form-data">
        {{ csrf_field() }}

        <div class="form-group">
            <label for="model">Model</label>
            <input type="text" class="form-control" name="model" value="{{ old('model') }}" placeholder="Model">
        </div>

        <div class="form-group">
            <label for="price">Price</label>
            <input type="text" class="form-control" name="price" value="{{ old('price') }}" placeholder="Price">
        </div>

        <label>Currency</label>
        <div class="form-group clearfix">
            @foreach ($currencies as $currency)
                <label class="radio-inline radio-button">
                    <input type='radio' name='currency' value="{{ $currency }}" {{ (old('currency') == $currency) ? 'checked' : '' }}> <span>{{ $currency }}</span>
                </label>
            @endforeach
        </div>

        <div class="form-group">
            <label for="description">Description</label>
            <textarea name="description" class="form-control" value="">{{ old('description') }}</textarea>
        </div>

        <div id="dz" class="dropzone" style="width:100%; height: 200px; background: grey;"></div>
        <input type="submit" name="submit" value="Submit" id="item-submit-button">

    </form>



<script>
        $("div#dz").dropzone({ url: "{{ url('/store-item')}}",
            acceptedFiles: '.jpg, .jpeg, .png',
            maxFileSize: 1,
            autoDiscover: false,
            autoProcessQueue: false,
            paramName: "file",
            sending: function(file, xhr, formData) {
                formData.append("_token", "{{{ csrf_token() }}}");
            },
            complete: function() {
                alert('complete');
            },
            init: function() {
            var submitButton = document.querySelector("#item-submit-button")
                myDropzone = this;
                submitButton.addEventListener("click", function() {
                    myDropzone.processQueue();
                });
            }
        });

    </script>

´´´

@bensen When you submit the form after attaching files, watch the developer console's network tab to see what's being sent to the server. You should see form data but you should also see the uploads also being sent to the Laravel endpoint.

@Braunson i just get the form date if dropzone is disabled. something is wrong, i can't find out.

Hi,

after 1 Month of tryouts, switching to other upload plugins etc. i got it. If anyone is interessted of getting dropzone to work in a normal form here is my code. if you see something that can be improved please let me know.

<script>
    
    // Disable AutoDiscover
    Dropzone.autoDiscover = false;

    // Set Dropzone Options
    Dropzone.options.myAwesomeDropzone = {
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 20,
        maxFiles: 20,
        addRemoveLinks: true,
        acceptedFiles: ".jpg, .jpeg, .png",
        maxFilesize: 1,
        dictDefaultMessage: "Drop your files here!",
    }

    // Initialize Dropzone
    var myDropzone = new Dropzone("#my-awesome-dropzone", {url: "/store-item"});

    // Initialize Submit Button
    var submitButton = document.querySelector("#submit");

    // Submit Button Event on click
    submitButton.addEventListener("click", function(e) {
        e.preventDefault();
    // Serialize Form
        var form = $('#item-form').serialize();
        $.ajax({
            type: 'post',
    // First, validate form
            url: '/validate-item',
            data: form,
            success: function(){
        // if dropzone has files processqueue and submit formdata with dropzone
                if (myDropzone.getQueuedFiles().length > 0) {
                    myDropzone.processQueue();
                } else {
            // if dropzone has no files store item without images
                    $.ajax({
                        type: 'post',
                        url: '/store-item',
                        data:form,
                        success: function(){
                            window.location="{{URL::to('/items')}}";
                        }
                    });
                }
            },
            error: function(data){
        // on validate error show errors (using sweet alert)
                var result = $.parseJSON(data.responseText);
                var arr = [];
                $.each(result, function(key, value) {
                    arr += value + "\n";
                });
                swal({
                    title: "Error!",
                    text: arr,
                    type: "error",
                    confirmButtonText: "Ok"
                });
            }
        });
    });

    // on sending via dropzone append token and form values (using serializeObject jquery Plugin)
    myDropzone.on("sendingmultiple", function(file, xhr, formData) {
        formData.append('_token', '{{ csrf_token() }}');
        var formValues = $('#item-form').serializeObject()
        $.each(formValues, function(key, value){
            formData.append(key, value);
        });
    });

    // on success redirect
    myDropzone.on("successmultiple", function(){
        window.location="{{URL::to('/items')}}";
    });

    // on error show errors
    myDropzone.on("errormultiple", function(file, errorMessage, xhr){
        var arr = [];
        $.each(errorMessage, function(key, value) {
            arr += value + "\n";
        });
        swal({
            title: "Error!",
            text: arr,
            type: "error",
            confirmButtonText: "Ok"
        });
    });

</script>