View code:
<form enctype="multipart/form-data" name="imagesform" id="imagesform"
action="{{url('upload')}}" method="post" >
{{ csrf_field() }}
<input name="images[]" type="file" multiple>
<button type="submit" class="save" id="saveImage" style="border-
radius: 8px; padding: 5px 15px;">SAVE</button>
</form>
This is laravel view code. Here I'm trying to upload multiple images into db.
AJAX CODE:
<script type="text/javascript">
$(document).ready(function(){
$("#imagesform").submit(function(){
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN':
$('meta[name="_token"]').attr('content') }
});
$.ajax({
url :"{{url('upload')}}",
type: 'POST',
data:new FormData($("#imagesform").get(0)),
contentType:false,
processData:false,
success: function (data) {
**$("#insertedImages").html(data);**
alert("Uploaded OK!")
},
});
return false;
});
});
</script>
This is my ajax request to store the images. Also,I'm trying to display those added images(marked in block).
Controller code:
public function uploadSubmit(UploadRequest $request)
{
$product = Product::create($request->all());
foreach ($request->images as $photo) {
$filename = $photo->store('uploadedImages');
$filename=substr($filename,15);
ProductsPhoto::create([
'product_id' => $product->id,
'filename' => $filename
]);
}
return $filename;
}
Here is my controller to insert those array of images and also returning the same. But,it display only the name of the image. ie.,eZrcSTlkCeGez8Dq6pTW5X1yLUA080W5UamQEfXk.png..Instead of displaying it like this,I want to display the image.
Image display:
<div id="insertedImages"></div>
This is what I have given to display images.
First of all you are uploading an array of images and returning a variable which only returns the name of the last file uploaded. Instead create and return an array of filenames of the files uploaded.
public function uploadSubmit(UploadRequest $request)
{
$product = Product::create($request->all());
$filenames = array();
foreach ($request->images as $photo) {
$filename = $photo->store('uploadedImages');
$filename = substr($filename,15);
$filenames[] = asset('storage/app/uploadedImages/'.$filename);
ProductsPhoto::create([
'product_id' => $product->id,
'filename' => $filename
]);
}
return response()->json($filenames);
}
Then make sure you run php artisan storage:link
to create a symlink of the storage
directory in the public
directory.
<script type="text/javascript">
$(document).ready(function(){
$("#imagesform").submit(function(){
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN':
$('meta[name="_token"]').attr('content') }
});
$.ajax({
url :"{{url('upload')}}",
type: 'POST',
data:new FormData($("#imagesform").get(0)),
contentType:false,
processData:false,
success: function (data) {
$.each(data, function( index, value ) {
$("#insertedImages").append('<img src="'+value+'">');
});
},
});
return false;
});
});
</script>