Learn how to program an image file uploading script using Laravel 5.5. i use bootstrap and JavaScript for user interfacing. The server side scripting is PHP (Laravel MVC), connected to a MySQL database. Ajax is in use for server side data transmissions. I use how to change profile photo as an example. I use two methods to solve this problem, and these are;
/**************************************************************** * imageUpload.blade.php (Route) ****************************************************************/ /*Display success message if the upload is successful*/ @if($message = Session::get('success'))/**************************************************************** * web.php Route ****************************************************************/ //get current profile photo and return imageUpload page Route::get('/imageUpload','UploadimageController@get_Photo'); //upload image Route::post('/postImage','UploadimageController@UploadImage'); //Upload image with Ajax Route::post('/UpdateProfilePhoto','UploadimageController@UploadImageAjax'); /**************************************************************** * UploadimageController.php Controller ****************************************************************/ namespace App\Http\Controllers; use Validator; use Illuminate\Http\Request; use App\Models\ImageInsert; use App\Models\ImageGetimage; class UploadimageController extends Controller { //function to retrieve image from table public function get_Photo(Request $request){ $id = 1; $averta = ImageGetimage::where('id', '=', $id)->get(); //dd($averta); return view('pages.imageUpload', compact('averta')); } //function to Upload image and send back the result to imageUpload.blade.php public function UploadImage(Request $request){ request()->validate([ 'imagefile' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048', ]); $imageName = time().'.'.request()->imagefile->getClientOriginalExtension(); if(request()->imagefile->move(public_path('images'), $imageName)){ //delete old averta $old_image = $request->oldImage; if (file_exists($old_image)) { @unlink($old_image); } //update averta $id = 1; $update = ImageGetimage::find($id); $update->imagePath = isset($imageName) ? $imageName : $update->imagePath; $update ->save(); return back() ->with('success','You have successfully upload image.') ->with('image',$imageName); } } //function to Upload image using Ajax and return the result to Ajax function in imageUpload.blade.php file in JSON encode format public function UploadImageAjax(Request $request){ $validation = Validator::make($request->all(), [ 'imagefile' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048', ]); if ($validation->fails()){ return json_encode(array('error' => $validation->getMessageBag()->toArray())); // return json_encode($output); diffForHumans }else{ $imageName = time().'.'.request()->imagefile->getClientOriginalExtension(); if(request()->imagefile->move(public_path('images'), $imageName)){ //delete old averta $old_image = $request->oldImage; if (file_exists($old_image)) { @unlink($old_image); }else{ @unlink($old_image); } //update averta $id = 1; $update = ImageGetimage::find($id); $update->imagePath = isset($imageName) ? $imageName : $update->imagePath; $update ->save(); return response()->json($update); } } } } /**************************************************************** * ImageInsert.php Model ****************************************************************/ namespace App\Models; use Illuminate\Database\Eloquent\Model; class ImageInsert extends Model { /** * The attributes that are mass assignable. * * @var array */ protected $table = 'profile_photo'; protected $fillable = [ 'imagePath' ]; /** * The attributes that should be hidden for arrays. * * @var array */ protected $hidden = []; } /**************************************************************** * ImageGetimage.php Model ****************************************************************/ namespace App\Models; use Illuminate\Database\Eloquent\Model; class ImageGetimage extends Model { /** * The attributes that are mass assignable. * * @var array */ protected $table = 'profile_photo'; protected $fillable = [ 'imagePath', 'created_at','updated_at' ]; /** * The attributes that should be hidden for arrays. * * @var array */ protected $hidden = []; } /**************************************************************** * MySql table ****************************************************************/ CREATE TABLE `profile_photo` ( `id` int(11) NOT NULL, `imagePath` varchar(255) NOT NULL, `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' ) ENGINE=InnoDB DEFAULT CHARSET=latin1;{{ $message }}@endif
/*Display Error message if the upload is not successful*/ @if (count($errors) > 0)There was an arror with your input.@endif /*Display averta from*/ @foreach($averta as $photo)
Last Updated: >{{ $photo->updated_at->diffForHumans() }} @endforeach
/**************************************************************** * Upload image Ajax function ****************************************************************/ function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("imagefile").files[0]; var oldimg = _("oldImage").value; var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); var formdata = new FormData(); formdata.append("_token", CSRF_TOKEN); formdata.append("imagefile", file); formdata.append("oldImage", oldimg); var hr = new XMLHttpRequest(); hr.upload.addEventListener("progress", progressHandler, false); var url = "UpdateProfilePhoto"; hr.open("POST", url, true); hr.onreadystatechange = function() { if (hr.readyState == 4 && hr.status == 200) { var return_data = JSON.parse(hr.responseText); if(return_data.id){ _("img_averta").src = 'images/'+return_data.imagePath; $('#LastUpdated').html("Last Updated: just Now"); $('#statusimg').html(""); _("oldImage").value = 'images/'+return_data.imagePath; $('#averta_form')[0].reset(); }else{ $('#statusimg').html(" "+return_data.error.imagefile+""); } }else{ // var return_data = JSON.parse(hr.responseText); // // console.log(return_data.errormessage); } } hr.send(formdata); $('#statusimg').html(" uploading.....please wait..."); } function progressHandler(event){ _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; var percent = (event.loaded / event.total) * 100; if(percent == 100){ _("progressBar").value = Math.round(percent); _("status").innerHTML ="upload completed!"; _("loaded_n_total").innerHTML = ""; }else{ _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploading... please wait"; } }