Posted By
Bajarangi soft ,
Posted On 01-02-2021
Step 1:Create a table and model for Multiple Image Uploading.
class Dropzone extends Model
{
public $table = 'image';
protected $fillable = [
'image'
];
}
<!DOCTYPE html>
<html>
<head>
<title>Laravel </title>
<meta name="_token" content="{{csrf_token()}}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
</head>
<body>
<div class="container">
<h3 align="center" style="color:#C42993">Multiple Image Uploading And Inserting With Dropzone</h3>
<div class="alert-success" id="alert"></div>
<form method="post" action="{{url('dropzone')}}" enctype="multipart/form-data"
class="dropzone" id="dropzone">
@csrf
</form>
<script type="text/javascript">
Dropzone.options.dropzone =
{
maxFilesize: 12,
renameFile: function(file) {
var dt = new Date();
var time = dt.getTime();
return time+file.name;
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
timeout: 5000,
addRemoveLinks: true,
removedfile: function(file)
{
var name = file.upload.filename;
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
type: 'POST',
url: '{{ url("delete") }}',
data: {filename: name},
success: function (data){
console.log("File deleted successfully!!");
},
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);
$('#alert').text(response.message);
// $('#alert').text(response.message);
},
error: function(file, response)
{
return false;
}
};
</script>
</body>
</html>
public function store(Request $request)
{
$image = $request->file('file');
$profileImage = $image->getClientOriginalName();
$destinationPath = public_path('/images/');
$image->move($destinationPath,$profileImage);
$imagemodel= new Dropzone();
$imagemodel->image="$profileImage";
$imagemodel->save();
return response()->json(['success'=>$profileImage,
'message' => 'Images Saved Successfully..']);
}
Route::post('dropzone', 'DropzoneController@store');