Uploading multiple images with dropzone.js with Laravel - php

Question

I am using dropzone with laravel to upload multiple images and it works correctly. what I am asking for is I want to upload them at once and then send email to my customer to show him that photos have been uploaded.
Thanks in advance.
<form action="{{route('upload.photos')}}" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneFileUpload" >
{{csrf_field()}}
<div>
<h3 class="text-center">Upload Multiple Image By Click On Box</h3>
</div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize:500,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 25,
maxFiles: 25
};
</script>
$file = $request->file('file');
$fileName = time().$file->getClientOriginalName();
Storage::disk('local')->put($car_id.'/'.$fileName, File::get($file));
Photo::create([
'photo_name'=>$fileName,
'car_id'=>$car_id
]);
$data = [
'first_name'=>$car->user->first_name,
'last_name'=>$car->user->last_name,
'vin'=>$car->vin,
'model'=>$car->model,
'make' =>$car->make
];
Mail::send('admin.email.send_album_notification',$data,function($message) use($car){
$message->subject('Pictures for Test - Example ');
$message->from('noreply#example .com','Example ');
$message->to($car->user->email,$car->user->full_name);
});

Answer 1

If I share my experience then Create one unique id for every form like
<form>
<input type="hidden" value="{{ uniqid() .'-'. Carbon\Carbon::now()->timestamp }}" name="form-token"/>
<form>
Now you have identification for every form right. Insert it with every image. It is very easy to track every image.
For Example:
Photo::create([
'photo_name'=>$fileName,
'car_id'=>$car_id,
'form_token'=>$request->get('form-token'),
]);
Once you insert that You have form_token column to find all uploaded image at a time. Mean to say suppose your user uploaded 5 images and each image have same token. Now just find that images by token and send into mail.
$photos = Photo::whereFormToken($request->get('form-token'))->get();
$data['photos'] = $photos;
Mail::send('admin.email.send_album_notification',$data,function($message) use($car){
$message->subject('Pictures for Test - Example ');
$message->from('noreply#example .com','Example ');
$message->to($car->user->email,$car->user->full_name);
});
Now your mail view file have photos collection object so you can just print out it. Something like this:
#foreach($photos as $photo_key => $photo_value)
<?php $pathToImage = public_path()."/".$photo_value->image_name; ?>
<img src="{!! $photo_value->embed($pathToImage); !!}" style="max-width: 80%;padding-top: 20px;">
#endforeach

Answer 2

let image_index = 0;
Dropzone.autoDiscover = false;
$(function () {
let feedback_img_upload = new Dropzone('#image_upload', {
paramName: "file",
uploadMultiple: true,
parallelUploads: 5,
maxFilesize: 500,
acceptedFiles: '.jpg, .png, .gif, .pdf, .jpeg',
previewTemplate: document.getElementById('preview').innerHTML,
addRemoveLinks: true,
dictRemoveFile: 'Remove file',
dictFileTooBig: 'Image is larger than 16MB',
timeout: 10000,
url: "/images-save",
init: function () {
this.on("removedfile", function (file) {
let inputObj = $.parseJSON(file['xhr'].response);
$.post({
url: '/images-delete',
data: {id: inputObj.image_name, _token: $('[name="_token"]').val()},
dataType: 'json',
success: function (data) {
if (file.xhr != undefined) {
let imgId = inputObj.file_name;
$('#inquiry_imgfile_' + imgId).remove();
}
return true;
}
});
});
},
});
feedback_img_upload.on("success", function (file, obj) {
if (obj.status == 1) {
image_index++;
$('#inquiry_imgfile_main_div').append('<input class="inquiry_imgfile_upload" id="inquiry_imgfile_' + obj.file_name + '" name="inquiry_imgfile[]" value="" type="hidden"/>');
$("#inquiry_imgfile_" + obj.file_name).val(obj.image_name);
}
});
});
public function store(Request $request)
{
try {
$photos = $request->file('file');
if (!is_array($photos)) {
$photos = [$photos];
}
if (!is_dir($this->photos_path)) {
mkdir($this->photos_path, 0777);
}
$img_names = [];
for ($i = 0; $i < count($photos); $i++) {
try{
$photo = $photos[$i];
$name = date('YmdHisu') . rand(1, 1000000) . $i;
$file_name = $name . rand(1, 1000000);
$resize_name = $file_name . '.' . $photo->getClientOriginalExtension();
$img_names[] = $resize_name;
$photo->move($this->photos_path, $resize_name);
$this->save();
$img = Image::make($photo);
$img->text(' Mysale.lk', 200, 200, function ($font) {
$font->file(public_path('app/OpenSans-Light.ttf'));
$font->size(50);
$font->color('#fdf6e3');
$font->align('center');
$font->valign('top');
});
$img->save($this->photos_path . '/' . $resize_name);
return Response::json([
'image_name' => $resize_name,
"status" => 1,
"file_name" => $file_name
], 200);
exit();
}catch (\Exception $ex){
dd($ex);
}
}
} catch (\Exception $e) {
return Response::json([
"status" => 0
], 401);
exit();
}
}