Foks's avatar
Level 15

Livewire unable to have temp disk on S3

Hello,

I've an issue when I try to set the temp disk in Livewire to S3, it won't allow me to upload the file at all. But when I set the temp disk to local, I can easily upload the file to S3. What is going on with this? Livewire code.

class AddSlideModal extends Component
{
    use WithFileUploads;
    public function myfinishUpload()
    {
        $this->validate([
            'file' => 'mimes:mp4,mov,ogg,qt'
        ]);
        
        $this->file->store(auth()->user()->company->id, 's3');


        $this->showVideoUploadModal = false;

        $video = Video::create([
            'title' => $this->file->getClientOriginalName(),
            'url' => 'https://sd.dk/local/sdf.mp4',
            'company_id' => auth()->user()->company->id,
            'description' => '',
            'thumbnail' => 'temp',
        ]);

        $this->course->videos()->syncWithoutDetaching($video);


        $this->emit('videoAdded');
    }

Blade:

    <x-dialog-modal wire:model="showVideoUploadModal" id="videoModal" wire:key="video-upload-modal-course" class="mt-36">
        <x-slot name="title">
            Upload video
        </x-slot>

        <x-slot name="content">
            <input type="file" wire:model="file" wire:key="video-upload-field" class="w-full rounded-lg bg-zinc-700 text-zinc-100 placeholder-zinc-300">
            @error('file') <span class="error">{{ $message }}</span> @enderror
        </x-slot>

        <x-slot name="footer">
            <button class="mx-2 float-left block px-4 py-1 bg-yellow-600 border rounded-lg border-yellow-700"
                    wire:click="$set('showVideoUploadModal', false)">
                Annuller
            </button>
            <button class="mx-2 float-left block px-4 py-1 bg-green-600 border rounded-lg border-green-700"
                    wire:click="myfinishUpload" type="submit">
                Tilføj video
            </button>
        </x-slot>
    </x-dialog-modal>

Livewire config file

    'temporary_file_upload' => [
        'disk' => 's3',        // Example: 'local', 's3'              Default: 'default'
        'rules' => 'required|file|max:102400',       // Example: ['file', 'mimes:png,jpg']  Default: ['required', 'file', 'max:12288'] (12MB)
        'directory' => null,   // Example: 'tmp'                      Default  'livewire-tmp'
        'middleware' => null,  // Example: 'throttle:5,1'             Default: 'throttle:60,1'
        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs.
            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
            'mov', 'avi', 'wmv', 'mp3', 'm4a',
            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
        ],
        'max_upload_time' => 5, // Max duration (in minutes) before an upload gets invalidated.
    ],
0 likes
8 replies
Snapey's avatar

irrespective of whether you can, i would have assumed this to be a bad idea given how slow it would be?

Foks's avatar
Level 15

@Snapey Well, how would you otherwise handle file uploads on Vapor? According to the project's requirements it needs to run on Vapor.

Chingy's avatar

@Foks If your application needs to receive file uploads larger than AWS allows, those files must be streamed directly to S3 from your application's frontend (Browser). To assist you, we've written an NPM package that makes it easy to perform file uploads directly from your application's frontend

You may use the Vapor.store method within your frontend code to upload a file directly to the S3 bucket attached to your environment

Did you read those?

Foks's avatar
Level 15

@Chingy I did.

However, when developing locally, that limit isn't present. When I attempt to upload a file with a size of 38.1 MB, the application will accept it, if the temporary_file_upload.disk is set to null. (Which means it uses the .env file, which would be the local disk), but if the temporary_file_upload.disk is set to 's3' it will just quickly flash the component, and then come with a validation error that says that the file has to be a mp4, mov, ogg, qt file.

Foks's avatar
Foks
OP
Best Answer
Level 15

After attempting to use a real AWS bucket, then I found that it works (after I updated the CORS for AWS), so I think it's an issue of Minio and CORS.

Please or to participate in this conversation.