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')

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);
}

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.

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

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.

awcodes•5/16/24, 12:17 AM

Why are you overriding the store method. The cloudinary disk should work as is. Just like an s3 disk.

awcodes•5/16/24, 12:18 AM

Did you define the cloudinary disk in the filesystem config file?

Aawcodes Why are you overriding the store method. The cloudinary disk should work as is. ...

kisutOP•5/16/24, 12:29 AM

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•5/16/24, 12:31 AM

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.

awcodes•5/16/24, 12:33 AM

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.

Aawcodes Without being able to track it, hard to say. But it should just be a matter of u...

kisutOP•5/16/24, 12:44 AM

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.

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

awcodes•5/16/24, 12:46 AM

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

Aawcodes This sounds like a server issue where it’s trying to serve livewire.js as a stat...

kisutOP•5/16/24, 12:51 AM

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

awcodes•5/16/24, 1:08 AM

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

Cloudinary FileUpload Integration

Similar Threads

Similar Threads

Similar Threads