Courses

Laravel Filament Admin v2: Practical Course

File Upload: Image Column

Previous: Slug from Name with Auto-Complete
avatar

Hello sir, When you upload an image and check on the edit form, it keeps loading and showing "waiting for size". Have you come across this? and how can I fix it? The documentation doesn't show anything of this sort. Thank you.

avatar

Not really, I don't remember seeing this, so can't help, sorry.

avatar

Hello Sir, I found the solution. The problem was the app url in the env file. It's supposed to match before it work. Thank you.

avatar
You can use Markdown
avatar

Hello my brother... I have a question, if you can help me .... when I upload an image to my resource, so that it is displayed in the ImageColumn, I get the following error: ...

Access to fetch at 'http://localhost/storage/nr75nfR7B0Wqss9eCCiO7ocsRmwLVR-metaMGFlZWUwMjk4YjBlMzRjNjE5NzcxNjcyNTM1OTlkNGQ2Njc2MmM4Mi5qcGc=-.jpg' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

avatar

So you have http://localhost vs http://127.0.0.1:8000 different URLs. My guess is that in your .env file you didn't change the APP_URL to the 127.0.0.1:8000

avatar

Thank you very much I managed to overcome that error... I already updated my APP_URL and it worked...

avatar
You can use Markdown
avatar

Thank you very much I managed to overcome that error... I already updated my APP_URL and it worked...

I want to learn how to configure the path where the images are saved, why it is saved here http://127.0.0.1:8000/admin/pastors/1/127.0.0.1:8000/storage/Me5JeKdH3OhvtxFHGaET6C3I451jPs-metaMDBjMjk1NjdmNDkzMDY4MGQ1NjA1Yjg5ZDg5NzY1NTZjMTEyMTBiZS5qcGc=-.jpg

it tells me: 404 not found

avatar
2023-01-25 12:28:43 ........................................................................................... ~ 0s

2023-01-25 12:28:50 ........................................................................................... ~ 0s 2023-01-25 12:28:50 ........................................................................................... ~ 1s WARN 127.0.0.1:52160 [404]: GET /admin/pastors/1/127.0.0.1:8000/storage/Me5JeKdH3OhvtxFHGaET6C3I451jPs-metaMDBjMjk1NjdmNDkzMDY4MGQ1NjA1Yjg5ZDg5NzY1NTZjMTEyMTBiZS5qcGc=-.jpg - No such file or directory.

avatar

Your URL is wrong. It has two times 127.0.0.1:8000

avatar

waoooo I give up... I have completely re-installed the whole laravel project with filament and I always get that error.

I definitely don't know what else to do. But thank you very much my brother...

avatar

It's an easy fix. If your app is running on localhost:8000 for instance, make sure that your app_url in the env file is the same. That will fix the issue and you will be able to find the images in:

{{asset('/storage/image_url')}}
avatar
You can use Markdown
avatar

Nice to greet you... I have managed to fix the url error... the image is being saved in: http://localhost/storage/22zjqej6Yy8K4kKudhpISYWyxT98lY-metabGlkZXIucG5n-.png

Only this time the error is because of the CORS policies, if any colleague has happened to you I would be very grateful for your help.

Request from another origin blocked: same-origin policy prevents reading the remote resource at http://localhost/storage/22zjqej6Yy8K4kKudhpISYWyxT98lY-metabGlkZXIucG5n-.png (reason: missing CORS header 'Access-Control-Allow-Origin'). Status code: 404.

THANK YOU VERY MUCH

avatar

Very weird. Why CORS error if you're loading from the SAME URL? So you load the website as http://localhost? Or maybe some port is also present, like http://localhost:8000? Those would be considered different URLs, so you should specify the URL with the port, in .env file.

avatar

Povilas.... Thank you very much I have followed your instruction and it has been positive. my APP_URL: is http://127.0.0.1:8000

and the image is being saved in: http://127.0.0.1:8000/storage/eYF3sScotbCxKWs6Bwa847AjLEwL0N-metabGlkZXIucG5n-.png

When I hit the save button the preview disappears but the spinner stop, and show the file size.

======================================================================= I click on my keyboard F12, in the console tab, it shows me the following error:

GET: http://127.0.0.1:8000/storage/eYF3sScotbCxKWs6Bwa847AjLEwL0N-metabGlkZXIucG5n-.png State: 404 Not Found Version: HTTP/1.1 Transferred: 6,84 KB (tamaño 6,60 KB) Reference policy: strict-origin-when-cross-origin

Thank you for your kindness and your help.

avatar

Sorry from here I can't debug it for you remotely further than this :)

avatar
You can use Markdown
avatar

my APP_URL variable is ok (APP_URL=http://localhost). Also, I did the "php artisan storage:link". When I upload a file, it is saved in the "public/storage" folder without any problems and a preview is displayed. When I hit the save button the preview disappears and a spinner spins endlessly.

avatar

Yes I also have this same error right now. The endless loader that runs after you save and when you check you see a 426 upgrade required error in the console.

avatar
You can use Markdown
avatar

I had the same issue, and solved it by running "run php artisan storage:link.". See https://filamentphp.com/tricks/file-upload-previews-not-loading

avatar
You can use Markdown
avatar

It works like a charm witrh one single image. As soon as you specify ->multiple() in the form for uploading images (you must of course specify in the cast section of the model that is an array), it does not work anymore. ImageColumn is expecting a single image.

avatar
You can use Markdown
avatar

I have Message table , and message table have hasmany relation in images table , i need message create and edit page i upload image and image upload in images table, how it posible

avatar

Personally, I would probably use Spatie Media Library plugin for this. It's not "images" table but "media" table, but should fit your description.

avatar

I don't use any packges, i i have message_images table, i insert message to messages table and upload images to message_images table multiple, how it posible

avatar

I don't think it's possible in easy way, at least I haven't done it myself with Filament.

avatar
You can use Markdown
avatar
You can use Markdown