Nikki's avatar
Level 1

Getting an image to save

I'm trying to create a page where you can enter a title and then upload multiple images. I'm using dropzone.js

My problem is that I'm not sure on how to get my form to go to the Products controller

I'm not sure on how to resolve this. I can't see where I've gone wrong.

My products.blade.php

@extends('templates.admin')
@section('content')
    <form action="{{ route('products.store') }}"  method="post" enctype="multipart/form-data">
        {{ csrf_field() }}
        
        <div class="form-group">
            <label>Title</label>
            <input type="title" name="title" class="form-control">
        </div>

        <div id="actions" class="row">
            <div class="col-lg-7">
                <span class="btn btn-success fileinput-button dz-clickable">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Add files...</span>
                </span>

                <button type="reset" class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel upload</span>
                </button>
            </div>

            <div class="col-lg-5">
                <span class="fileupload-process">
                    <div id="total-progress" class="progress progress-striped active total-upload-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress=""></div>
                    </div>
                </span>
            </div>
        </div>

        <div class="table table-striped files" id="previews">
            <div id="template" class="file-row dz-image-preview">
                <div>
                    <span class="preview">
                        <img data-dz-thumbnail />
                    </span>
                </div>
            
                <div>
                    <p class="name" data-dz-name></p>
                    <strong class="error text-danger" data-dz-errormessage></strong>
                </div>
    
                <div>
                    <p class="size" data-dz-size></p>
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                        <div class="progress-bar progress-bar-primary" style="width:0%;" data-dz-uploadprogress></div>
                    </div>
                </div>

                <div>
                    <button data-dz-remove class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel</span>
                    </button>
                </div>
            </div>
        </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>
@endsection

My ProductsController.php

public function store(Request $request)
{
    dd($request->all());
}

My main.js

var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

var myDropzone = new Dropzone(document.body, { 
    url: "#", 
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoProcessQueue: false,
    uploadMultiple: true,
    previewsContainer: "#previews", 
    clickable: ".fileinput-button" 
});

myDropzone.on("sending", function(file, xhr, formData) {

    var data = $('form').serializeArray();

    $.each(data, function(key, el) {
        formData.append(el.name, el.value);
    });

    document.querySelector("#total-progress").style.opacity = "1";
});

document.querySelector("#actions .cancel").onclick = function() {
    myDropzone.removeAllFiles(true);
};



$(document).ready(function() {
    $('form').on('submit', function(e) {
        console.log('submitted');
        e.preventDefault();
        myDropzone.processQueue();

    });
});

If there is anything else I've left out please let me know

0 likes
2 replies
ts's avatar

I've not used Dropzone.js before, but after a quick look at the documentation I'd imagine that the issue is in the instantiation of the Dropzone class in main.js. The documentation shows that the first argument should be the query selector for the form. Add an id to the form element and reference this.

http://www.dropzonejs.com/#create-dropzones-programmatically

Nikki's avatar
Nikki
OP
Best Answer
Level 1

@ts - Thanks for helping. But I must admit I feel like an idiot, because the info of the products controller was in my network tab in the developers tools.

Please or to participate in this conversation.