Level 102
"not successful". So what does that mean? Error? Image is stored but corrupt? Your computer exploded?
Apr 12, 2022
11
Level 2
Failed to store to DB with DropZone
I'm trying to store in DB with Drop-zone package but its not successful Any hints? Store Method in Controller
public function fileStore(Request $request)
{
$image = $request->file('images');
$imageName = $image->getClientOriginalName();
$image->move(public_path('images'),$imageName);
$imageUpload = new Image();
$imageUpload->name = $imageName;
$imageUpload->save();
return response()->json(['success'=>$imageName]);
}
Create.blade.php
<form class="vertical-navs-step" method="Post" action="{{ route('observe.store') }}"
enctype='multipart/form-data'>
<div class="tab-pane fade" id="v-pills-payment" role="tabpanel"
aria-labelledby="v-pills-payment-tab">
<div class="col-lg-6">
<div class="row mt-2">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Multiple File Upload</h4>
</div><!-- end card header -->
<div class="card-body">
<input type="file"
class="filepond filepond-input-multiple dropzone"
multiple name="filepond" data-allow-reorder="true"
data-max-file-size="3MB" data-max-files="3">
</div>
<ul class="list-unstyled mb-0" id="dropzone-preview">
<li class="mt-2" id="dropzone-preview-list">
<!-- This is used as the file preview template -->
<div class="border rounded">
<div class="d-flex p-2">
<div class="flex-shrink-0 me-3">
<div class="avatar-sm bg-light rounded">
<img data-dz-thumbnail
class="img-fluid rounded d-block"
src="#" alt="Dropzone-Image" />
</div>
</div>
<div class="flex-grow-1">
<div class="pt-1">
<h5 class="fs-14 mb-1"
data-dz-name> </h5>
<p class="fs-13 text-muted mb-0"
data-dz-size></p>
<strong class="error text-danger"
data-dz-errormessage></strong>
</div>
</div>
<div class="flex-shrink-0 ms-3">
<button data-dz-remove
class="btn btn-sm btn-primary">Delete</button>
</div>
</div>
</div>
</li>
</ul>
<!-- end card body -->
</div>
<!-- end card -->
</div> <!-- end col -->
<!-- end row -->
</div>
</form>
Routes
Route::post('imagestore', [ObservationController::class, 'fileStore'])->name('file_store');
JS
Dropzone.options.dropzone =
{
init: function() {
this.on("processing", function(file) {
this.options.url = "imagestore";
});
},
renameFile: function(file) {
var dt = new Date();
var time = dt.getTime();
return time+file.name;
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
timeout: 50000,
removedfile: function(file)
{
var name = file.upload.filename;
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
type: 'POST',
url: '{{ url("image/delete") }}',
data: {filename: name},
success: function (data){
console.log("File has been successfully removed!!");
},
error: function(e) {
console.log(e);
}});
var fileRef;
return (fileRef = file.previewElement) != null ?
fileRef.parentNode.removeChild(file.previewElement) : void 0;
},
success: function(file, response)
{
console.log(response);
},
error: function(file, response)
{
return false;
}
};
Level 2
@Sinnbeck Nothing happens,the other data in the form is done but no images sent to the images table or the images folder
Level 102
@karimali1337 Check the network tab in the browser dev tools (f12) and see if dropzone even sends the file request.
If it is sent, you can debug it with
public function fileStore(Request $request)
{
dd($request->all()); //see in dev tools what this gives you
$image = $request->file('images');
$imageName = $image->getClientOriginalName();
$image->move(public_path('images'),$imageName);
$imageUpload = new Image();
$imageUpload->name = $imageName;
$imageUpload->save();
return response()->json(['success'=>$imageName]);
}
Level 2
it returns the images but as an object,Is there a way to get the name and save it with the above method?
array:15 [▼
"_method" => "PUT"
"_token" => "fFBiZb8wkLcD74TX7k8gyiFwPqdCaxpU3JmH3aWf"
"title" => "hhhhhhhhhhhhh"
"description" => "hhhhhhhhhhhhhh"
"date" => "2022-04-12"
"time" => "11:30"
"project" => "1"
"specific_location" => "245street"
"type" => "safe"
"action" => "condition"
"categorys" => array:1 [▼
0 => "19"
]
"question" => "xdewewdwx"
"comment" => "w2d2ewde2we"
"images" => array:3 [▼
0 => "{"id":"e1k0o9mzn","name":"avatar-3.jpg","type":"image/jpeg","size":36469,"metadata":{},"data":"/9j/4AAQSkZJRgABAQAASABIAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA ▶"
1 => "{"id":"w81kv32ww","name":"avatar-4.jpg","type":"image/jpeg","size":34134,"metadata":{},"data":"/9j/4AAQSkZJRgABAQAASABIAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA ▶"
2 => "{"id":"l4b5s2qry","name":"avatar-5.jpg","type":"image/jpeg","size":36800,"metadata":{},"data":"/9j/4AAQSkZJRgABAQAASABIAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA ▶"
]
"lifes" => array:1 [▼
0 => "9"
]
]
Level 102
@karimali1337 It looks like an array, so you would need to treat it as such.
public function fileStore(Request $request)
{
foreach ($request->file('images') as $image) {
$imageName = $image->getClientOriginalName();
$image->move(public_path('images'),$imageName);
$imageUpload = new Image();
$imageUpload->name = $imageName;
$imageUpload->save();
}
return response()->json(['success'=>$imageName]);
}
Level 2
@Sinnbeck the problem isn't in uploading,it doesn't move to store even if i stored 1 image the store method to the public folder not working
Update: when i insert file('images') it returns null
Level 102
@karimali1337 It is probably still an array even though you just upload 1 image. If it fails it should give an error, so check for that in the dev tools->network
Level 2
@Sinnbeck when i insert file('images') it returns null
Level 102
@karimali1337 Can you try this
public function fileStore(Request $request)
{
foreach ($request->input('images') as $image) {
dd($image);
$imageName = $image->getClientOriginalName();
$image->move(public_path('images'),$imageName);
$imageUpload = new Image();
$imageUpload->name = $imageName;
$imageUpload->save();
}
return response()->json(['success'=>$imageName]);
}
Level 2
@Sinnbeck same,i've tried this code and its working until the dd($image_name); it gives me the image name normal,but it does'nt store neither in db nor in public folder
if(is_countable($request->images) && count($request->images) > 0) {
$arr_images = $request->images;
foreach ($arr_images as $image) {
$array = json_decode($image, true);
$image_name = time() . rand(11, 99) . $array['name'];
dd($image_name);
$image->move('albums', $image_name);
Image::create([
'name' => $image_name,
'observation_id' => $observe->id,
//'path' => $destinationPath
]);
}
}
Level 102
@karimali1337 Notice that I have dd right at the start of the array. Please post the output of it. I have a feeling that it isnt sending in files, but rather binary data
Please or to participate in this conversation.