Laravel 9 - Upload Image - Image does not display - php

I'm creating a shop, with an upload image in Laravel 9.
Everything is on my database, and my image is sent on file storage/app/public/nameofthefile/nameoftheimage.png.
But my image does not appear on my website like this :
As you can see on the console, the image has the correct direction I give you the code of my controller, my html page :
My CONTROLLER :
public function CreateArticleAction(Request $request) {
$request->validate([
'nom' => ['required'],
'description' => ['required'],
'prix' => ['required'],
'quantité' => ['required'],
'img' => ["required", "image", "mimes:jpg,jpeg,png,gif,svg,webp", "max:2048"],
]);
$path = $request->file('img')->store('boutique-storage', 'public');
$iduser = Session::get('iduser');
$article = new Boutique();
$article->iduser = $iduser;
$article->nom = request('nom');
$article->description = request('description');
$article->prix = request('prix');
$article->quantité = request('quantité');
$article->img = $path;
$article->save();
return redirect('/boutique');
}
My HTML page :
#foreach ($boutiques as $boutique)
<div class="produit">
<img src="{{ asset('storage/app/public/' . $boutique->img) }}" alt="Produit" class="img-produit" />
<p>{{ $boutique->nom }}</p>
<p>{{ $boutique->description }}</p>
<p>{{ $boutique->prix }}</p>
<p>{{ $boutique->quantité }}</p>
<div>
<a class="text-danger" href="/delete-article/{{ $boutique->idproduit }}">Supprimer</a>
<a class="text-primary" href="/FormUpdate/{{ $boutique->idproduit }}">Modifier</a>
</div>
</div>
#endforeach
And the DIRECTION :
I think you can see everything is ok, each data is sent correctly on the database but why my image does not appear ??
Thanks a lot !

Try run this command
php artisan storage:link

Ah ok so I forgot to add this on .env file : FILESYSTEM_DISK=public
Now with the command php artisan storage:link it works :D

replace
<img src="{{ asset('storage/app/public/' . $boutique->img) }}"
with
<img src="{{ asset($boutique->img) }}"

Related

Laravel Livewire: Temporary Preview Urls Not Working on Local Machine

I tried uploading the file via Laravel Livewire using Livewire\WithFileUploads and I tried to get the preview of the image selected, to be uploaded, by implementing the method shown in the official documentation of livewire, but inspite of doing exactly the same I don't get to see the preview.
What I get to see is
Broken Image as preview
I also tried to inspect the element and get the url and the URL I got was
http://192.168.1.33:8000/livewire/preview-file/tmRlboRMpPEv3MMOiX5iu6vPph0PLC-metacHJvZmlsZXBpYy5qcGc=-.jpg?expires=1654720661&signature=e0d825c78ae9bcbc8123b72a542ba827d984810aa32dee8527e63e0c9babf27a
I tried opening this URL and got to see A big black screen with a grey square in center
I am not sure where am I going wrong here. I am quickly adding up controller, blade and config, hoping that I get some solution for it, as I also referred to this solution but it didn't help
Livewire Controller
use Livewire\Component;
use Livewire\WithFileUploads;
class CenterRegistration extends Component
{
use WithFileUploads;
public $logo;
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function render()
{
return view('livewire.logo-uploader');
}
public function submit()
{
$this->validate();
}
protected function rules()
{
return [
'logo' => [
'required',
'mimes:png,jpg',
'max:2048',
],
];
}
}
Livewire Blade
<form wire:submit.prevent="submit">
<div class="input-group shadow-sm">
<div class="input-group-prepend input-group-text bg-light rounded-5">
{{ Form::label('logo','Logo',[
'for' => 'logo',
'class' => 'rounded-0 required',
]) }}
</div>
{{ Form::file('logo',[
'id' => 'logo',
'class' => "form-control rounded-5",
'accept' => 'image/*',
'required',
'wire:model' => "logo"
]) }}
</div>
#if ($logo)
<div>
<img src="{{ $logo->temporaryUrl() }}"/>
</div>
#endif
#error('logo') <span class="error text-danger">{{ $message }}</span> #enderror
<button class="btn btn-primary rounded-pill text-center mt-3" style="width: 20%;" type="submit">submit</button>
</form>
Basic Info
Laravel : 9.17.0 | Xampp
Check your storage folder permission
composer update
chmod -R 777 storage
chmod -R 777 public/storage
chmod -R 777 bootstrap/cache
php artisan optimize:clear
php artisan optimize

No Image showing in a home Laravel

