Filament•2mo ago

Cloudinary FileUpload Integration

I'm new in Filament, either in Laravel. I want to integrate FileUpload component with Cloudinary. I want user can upload image on the component, and its gonna store on database. I'm using this package of Cloudinary Laravel: https://github.com/cloudinary-community/cloudinary-laravel My form schema is

FileUpload::make('cover_art')
 ->disk('cloudinary')

FileUpload::make('cover_art')
 ->disk('cloudinary')

and have this function on model

public function store(Request $request)
{
    $uploadedFile = $request->file('cover_art');

    if ($uploadedFile) {
        $result = $uploadedFile->storeOnCloudinary();

        $url = $result->getSecurePath();
        return response()->json([
            'url' => $url,
            'size' => $result->getSize(),
            'fileType' => $result->getFileType(),
            'fileName' => $result->getFileName(),
            'originalFileName' => $result->getOriginalFileName(),
            'publicId' => $result->getPublicId(),
            'extension' => $result->getExtension(),
            'width' => $result->getWidth(),
            'height' => $result->getHeight(),
            'timeUploaded' => $result->getTimeUploaded(),
        ]);
    }

    return response()->json(['error' => 'No file uploaded'], 400);
}

public function store(Request $request)
{
    $uploadedFile = $request->file('cover_art');

    if ($uploadedFile) {
        $result = $uploadedFile->storeOnCloudinary();

        $url = $result->getSecurePath();
        return response()->json([
            'url' => $url,
            'size' => $result->getSize(),
            'fileType' => $result->getFileType(),
            'fileName' => $result->getFileName(),
            'originalFileName' => $result->getOriginalFileName(),
            'publicId' => $result->getPublicId(),
            'extension' => $result->getExtension(),
            'width' => $result->getWidth(),
            'height' => $result->getHeight(),
            'timeUploaded' => $result->getTimeUploaded(),
        ]);
    }

    return response()->json(['error' => 'No file uploaded'], 400);
}

and when I run it, it's got

The GET method is not supported for route livewire/upload-file. Supported methods: POST.

The GET method is not supported for route livewire/upload-file. Supported methods: POST.

on console, and

PHP Fatal error:  Trait "League\Flysystem\Adapter\Polyfill\NotSupportingVisibilityTrait" not found in C:\Users\rizky\soundmera\vendor\cloudinary-labs\cloudinary-laravel\src\CloudinaryAdapter.php on line 16

PHP Fatal error:  Trait "League\Flysystem\Adapter\Polyfill\NotSupportingVisibilityTrait" not found in C:\Users\rizky\soundmera\vendor\cloudinary-labs\cloudinary-laravel\src\CloudinaryAdapter.php on line 16

on terminal Is there any mistake? I'm very confused. Or maybe anyone have some article/video about this? Thanks

GitHub

GitHub - cloudinary-community/cloudinary-laravel: Laravel SDK for C...

Laravel SDK for Cloudinary. Contribute to cloudinary-community/cloudinary-laravel development by creating an account on GitHub.

7 Replies

awcodes•2mo ago

Why are you overriding the store method. The cloudinary disk should work as is. Just like an s3 disk. Did you define the cloudinary disk in the filesystem config file?

kisut•2mo ago

Yes I define the cloudinary disk

'cloudinary' => [
                'driver' => 'cloudinary',
                'cloud_name' => env('CLOUDINARY_NAME'),
                'api_key'    => env('CLOUDINARY_API_KEY'),
                'api_secret' => env('CLOUDINARY_API_SECRET'),
                'subdomain'  => false, // Set to `false` to use the default `res.cloudinary.com` domain
            ],

'cloudinary' => [
                'driver' => 'cloudinary',
                'cloud_name' => env('CLOUDINARY_NAME'),
                'api_key'    => env('CLOUDINARY_API_KEY'),
                'api_secret' => env('CLOUDINARY_API_SECRET'),
                'subdomain'  => false, // Set to `false` to use the default `res.cloudinary.com` domain
            ],

I do delete the overriding store method but the error persists in the browser console and the terminal. What do you think is going wrong?

awcodes•2mo ago

Without being able to track it, hard to say. But it should just be a matter of using ->disk(‘cloudinary’) on your FileUpload form fields. Would be surprised if it matters but for s3 it also needs ->visibilty(‘private’). So maybe that’s needed for cloudinary too, but I don’t see why it would.

kisut•2mo ago

I'm also confused as to where track the mistake is. The browser console always got

The GET method is not supported for route livewire/upload-file. Supported methods: POST.

The GET method is not supported for route livewire/upload-file. Supported methods: POST.

error. If I add ->visibility('private (or public)') the error persists. On the readme of the package, it should use

$uploadedFileUrl = cloudinary()->upload($request->file('file')->getRealPath())->getSecurePath();

$uploadedFileUrl = cloudinary()->upload($request->file('file')->getRealPath())->getSecurePath();

but I'm not sure how to implement this into FileUpload form fields.

awcodes•2mo ago

This sounds like a server issue where it’s trying to serve livewire.js as a static assest instead of serving it through php.

kisut•2mo ago

I'm still using local server btw. Do you know how to solve it?

awcodes•2mo ago

Without seeing the code base I don’t. Sorry.

Gaming

Programming

Cloudinary FileUpload Integration