I'm creating an API in which I have a model called OnlineAds(), it has these columns title, full_discription, short_discription and image, I also created an input form to fill in these fields and upload an image, in the image field I add the image's name and store the image in this path: storage/uploads. I was able to retrieve the image and display it, but I still didn't figure out how to resize it before displaying (lets say I want it to be 300 x 300), can anybody show me how ?
Note: I tried to use Stapler and Imagine but they seemed to give multiple bugs and failed!
This is my controller:
public function show()
{
$img = OnlineAds::find(50)->image;
$path = storage_path('uploads') . '/' . $img;
if (File::exists($path)) {
$filetype = File::type($path);
$response = Response::make(File::get($path), 200);
$response->header('Content-Type', $filetype);
return $response;
}
}
You could look into using Intervention to take care of the image processing as well as handling the response. It can be as easy as this:
public function show()
{
$img = OnlineAds::find(50)->image;
$path = storage_path('uploads') . '/' . $img;
if (File::exists($path)) {
$img = Image::make($path);
$img->resize(300, 300);
return $img->response();
}
}
There are detailed instructions on how to install the Intervention library and integrate it with Laravel, and it shouldn't take more than a few minutes to get it up and running.
Related
I'm trying to return query data and storage Images from laravel controller. My code looks like following :
class ClaimController extends Controller{
.....
public function show(Claim $claim)
{
$front_image = Storage::disk('do_spaces')->get($claim->images->front_image); //image file
$back_image = Storage::disk('do_spaces')->get($claim->images->back_image); //image
// return $front_image [works]
$claim = Claim::all();
//this throws error
return response()->json([
'claim' => $claim,
'images' => [$front_image, $back_image]
]);
}
}
Now I far I understand return->response()->json([]) doesn't send image file. How I can return all data together to frontend app ?
you have the option to return the images from original server which they are stored in or you can return an encoded version of the image as string and in front end reconstruct it.
$path = 'myfolder/myimage.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
And then use it in front like this :
var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);
This is the link for second part.
You can use Storage::url()
$st=\Illuminate\Support\Facades\Storage::disk('do_spaces')->url($claim->images->front_image);
dd(url($st));
Storage::url() return image path and then url() will return full url path
"http://127.0.0.1:8000/storage/imagefolder/filename"
Make sure to symbolic link to storage folder by running following command
php artisan storage:link
Also you can do the following without storage url
asset('storage/'.$claim->images->front_image)
I am developing a file system management using laravel 8.
I created a function that accept file.
public function uploadExperiment(Request $request)
{
$file = $request->file('file');
$uniqueId = time();
$fileName = $file->getClientOriginalName();
$filePath = $uniqueId . '/' . $fileName;
Storage::disk('local')->put($filePath, file_get_contents($file));
return response()->json(["success"=>true]);
}
I need to track the uploaded size during the uploading process and this progress I need to save it in a database.
For example, If I want to upload a file with 2GB of size, It will takes time. So any idea about how to track it?
maybe do you want create this:
https://www.itsolutionstuff.com/post/php-laravel-file-upload-with-progress-bar-exampleexample.html
to get size file upload in laravel use:
$size = $request->file('file')->getSize();
maybe could use this for get % of your upload you can use jquery. but if you want to do in php, with this example i think that you have one idea that you could to do:
function timeout_trigger() {
var loaded = file.getLoaded(); // loaded part
p = parseInt(loaded / size);
$(".progress").css("max-width",p+"%");
$(".progress-view").text(p+"%");
if(p!=100) {
setTimeout('timeout_trigger()', 20);
}
}
timeout_trigger();
i think that you have one form and you send it with POST for this use this function.
this is my scenario:
I have a Laravel 6.x application and I'm using the FlySystemAzureBlobStorage package to store images on Azure Blob Storage.
Then I want to use the InterventionImageCache package to get and cache the images for faster client's downloads in different sizes.
I've already done it in this way:
public static function getImageResponseForApi($storageDiskName, $imagePath, $width = null, $height = null)
{
//check if the image exists on disk
$exists = empty($storageDiskName) ?
Storage::exists($imagePath) :
Storage::disk($storageDiskName)->exists($imagePath);
if ($exists) {
$image = empty($storageDiskName) ?
Storage::get($imagePath) :
Storage::disk($storageDiskName)->get($imagePath);
if (!empty($width) || !empty($height)) {
//use the image cache function to get the cached image if exists
$image = \Image::cache(function ($ima) use ($image, $width, $height) {
//check if height and with are higher than original or not
$ima->make($image)->resize($width, $height, function ($constraint) {
$constraint->aspectRatio();
$constraint->upsize();
});
});
}
$sizes = getimagesizefromstring($image);
$headers = [
'Content-Length' => strlen($image),
'Content-Type' => $sizes["mime"]
];
return \Response::make($image, 200, $headers);
} else {
return null;
}
}
There is a problem working in this way: I must download the image from azure blob storage before the system can check if a resized cached version of it exists.
The Azure package i'm using doesn't provide the possibility to get the image paths, so I can't find another solution to my problem.
So, is there a way to achieve the image caching without I have to download the file every time?
I use a separate route for showing/caching the image in my blade.
I store the image as BLOB in MYSQL PRODUCT table identified by product_id
BLADE:
<img src="/dbimage/{{$product->id}}.png" >
ROUTE:
Route::get('/dbimage/{id}',[ProductImageController::class, 'getImage']);
CONTROLLER:
class ProductImageController extends Controller
{
public function getImage($prodcutImageID){
$productID=explode(".",$prodcutImageID);
$rendered_buffer= Product::all()->find($productID[0])->image;
$response = Response::make($rendered_buffer);
$response->header('Content-Type', 'image/png');
$response->header('Cache-Control','max-age=2592000');
return $response;
}
}
This makes the browsers cache the images
I need to store images in a backend for logged in users. The stored images need to be protected and not visible from the outside (public). I choosed a "storage" folder for this.
I came up with this in my Controller:
public function update(Request $request, $id)
{
//Show the image
echo '<img src="'.$_POST['img_val'].'" />';
//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
//Decode the string
$unencodedData=base64_decode($filteredData);
//Save the image
$storagepath = storage_path('app/images/users/' . Auth::user()->id);
$imgoutput = file_put_contents($storagepath.'/flyer.png', $unencodedData);
return view('backend.flyers.index')->withImgoutput($imgoutput)
//->withStoragepath($storagepath);
}
after hitting the save button, which triggers the update() I am able to see the image in my view, and it is also stored in my folder (current users=10) "storage/app/images/users/10/flyer.png"
my question is how can I access the image path?
I want to show the stored image with img src="">. I have no idea what to put inside "src= ..."
While dealing with user file uploads in web applications, the major aspect is about user's content's security.
One should use secure way to upload private files of a user in web applications.
As in your case, you want to access user's image outside public folder.
This can be done in a most secure way as given below.
First of all create a directory right in the root directory of Laravel (where the public folder is located), let the directory's name be uploads. Use this directory to upload private user files.
In the case of images create an another directory inside uploads as uploads/images/ inside uploads directory so that you can have a different storage locations for different type of files.
Remember to upload the image in images directory with a different name and without their extensions so that it looks like a extension-less file.
Keep the file name and its extension in the database which can be used later to retain image's location.
Now you need to create a separate route to show user's image.
Route::get('users/{id}/profile_photo', 'PhotosController#showProfilePhoto')->name('users.showProfilePhoto');
PhotosController.php
class PhotosController extends Controller {
private $image_cache_expires = "Sat, 01 Jan 2050 00:00:00 GMT";
public function showProfilePhoto($id) {
$user = User::find($id);
$path = base_path() . '/uploads/images/';
if($user && $user->photo) // Column where user's photo name is stored in DB
{
$photo_path = $path . $user->photo; // eg: "file_name"
$photo_mime_type = $user->photo_mime_type; // eg: "image/jpeg"
$response = response()->make(File::get($photo_path));
$response->header("Content-Type", $photo_mime_type);
$response->header("Expires", $this->image_cache_expires);
return $response;
}
abort("404");
}
}
The method above inside PhotosController - showProfilePhoto($user_id) will run as soon as you access the route named - users.showProfilePhoto.
Your HTML code will look like this.
<img src="<?php echo route('users.showProfilePhoto', array('id' => $user->id)); ?>" alt="Alter Text Here">
The above code will work like a charm and the image will be shown to the user without declaring/publishing the proper image path to public.
According to me this is the secure way to deal with file uploads in web applications.
You can do this like this:
Route::get('images/{filename}', function ($filename)
{
$path = storage_path() . '/' . $filename;
if(!File::exists($path)) abort(404);
$file = File::get($path);
$type = File::mimeType($path);
$response = Response::make($file, 200);
$response->header("Content-Type", $type);
return $response;
});
Reference:
Laravel 5 - How to access image uploaded in storage within View?
Or Alternatively you can use this library: https://github.com/thephpleague/glide
Just use composer to install it in your project
By default, this will render images from your storage, and allow you to do all sorts of things with it such as cropping, color correction etc.
Reference:
http://glide.thephpleague.com/
https://laracasts.com/discuss/channels/laravel/laravel-5-how-can-we-access-image-from-storage?page=1
Atimes you might have some images you do not wish to store in public directory for some various reasons.
Although storing your images has lots of advantages.
There are many ways you can achieve this, however I have this simple solution.
You should create a helper class like so if already don't have one
<?php namespace App\Services;
class Helper
{
public function imageToBase64($path)
{
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
return 'data:image/' . $type . ';base64,' . base64_encode($data);
}
}
Then in your view (blade)
#inject('helper', 'App\Services\Helper')
<img width="200" height="250" src="{{$helper->imageToBase64(storage_path('app/images/users/' . Auth::user()->id)}}">
It will work 100% work. Open file filesystem in app/config/filesystem.php and write like that
'profile' => [
'driver' => 'profile',
'root' => '/home/folder/public_html/projectname/public/profiles',
],
Add this file at top
use Illuminate\Support\Facades\Storage;
My variable name is
$directoryName = 'profile';
$imageName = $request->image; // image is array of base64 encoded urls
$directory_path ='profiles';
Below function save your file in public/profiles folder.
function UploadImagesByBase64($directoryName, $imageName,$directory_path)
{
$data = array();
$image = $imageName;
foreach ($image as $image_64) {
if($image_64 !=null){
$extension = explode('/', explode(':', substr($image_64, 0, strpos($image_64, ';')))[1])[1]; // .jpg .png .pdf
$replace = substr($image_64, 0, strpos($image_64, ',')+1);
// find substring fro replace here eg: data:image/png;base64,
$image = str_replace($replace, '', $image_64);
$image = str_replace(' ', '+', $image);
$imageName = Str::random(10).time().'.'.$extension;
Storage::disk($directoryName)->put($imageName, base64_decode($image));
$data[] = $directory_path.'/'.$imageName;
}
}
$imageName = implode(',', $data);
return $imageName;
}
I want to have a Route that takes image Dimension and source and return Cropped and resized image via timthumb php script.
I put timthumb.php file in a folder in public directory and I wrote this Route:
Route::get('/showImage/{w}/{h}/{src}', function ($w , $h , $src) {
$img = 'public/plugins/timthumb/timthumb.php?src='.$src.'&w='.$w.'&h='.$h;
return Response::make($img, 200, array('Content-Type' => 'image/jpeg'));
})->where('src', '[A-Za-z0-9\/\.\-\_]+');
But nothing happen.
How can I access to timthumb.php file and send it required parameters and get result image?
Update:
this is structure of Public directory and placement of timthumb and images folder :
According to , I try :
$img = 'public/plugins/timthumb/timthumb.php?src=../../'.$src.'&w='.$w.'&h='.$h;
And :
$img = 'public/plugins/timthumb/timthumb.php?src=public/'.$src.'&w='.$w.'&h='.$h;
But none of them does not work for bellow URL:
http://localhost:8000/showImage/100/200/upload/slideshow/slide2.jpg
I suggest using league/glide. Watch Using Glide in Laravel to get started.
The better way to use timthumb image in Laravel using intervention/image
Install this package.
Update your Route:
Route::get('showImage/{w}/{h}/{src}', function ($w , $h , $src)
{
$img_path = public_path().'/'.$src;
$img = Image::make($img_path)->resize($w, $h);
return $img->response('jpg');
})->where('src', '[A-Za-z0-9\/\.\-\_]+');
OR Image Cache
Install intervention/imagecache package
Route::get('showImage/{w}/{h}/{src}', function ($w , $h , $src)
{
$img_path = public_path().'/'.$src;
$img = Image::cache(function($image)use($w,$h,$img_path) {
return $image->make($img_path)->resize($w, $h);
});
return Response::make($img, 200, ['Content-Type' => 'image/jpeg']);
})->where('src', '[A-Za-z0-9\/\.\-\_]+');
Image URL would be as below:
http://<< Domain Name >>/showImage/800/400/Desert.jpg