in laravel, i have to link the storage using php artisan storage:link so i can show the image that when user to post a article with a image, the image will be shown. but for now, the image didn't show up. How do i fix it.
here's the code from views/post/index.blade.php
<tbody>
#foreach($posts as $post)
<tr>
<td>
<img src="{{ asset($post->image) }}" alt="">
</td>
<td>
{{ $post->title }}
</td>
<td>
<a href=" {{ route('categories.edit', $post->category->id) }}">
{{ $post->category->name }}
</a>
</td>
when the user post a image, the image will be stored in the linked storage that i've doing before. so here's the code from postscontroller.php if i change the 'posts' to 'post' it says error. because i didn't suitable for the function 'posts' that i write before.
public function store(CreatePostRequest $request)
{
// upload image omegalul
$image = $request->image->store('posts');
// create the post
$post = Post::create([
'title' => $request->title,
'description' => $request->description,
'content' => $request->content,
'image' => $image,
'published_at' => $request->published_at,
'category_id' => $request->category,
'user_id' => auth()->user()->id,
]);
if ($request->tags) {
$post->tags()->attach($request->tags);
}
// flash a message
session()->flash('success', 'Post created successfully');
// redirect the user
return redirect(route('posts.index'));
}
if you guys see any problems that i didn't appeared here, just ask me. Thank you guys so much
If you are working with Laravel Storage it's recommended to use the storage functions to store, get or delete media files.
Use theses commands to do it:
To store:
Storage::disk(config('filesystems.default'))->put($path, $file);
To get:
Storage::disk(config('filesystems.default'))->url($file);
To remove:
Storage::disk('local')->delete($path);
Your code will be like this:
<tbody>
#foreach($posts as $post)
<tr>
<td>
<img src="{{ Storage::disk(config('filesystems.default'))->url($post->image) }}" alt="">
</td>
<td>
{{ $post->title }}
</td>
<td>
<a href=" {{ route('categories.edit', $post->category->id) }}">
{{ $post->category->name }}
</a>
</td>
And:
public function store(CreatePostRequest $request)
{
// upload image omegalul
$image = Storage::disk(config('filesystems.default'))->put('posts', $request->image);
Note: Don't forget to check if your filesystem is setted like 'local' - if you are using local storage.

Problem with Load More Button in laravel 6 and ajax

so i have a problem in my laravel application when i access to the route where i posted the json i get the 500 error so there is the source :
the route :
web.php
Route::get('loadmore', 'MoviesController#loadmore');
The controller :
public function loadmore(Request $request)
{
$movies_list = new Movies;
if ($request->has('page')) {
$movies_list = Movies::where('status', 1)->orderBy('id', 'DESC')->paginate(4);
}
$returnHTML = view('pages.ajax_movie', compact('movies_list'))->render();
return response()->json([
'html' => $returnHTML,
'page' => $movies_list->currentPage(),
'hasMorePages' => $movies_list->hasMorePages(),
])
}
and finally the view :
location : pages/ajax_movies.blade.php
#foreach($movies_list as $movies_data)
<a href="{{ URL::to('movies/'.$movies_data->video_slug.'/'.$movies_data->id) }}" class="movie">
<span class="r"><i class="i-fav rating"><i>{{$movies_data->imdb_rating}}</i></i></span>
<img src="{{URL::to('upload/source/'.$movies_data->video_image_thumb)}}" alt="" title="">
<span class="title">{{$movies_data->video_title}}</span>
<span class="ribbon ">
<span>{{$movies_data->video_access}}</span>
</span>
</a>
#endforeach
everyone can help me ?
thank you in advance

Laravel 5.4 show uploaded image issue

I'm learning Laravel 5.4 and for now I'm trying to upload image and show uploaded image in html.
It seems files are uploaded successfully but when I want to show the image in Html, there's 404 error for images and nothing will display.
This is my settings and code:
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required|string|max:255',
'desc' => 'required|string',
'width' => 'required|numeric',
'height'=> 'required|numeric',
'artist'=> 'required|exists:artists,id',
'photo' => 'required|file'
]);
$artistInfo = Artist::find($request->artist);
$fileExtension = $request->file('photo')->extension();
$originalFileName = $request->file('photo')->getClientOriginalName();
$filePath = Storage::putFile('public', $request->file('photo'), 'public');
Photo::create([
'name' => $request->name,
'origName' => $originalFileName,
'url' => $filePath,
'artist_id' => $request->artist,
'desc' => $request->desc,
'width' => $request->width,
'height' => $request->height
]);
return $filePath;//this for test
}
And my Blade:
#forelse($photos as $photo)
<tr>
<td>{{ $photo->name }}</td>
<td>
<img class="img" src="{{ asset( 'public/storage/' . $photo->url) }}" alt="{{ $photo->name }}" /></td>
<td>{{ $photo->artist->name . ' ' . $photo->artist->family }}</td>
<td>{{ $photo->desc }}</td>
<td>{{ $photo->width }}</td>
<td>{{ $photo->height }}</td>
<td class="text-center">
<a href="{{ route('artists.edit', ['id' => $photo->id]) }}">
<i class="material-icons">edit</i>
</a>
</td>
<td class="text-center">
<a href="{{ route('artists.edit', ['id' => $photo->id]) }}">
<i class="material-icons">assignment_turned_in</i>
</a>
</td>
</tr>
#empty
<tr>
<td>There's no photo Yet</td>
<td>—</td>
<td>—</td>
<td>—</td>
<td>—</td>
</tr>
#endforelse
NOTE :
I made a symbol link to my public folder using php artisan storage:link and symlink works fine...
I changed this line in blade:
<img class="img" src="{{ asset( 'public/storage/' . $photo->url) }}" alt="{{ $photo->name }}" /></td>
and tried these manners:
<img class="img" src="{{ asset(storage_path() . ($photo->url)) }}" alt="{{ $photo->name }}" /></td>
<img class="img" src="{{ storage_path() . ($photo->url) }}" alt="{{ $photo->name }}" /></td>
$photo->url has image filename for example jDHPOTh7iejFABANSzasNbBWJ09DqLbqJb8ymJhv.png
Would you please let me know which part is my problem?
Thanks in Advance
UPDATE :
I'm using PhpStorm Ide and when I download my public folder to my project -or synchronize this- my symbol link does not appear in public folder list...
This is ls from my public folder :
And this is my phpStorm project view AFTER download a fresh copy of public folders in my host:
And as a note :
I started to develop this website in windows at first and then I did move entire project to my linux remote server...
For anyone looking for answer to this question, please follow this link contains great answer
https://stackoverflow.com/a/30191854/417899
Thanks to all for participating, but in my case there was a tricky issue...
I was logged in to my server using root and when I did type php artisan storage:link, the symbol link was made by root as owner and it seems Apache didn't have permission to access this symbol link and because of that, the files was not accessible in http.
SOLUTION
I have a vds that serve 5 different websites, so
I did simply change the owner of symbol link's owner to my relative username and the problem solved...
chown -R usergroup:username /path/to/link
That's it...
I think the issue is here:
$filePath = Storage::putFile('public', $request->file('photo'), 'public');
here you are putting your file on public folder and here:
<img class="img" src="{{ asset( 'public/storage/' . $photo->url) }}" alt="{{ $photo->name }}" /></td>
you are trying to get it from public/storage/. So change the path like:
<img class="img" src="{{ asset( 'public/' . $photo->url) }}" alt="{{ $photo->name }}" /></td>
and try again.
Note: Here uploaded images path is stored in public/image.extension, so fetching it from the same public directory

