+1 vote
Error: 5f9c35f053fbe341937476.jpeg

//Route form displaying our form
Route::get('/dropzoneform', 'ProductController@dropzoneform');
//Rout for submitting the form datat
Route::post('/storedata', 'ProductController@storeData')->name('form.data');
//Route for submitting dropzone data
Route::post('/storeimgae', 'ProductController@storeImage');

public function dropzoneform()
$products = Product::all();
return view('products.add_product_image', compact("products"));

public function storeData(Request $request)
try {
$product = new ProductImage;
$product->product_id = $request->product;
$user_id = $product->id; // this give us the last inserted record id
catch (\Exception $e) {
return response()->json(['status'=>'exception', 'msg'=>$e->getMessage()]);
return response()->json(['status'=>"success", 'user_id'=>$user_id]);

// We are submitting are image along with userid and with the help of user id we are updateing our record
public function storeImage(Request $request)

$img = $request->file('file');

//here we are geeting userid alogn with an image
$userid = $request->userid;

$imageName = strtotime(now()).rand(11111,99999).'.'.$img->getClientOriginalExtension();
$user_image = new ProductImage();
$original_name = $img->getClientOriginalName();
$user_image->image = $imageName;

if(!is_dir(public_path() . '/uploads/images/')){
mkdir(public_path() . '/uploads/images/', 0777, true);

$request->file('file')->move(public_path() . '/uploads/images/', $imageName);

// we are updating our image column with the help of user id
$user_image->where('id', $userid)->update(['image'=>$imageName]);

return response()->json(['status'=>"success",'imgdata'=>$original_name,'userid'=>$userid]);

<script type="text/javascript">

Dropzone.autoDiscover = false;
// Dropzone.options.demoform = false;
let token = $('meta[name="csrf-token"]').attr('content');
$(function() {
var myDropzone = new Dropzone("div#dropzoneDragArea", {
paramName: "file",
url: "{{ url('/storeimgae') }}",
previewsContainer: 'div.dropzone-previews',
addRemoveLinks: true,
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 1,
maxFiles: 1,
params: {
_token: token
// The setting up of the dropzone
init: function() {
var myDropzone = this;
//form submission code goes here
$("form[name='demoform']").submit(function(event) {
//Make sure that the form isn't actully being sent.

URL = $("#demoform").attr('action');
formData = $('#demoform').serialize();
type: 'POST',
url: URL,
data: formData,
success: function(result){
if(result.status == "success"){
// fetch the useid
var userid = result.user_id;
$("#userid").val(userid); // inseting userid into hidden input field
//process the queue

//Gets triggered when we submit the image.
this.on('sending', function(file, xhr, formData){
//fetch the user id from hidden input field and send that userid with our image
let userid = document.getElementById('userid').value;
formData.append('userid', userid);

this.on("success", function (file, response) {
//reset the form
//reset dropzone

this.on("queuecomplete", function () {


// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.

this.on("successmultiple", function(files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.

this.on("errormultiple", function(files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error


1 Answer

0 votes
Best answer
At the very least, there is a Get Query in the console and your router is catching a POST. Maybe there is some kind of foulback below, with middleware('auth') that works.

Well and call the ID of the picture $user_id at least strange, although in this case does not lead to an error.

Or Apache is configured incorrectly and prohibits directory query. Note, the request path ends with a slash.