sanjayacloud's avatar

Multiple Image upload

Any one know how to upload multiple images in laravel.. I have form with product create. I need upload multiple images for one product.

0 likes
5 replies
Georg's avatar

Creat an ImageUploadController with this function

public function store(Request $request) { $imageName = request()->file->getClientOriginalName(); request()->file->move(public_path('upload'), $imageName);

    return response()->json(['uploaded' => '/upload/'.$imageName]);
}

And a create blade like .main-section{ margin:0 auto; padding: 20px; margin-top: 100px; background-color: #fff; box-shadow: 0px 0px 20px #c1c1c1; } .fileinput-remove, .fileinput-upload{ display: none; }

File Input Example

                {!! csrf_field() !!}
                <div class="form-group">
                    <div class="file-loading">
                        <input id="file-1" type="file" name="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
                    </div>
                </div>
            
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/themes/fa/theme.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>


<script type="text/javascript">
    $("#file-1").fileinput({
        theme: 'fa',
        uploadUrl: "/image-view",
        uploadExtraData: function() {
            return {
                _token: $("input[name='_token']").val(),
            };
        },
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize:2000,
        maxFilesNum: 10,
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
</script>

Route::post('image-view','ImageUploadController@store');

Report any error

Dont forget to add upload folder in the public

pardeepkumar's avatar

First try your view like

<form action="/multiuploads" method="post" enctype="multipart/form-data">
 
{{ csrf_field() }}
 
<div class="form-group">
 
<label for="Product Name">Product Name</label>
 
<input type="text" name="name" class="form-control"  placeholder="Product Name" >
 
</div>
 
<label for="Product Name">Product photos (can attach more than one):</label>
 
<br />
 
<input type="file" class="form-control" name="photos[]" multiple />
 
<br /><br />
 
<input type="submit" class="btn btn-primary" value="Upload" />
 
</form>

Controller

$items= Item::create($request->all());
 
foreach ($request->photos as $photo) {
 
$filename = $photo->store('photos');
 
ItemDetail::create([
 
'item_id' => $items->id,
 
'filename' => $filename
 
]);
 
}
 
echo "Upload Successfully";
 
}
 
else
 
{
 
echo '<div class="alert alert-warning"><strong>Warning!</strong> Sorry Only Upload png , jpg , doc</div>';
 
}
 
}
pardeepkumar's avatar

@sanjayacloud Kindly below code

public function uploadSubmit(Request $request)
 
{
 
$this->validate($request, [
 
'name' => 'required',
 
'photos'=>'required',
 
]);
 
if($request->hasFile('photos'))
 
{
 
$allowedfileExtension=['pdf','jpg','png','docx'];
 
$files = $request->file('photos');
 
foreach($files as $file){
 
$filename = $file->getClientOriginalName();
 
$extension = $file->getClientOriginalExtension();
 
$check=in_array($extension,$allowedfileExtension);
 
//dd($check);
 
if($check)
 
{
 
$items= Item::create($request->all());
 
foreach ($request->photos as $photo) {
 
$filename = $photo->store('photos');
 
ItemDetail::create([
 
'item_id' => $items->id,
 
'filename' => $filename
 
]);
 
}
 
echo "Upload Successfully";
 
}
 
else
 
{
 
echo '<div class="alert alert-warning"><strong>Warning!</strong> Sorry Only Upload png , jpg , doc</div>';
 
}
 
}
 
}
 
}

For storage

Laravel provides config/filesystems.php, located in the config folder. In this file, you can specify the locations for your file storage.

return [

'default' => 'local',

'disks' => [

'local' => [

'driver' => 'local',

'root' => storage_path('app'),

],

Please or to participate in this conversation.