I wrote a code to upload an image file and that is already working, I also can save the image url in my database. The problem is the image is not loaded permanently. Which means I can see the image after I uploaded it, but the moment I save it, the url is not valid anymore. Does anyone know how to fix it? I mean store the image permanetly on my project. I want users to upload and use their own images? Thank you for youre help.
uploading in template
<input style="margin-left: 35px" type="file" #change="onFileChange" />
Displaying the image
<img v-if="data.image" :src="data.image" style="max-width:450px;vertical-align:middle;margin:0px 5px 5px"/>
script method
onFileChange()e {
const file = e.target.files[0];
this.data.image = URL.createObjectURL(file);
},```
You could do something like this in your Controller:
$request->validate([
'image' => 'required|image|mimes:jpeg,jpg,png,gif|max:2048',
]);
$imageName = time().'.'.$request->image->extension(); //What you store in DB
$request->image->move(public_path('images'), $imageName); //Put the image in a public folder
And from there you could access it via URL.
Related
Consider the case where a user uploaded his profile image and it was placed in the project as public/userprofileimage.jpg when the repository was at version 1.0.0.
The project was then pulled from GitHub, changed, or new code was added, and it was pushed to the repository, becoming version 2.0.0.
How can I add the latest uploaded photos to the repository each time a user uploads something?
Will the user-uploaded picture be in 2.0.0?
or the image will be lost
What should I do with the user-uploaded images if that's the case so they don't get lost in version control?
if($request->hasFile('image1') && $request->hasFile('image2') && $request->hasFile('image3') && $request->hasFile('image4')){
$formFields['media'] =
$request->file('image1')->store('postUploads','public') . ','
. $request->file('image2')->store('postUploads','public') . ','
. $request->file('image3')->store('postUploads','public') . ','
. $request->file('image4')->store('postUploads','public');
}
and did that
php artisan storage:link
l retrieve the image like that
<img src="{{asset('storage/' . $image)}}" class="md:w-48 m-2 rounded" alt="">
is that the right way?
thanks
A better approach
use Illuminate\Support\Facades\Validator;
public function store(Request $request){
$validate = Validator::make($request->all(), [
$request->file('image1') => 'required|mimes:jpg,png,jpeg',
$request->file('image2') => 'required|mimes:jpg,png,jpeg',
$request->file('image3') => 'required|mimes:jpg,png,jpeg',
$request->file('image4') => 'required|mimes:jpg,png,jpeg',
]);
if( $validate->fails() ){
return response($validate->errors(), 400);
}
//anything below here means validation passed. You can then store your images
$path1 = $request->file('image1')->store('profile_pictures','public');
$path2 = $request->file('image2')->store('profile_pictures','public');
$path3 = $request->file('image3')->store('profile_pictures','public');
$path4 = $request->file('image4')->store('profile_pictures','public');
}
Note that this can even be further simplified by saving your images to an array. I did not use that approach as I am not sure whether all the images are profile images or will be used differently.
Your images will be stored in /storage/profile_pictures and Laravel will automatically generate an image name for you.
On your view you can call the images using the asset helper as below
<img src="{{ asset($path1) }}"/>
This is assuming you are sending the image paths individually, which also can be simplified based on your application. Hope this give you an idea.
Image is not displaying in the nav bar after uploading it to the database. I think there is something wrong with the file storage path, but I don't know where I am making a mistake.
This is the image storage path
$image = $request->file('picture')
$path = $image->store('public/images');
$yourModel = new User();
$yourModel->name = $validateData['name'];
$yourModel->email = $validateData['email'];
$yourModel->password = $validateData['password'];
$yourModel->image = $path;
you store the image in the public iamges and in blade you say show the iamge form the storage/images that is incorrect you need to change the ima html to <img class="" src="{{ asset('images/' . Auth::user()->image) }}">
In my application I add photos that are then scaled, I call them to my views using {{asset()}}
Everything works fine, but for my mobile app I need to send to API URL of image instead of just image path called from db.
That's how I save images now:
$image = $request->photo_patch;
$filename = time() . '.' . $image->extension();
$event->photo_patch = $filename;
$image_resize = Image::make($image->getRealPath());
$image_resize->resize(1200, 630);
$image_resize->save('storage/images/' . ($filename));
$event->save();
Example of saved image name:
1630531230.jpg
That's how I get image on view:
<img src="{{ asset('storage/images/' . $eventView->photo_patch) }}">
What I tried:
$url = Storage::url($filename);
$event->photo_patch = $url;
After this file name looks like this
"/storage/1631043493.png"
But that isnt really URL
What can I do to save photo path like this:
"localhost/storage/images/1631043493.png"
Edit:
# Фарид Ахмедов suggested to call whole URL in API.
How can I do that then?
This is what I tried:
Route::get('/events/{id}', function($id){
return [
Event::findOrFail($id),
'image' => asset('storage/images/'.$this->photo_patch)
];
});
That's it.
url(Storage::url($filename));
But I think, you don't need to save the whole path. You can convert it to full URL before sending response.
I am saving an uploaded image like this:
$profile_picture = $request->file('profile_picture');
$user->profile_picture = $profile_picture->getClientOriginalName();
Storage::disk('public')->put( $user->profile_picture, $request->file('profile_picture') );
and then I am trying to display that image in HTML with:
<img class="img-fluid" src="{{ asset('storage/'. Auth::user()->profile_picture) }}">
the image is being saved in storage/app/public, but the image is not showing in html, how do i go about this?
thank you
You may use response method on a Laravel filesystem
return Storage::disk('public')->response($user->profile_picture);
N.B: In order to do that, you need a Laravel route. The above code should be located in a controller method
I have a form include image, this image i get from webcam and store it to img tag, how can i save data from attribute src, usually to store file using upload file.
<img id="myImage" src="data:image/png;base64,IvBo9Vraf...." alt="image from snapshot" />
I have read similar questions but not as i expected
With this code you can saved the files.
$filename = $request->file('myFile')->store('files');
$data= new FileModel();
$data->file = $filename;
$data->save();
or you can try below method
$myImage = $request->file('myFile');
if(!in_array($myImage->getMimeType(), ['image/jpeg', 'image/png'])){
abort(500, 'Unsupported Image Type');
}
$imageName = str_replace('myImages/', '', $myImage->store('myFile'));
return ['my_image'=>$profile_picture_name];