Laravel 4: moving files once uploaded

Im having problems trying to upload photos and any kind of file on my app, because the do upload but as .tmp files and they dont display properly on my view
1.-My form,Im trying to upload a member with name, group, email, description and a photo
{{Form::open(array('action' => 'AdminController#addMember','files'=>true)) }}
{{ Form::label('file','Agregar Imagen',array('id'=>'','class'=>'')) }}
{{ Form::file('file','',array('id'=>'','class'=>'')) }}
<br/>
{{Form::text('name','',array('class' => 'form-control','placeholder'=> 'Nombre'))}}
{{Form::text('group','',array('class' => 'form-control','placeholder'=> 'Cargo'))}}
{{Form::text('email','',array('class' => 'form-control','placeholder'=> 'Correo'))}}
{{Form::textarea('description','',array('class' => 'form-control','placeholder'=>''))}}
<!-- submit buttons -->
{{ Form::submit('Guardar') }}
<!-- reset buttons -->
{{ Form::reset('Reset') }}
{{ Form::close() }}
2.-My upload function in the controller
public function addMember()
{
$name = Input::file('file')->getClientOriginalName();
$newname = Input::file('file')->getFilename();
Input::file('file')->move(storage_path(),$name);
$subpath = storage_path();
$path = $subpath.'/'.$newname2;
$name2 = Input::get('name');
$email = Input::get('email');
$description = Input::get('description');
$group = Input::get('group');
DB::table('contactgroups')->insert(
array('group' => $group, 'name' => $name2, 'path' => $path, 'email' => $email, 'description' => $description)
);
$members = DB::table('contactgroups')->get();
return View::make('admin.members',['members' => $members]);
}
I know i should be using a Model to upload things on my database but that's not the problem right now
3.- My display view
#extends('layouts.main')
#section('content')
#foreach($members as $member)
<div class = "row fondue">
<h3><div class="col-md-12"><b><?=$member->name ?></b></div></h3>
<div class="col-md-4"> <img src="<?=$member->path ?>" alt="Image" class = "contact-img"></div>
<div class="col-md-4"><?=$member->description ?></div>
<div class="col-md-4"><?=$member->email ?></div>
</div>
#endforeach
#stop
and that's all...the info is saved in the database but the images are not showing properly on the view and, the files are uploaded as tmp files i dont know why
From the Laravel documentation
Moving An Uploaded File
Input::file('photo')->move($destinationPath);
Input::file('photo')->move($destinationPath, $fileName);
Source: http://laravel.com/docs/4.2/requests#files

Categories