Boa Hancock Posts - Answer Overflow

Boa Hancock

•Created by Boa Hancock on 3/8/2025 in #❓┊help

How can I resize image with a `.webp` extension? It is saving as `.jpg`.

I'm trying to resize an image with the .webp extension using FileUpload, but the file is being saved as .jpg instead. Here's the code I'm using to handle the file upload and resizing. Can anyone point out what I might be doing wrong?

FileUpload::make('medium')
    ->label('Medium Image')
    ->image() 
    ->acceptedFileTypes(['image/webp'])
    ->imageResizeMode('cover')
    ->imageResizeTargetWidth(function (Get $get) {
        $width = (10 / 100) * $get('width');
        return $width;
    })
    ->imageResizeTargetHeight(function (Get $get) {
        $height = (10 / 100) * $get('height');
        return $height;
    })
    ->openable()
    ->downloadable()
    ->previewable()
    ->required() 
    ->disk('s3') 
    ->reactive()
    ->directory('media/cases/medium')
    ->hidden(function (Get $get) {
        $height = $get('height');
        $width = $get('width');

        return ($height === 0 || $width === 0);
    })
    ->maxSize(128),

FileUpload::make('medium')
    ->label('Medium Image')
    ->image() 
    ->acceptedFileTypes(['image/webp'])
    ->imageResizeMode('cover')
    ->imageResizeTargetWidth(function (Get $get) {
        $width = (10 / 100) * $get('width');
        return $width;
    })
    ->imageResizeTargetHeight(function (Get $get) {
        $height = (10 / 100) * $get('height');
        return $height;
    })
    ->openable()
    ->downloadable()
    ->previewable()
    ->required() 
    ->disk('s3') 
    ->reactive()
    ->directory('media/cases/medium')
    ->hidden(function (Get $get) {
        $height = $get('height');
        $width = $get('width');

        return ($height === 0 || $width === 0);
    })
    ->maxSize(128),

2 replies

FFilament

•Created by Boa Hancock on 3/8/2025 in #❓┊help

How to Access TemporaryUploadedFile Data from FileUpload

Hi! I’m using the FileUpload component in my Livewire form. I want to access information about the uploaded file, such as its size, width, and height, using the TemporaryUploadedFile. Can someone explain how I can achieve this?

FileUpload::make('image')
          ->label('Case Image')
          ->image() 
          ->imageEditor()
          ->openable()
          ->downloadable()
          ->previewable()
          ->required() 
          ->disk('s3') 
          ->directory('media/cases')
          ->maxSize(256)
          ->placeholder('Drag and drop or browse to upload your image')
          ->reactive()
          ->afterStateUpdated(function (?string $state, Set $set, Get $get, TemporaryUploadedFile $file) {
              dd($file->getSize(), $file->dimensions());
          }),

FileUpload::make('image')
          ->label('Case Image')
          ->image() 
          ->imageEditor()
          ->openable()
          ->downloadable()
          ->previewable()
          ->required() 
          ->disk('s3') 
          ->directory('media/cases')
          ->maxSize(256)
          ->placeholder('Drag and drop or browse to upload your image')
          ->reactive()
          ->afterStateUpdated(function (?string $state, Set $set, Get $get, TemporaryUploadedFile $file) {
              dd($file->getSize(), $file->dimensions());
          }),

I can retrieve the necessary information using getUploadedFileNameForStorageUsing, but I cannot do so with afterStateUpdated. My goal is to use afterStateUpdated to display the data in real time, whereas getUploadedFileNameForStorageUsing sets the data only after the changes have been saved.

->getUploadedFileNameForStorageUsing(function (Set $set, Get $get, TemporaryUploadedFile $file){
    $fileSize = $file->getSize(); 
    $fileDimensions = $file->dimensions();

    $set('size', round($fileSize / 1024, 2));
    $set('width', $fileDimensions[0]);
    $set('height', $fileDimensions[1]);
    
    $hash = str()->random(30);
    $timestamp = now()->timestamp;  
    $extension = '.' . $file->getClientOriginalExtension();

    return $hash.$timestamp.$extension;
}),

->getUploadedFileNameForStorageUsing(function (Set $set, Get $get, TemporaryUploadedFile $file){
    $fileSize = $file->getSize(); 
    $fileDimensions = $file->dimensions();

    $set('size', round($fileSize / 1024, 2));
    $set('width', $fileDimensions[0]);
    $set('height', $fileDimensions[1]);
    
    $hash = str()->random(30);
    $timestamp = now()->timestamp;  
    $extension = '.' . $file->getClientOriginalExtension();

    return $hash.$timestamp.$extension;
}),

5 replies

Gaming

Programming