Filament•17mo ago

FileUpload file saved with encrypted name, preview with original name

Maybe im missing something in the docs, but so far I havent found a way to upload a file, and save it with a hashed name, but when you preview its with the original name.

                FileUpload::make("attachment")
                    ->disk("public")
                    ->visibility("public")
                    // ->collection('attachments')
                    ->multiple()
                    ->enableReordering()
                    // ->saveUploadedFiles()
                    // ->preserveFilenames()
                     ->getUploadedFileNameForStorageUsing(function (TemporaryUploadedFile $file): string {
                         return (string) str($file->getClientOriginalName())->prepend('custom-prefix-');
                     }),

                FileUpload::make("attachment")
                    ->disk("public")
                    ->visibility("public")
                    // ->collection('attachments')
                    ->multiple()
                    ->enableReordering()
                    // ->saveUploadedFiles()
                    // ->preserveFilenames()
                     ->getUploadedFileNameForStorageUsing(function (TemporaryUploadedFile $file): string {
                         return (string) str($file->getClientOriginalName())->prepend('custom-prefix-');
                     }),

Am I missing something?

22 Replies

awcodes•17mo ago

If you want hashed file names then you shouldn’t use preserveFilenames()

MatthewOP•17mo ago

yeah thats why I commented it, but shouldnt there be a function to change the name in the preview? Otherwise, how else? Also, is there maybe a button that makes the image fullscreen (not in a new tab)? And if you have multiple uploads, you use left/right arrows to switch between them

ConnorHowell•17mo ago

Filepond gets the name/size/preview from the actual url that filament passes it (obviously using the savedname), looking at the filepond docs it might be possible to override the name displayed but not without a change to filament itself. Alternatively, you could make a route that returns the file from storage and keep the stored name in the URL then override getUploadedFileUrlUsing so it uses the correct name. Although imo that's a bit hacky

awcodes•17mo ago

Couldn’t tell it was commented on my phone. Sorry. The default, which filament uses, it to hash the name. GetClientOriginalName() will override this Laravel behavior.

MatthewOP•17mo ago

Should I put this in some kind of controller or in the model? (I mean the function)

awcodes•17mo ago

It’s fine where it is. It’s just that getClientOriginalName() will prevent it from storing as a hash.

MatthewOP•17mo ago

I understand, but is it possible to store the name as has but view the original? I dont want users seeing a crappy hashed filename but also not storing the name as is, because someone else could upload the same name with a document and it will be overwritten First solution could be this, which im unsure how to do OR I could use SpatieMediaLibrary which uses collections, so it creates a folder for each file

ConnorHowell•17mo ago

Yeah this is probably the simplest way if you want to keep the file names

ConnorHowell•17mo ago

You can also customise the previews btw with CSS, i.e. if you wanted a grid view there's an example here: https://pqina.nl/filepond/docs/api/style/#grid-layout

Easy File Uploading With JavaScript | FilePond

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

MatthewOP•17mo ago

Okk. Do you think there is a convinient way to browse images in FileUpload or watch uploaded videos?

awcodes•17mo ago

from the docs: You can keep the randomly generated file names, while still storing the original file name, using the storeFileNamesIn() method:

use Filament\Forms\Components\FileUpload;
 
FileUpload::make('attachments')
    ->multiple()
    ->storeFileNamesIn('attachment_file_names')

use Filament\Forms\Components\FileUpload;
 
FileUpload::make('attachments')
    ->multiple()
    ->storeFileNamesIn('attachment_file_names')

ConnorHowell•17mo ago

This does work but when you load up the form again for editing it uses the stored name as oppose to the original name

MatthewOP•17mo ago

@awcodes Can if you please remind me because im having trouble finding it in the docs. Assume that I visit the View page. How can I dd() the page data? record*

awcodes•17mo ago

$this->form->getState() maybe or $this->record

ConnorHowell•17mo ago

Since it's pulled directly from the URL so it won't be the original name, it does look like you can possibly override name/size/type when instantiating filepond (https://pqina.nl/filepond/docs/api/instance/properties/#files) but currently in the alpine component it's hardcoded to just be: type: 'local'

Easy File Uploading With JavaScript | FilePond

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

awcodes•17mo ago

You may be getting into custom component territory here.

MatthewOP•17mo ago

Ight thanks. I will read through it

ConnorHowell•17mo ago

Potentially but I don't think it would bring any breaking changes if implemented into the forms package, I need to test it though. Would also resolve issues when storing files (not images) in a private disk but not an S3 bucket. Since it can't create a temp url for a local file it just 404s and shows the file size as the size of the 404 response Plus it's kinda bad that if you want to show a preview of the already uploaded files filepond just downloads them everytime you load up a page, even though this info is available on the backend without having to redownload the file on the client side

ConnorHowell•17mo ago

I'm just not sure if this would break image previews. I'm not really sure where's best to have these kind of discussions since it's not really off topic and the "Chat" channel got abused lol

ConnorHowell•17mo ago

(Sorry for the spam) disregard that, looks like this is what's done in v3 now 🤦‍♂️

MatthewOP•17mo ago

I was thinking this: (v3)

<x-filament-panels::page>

    @if ($this->hasInfolist())
        {{ $this->infolist }}
    @else
        @php
            $this->form->model["attachment"] = "hello"
        @endphp
        {{ $this->form}}
    @endif
 
    @if (count($relationManagers = $this->getRelationManagers()))
        <x-filament-panels::resources.relation-managers
            :active-manager="$activeRelationManager"
            :managers="$relationManagers"
            :owner-record="$record"
            :page-class="static::class"
        />
    @endif
</x-filament-panels::page>

<x-filament-panels::page>

    @if ($this->hasInfolist())
        {{ $this->infolist }}
    @else
        @php
            $this->form->model["attachment"] = "hello"
        @endphp
        {{ $this->form}}
    @endif
 
    @if (count($relationManagers = $this->getRelationManagers()))
        <x-filament-panels::resources.relation-managers
            :active-manager="$activeRelationManager"
            :managers="$relationManagers"
            :owner-record="$record"
            :page-class="static::class"
        />
    @endif
</x-filament-panels::page>

But it just shows this

MatthewOP•17mo ago

So it didnt change the name?

Gaming

Programming

FileUpload file saved with encrypted name, preview with original name