i am adding image to cloudinary from laravel filament FileUpload field, but that image not showing i
😢
44 Replies
Check your browser logs, did you run php artisan storage:link ?
yes
i stored cloudinary image url in database
You said yes? What is the browser console log saying
Is this on loading after it saved?
there is no errors in console
when i save its working fine and i store image in cloudinary and also stoer image link in DB
when i go for edit form its not showing
Check you are casting the media to array in the model
am i correct.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
use HasFactory;
protected $fillable = ['name', 'slug', 'country', 'language', 'file'];
protected $casts = [
'file' => 'array',
];
public function posts()
{
return $this->hasMany(Post::class);
}
}
file is image name
but its not a array right?The file upload component allows multiples and runs of an array as standard so you need to cast to array as per:
https://filamentphp.com/docs/2.x/forms/fields#file-upload
If you're saving the file URLs using Eloquent, you should be sure to add an array cast to the model property:
So yes, then in theory if it saves it should load as an array which will render the first one if only 1 file is allowed to be uploaded.
i stored like this
this is my field ImageUpload::make('file')
and this is my logic
<?php
namespace Ranium\FilamentFieldCloudinary\Forms\Components\Fields;
use Livewire\TemporaryUploadedFile;
use Cloudinary\Api\Upload\UploadApi;
use Illuminate\Support\Facades\Storage;
use Filament\Forms\Components\BaseFileUpload;
use Filament\Forms\Components\FileUpload as ComponentsFileUpload;
class ImageUpload extends ComponentsFileUpload{
protected function setUp(): void
{
parent::setUp();
$this->acceptedFileTypes(['image/jpeg', 'image/png']);
$this->rules(['required', 'file', 'mimetypes:image/jpeg,image/png', 'max:10240']);
$this->saveUploadedFileUsing(static function (BaseFileUpload $component, TemporaryUploadedFile $file): ?string {
$uploaded_metadata = (new UploadApi())->upload($file->getRealPath());
return $uploaded_metadata['url'];
});
}
}this shouldn't be a filament issue as filament use laravel's storage driver. perhaps you should configure that to be working with laravel before using it with FileUpload field
how can i do that please give me an example or ideas
Plese do not double post. You should not use Plugin-Developers for support. This is the channel for support, your DB looks generally good. so you'll need to spend some time debugging.
okay sir
what will i need to do , to solve this problem
Debug it
i am searching many reference but not working, i got this error Can't find folder with
path https:/res.cloudinary.com/duzgfiupv/image/upload/v1689585868You should be using a Cloudinary storage driver, i.e.:
https://github.com/yoelpc4/laravel-cloudinary
GitHub
GitHub - yoelpc4/laravel-cloudinary: Laravel Cloudinary filesystem ...
Laravel Cloudinary filesystem cloud driver. Contribute to yoelpc4/laravel-cloudinary development by creating an account on GitHub.
unless it is S3 compatible it probably wont work
i used this one https://github.com/carlosocarvalho/flysystem-cloudinary but i got same error path https:/res.cloudinary.com/duzgfiupv/image/upload/v1689585868
GitHub
GitHub - carlosocarvalho/flysystem-cloudinary: Adapter for theleagu...
Adapter for theleague php flysystem for Cloudinary - GitHub - carlosocarvalho/flysystem-cloudinary: Adapter for theleague php flysystem for Cloudinary
If you’re using a driver you shouldn’t be storing the full url in the db. And it can’t find that folder because the v1234 path segment is not an actual folder on cloudinary. Those are used by cloudinary for rendering images back out. It’s essentially a hash for serving cached transformations.
i need to store image name only right ?
Image name and directory if applicable.
Do a regular FileUpload to see how data should be stored, both with and without ->directory(). And also look in the storage directory to see how it is all applied.
Of course this is only as good as the cloudinary driver you are using. I have yet to find a really good one.
But I think a better understanding of the upload process itself will help you to figure this out.
okay this is my upload process.
<?php
namespace Ranium\FilamentFieldCloudinary\Forms\Components\Fields;
use Livewire\TemporaryUploadedFile;
use Cloudinary\Api\Upload\UploadApi;
use Illuminate\Support\Facades\Storage;
use Filament\Forms\Components\BaseFileUpload;
use Filament\Forms\Components\FileUpload as ComponentsFileUpload;
class ImageUpload extends ComponentsFileUpload{
protected function setUp(): void
{
parent::setUp();
$this->acceptedFileTypes(['image/jpeg', 'image/png']);
$this->disk('cloudinary');
$this->rules(['required', 'file', 'mimetypes:image/jpeg,image/png', 'max:10240']);
$this->saveUploadedFileUsing(static function (BaseFileUpload $component, TemporaryUploadedFile $file): ?string {
$uploaded_metadata = (new UploadApi())->upload($file->getRealPath());
return $uploaded_metadata['url'];
});
}
}
You shouldn’t need to override the save function unless you are doing something else with the data.
The driver should take care of that for you.
okay i just need to define the driver only right?
Yea. The disk is your driver. So ‘cloudinary’, ‘s3’, etc.
It should be a disk name setup in the file system config.
its working but video and audio file not showing in edit form
only image and doc showing !
?
I’m not sure filepond supports video and audio.
but its shows when i add !!
Not sure then. About to be on the road for 8 hours. Hopefully someone else can help. If not I can get back to you later.
okay thanks
is anyone here to help me???
I'll help you get S3 set up or a similar service like Digital Ocean Spaces. But I've never used Cloudinary and I don't guarantee support for it.
okay, i think its based on filament. its working but video and audio file not showing in edit form
only image and doc showing !
i dont think video and audio gets previewed by filepond.
okay but its working when i upload ( preview working )
??
Dude, it’s a community support where people helps when they know how to and also when they are free and available
Just wait patiently or use what is officially supported out of the box if you in rush
okay bro i will wait
Preview on upload comes from your local filesystem unlike preview after upload
how can i preview cloudinary video or audio any ideas?
filepond doesn't come with video or audio plugin
Create a placeholder, put your video or audio link, on click of that link preview/play in new page or modal or itself.
okay thanks, any example's ? or link's?
okay thanks, let you know the status