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