Add (or just document) a way of populating the file upload field with existing file.

[lucasromanojf]

Think about a crud where one of the fields is a file.

The file upload field works well on creation, since there are no files yet.

But what is the best approach for when editing the record? I mean, populate the current file(s) on the uploader component.

Maybe add an easy way for that on the component itself (preferred IMO) or maybe just add a suggestion to the documentation?

[jeffchown]

@lucasromanojf As far as I know, you can not prepopulate a type="file" input with an existing file (for security reasons) - per https://stackoverflow.com/questions/16365668/pre-populate-html-form-file-input

My first thoughts re: this (without knowing your use-case) would be to show the existing file name in a readonly input, give the user the ability to delete that file via a button, should they want to, and if they do, show a new file input for uploading a new/replacement file.

[lucasromanojf]

I don't mean the file input itself, but the new uploader component. My suggestion is providing an easier way to repopulate it (maybe creating a TemporaryFileUpload instance? IDK) with an existing uploaded file. Or maybe just add the best approach to the documentation.

[jeffchown]

@lucasromanojf I understand. The flux:file-upload component expands to:

<ui-file-upload class="@container relative" wire:model="testFile" name="testFile" data-flux-file-upload="">
    <input type="file" wire:ignore="" data-slot="receiver" class="sr-only" name="testFile" tabindex="-1" style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;">
    
    <div class="w-full p-4 ps-4 sm:ps-5 pe-6 sm:pe-8 flex items-center rounded-lg border-dashed border-zinc-200 dark:border-white/10 border-1 bg-zinc-50 dark:bg-white/10 transition-colors in-data-dragging:bg-zinc-100 in-data-dragging:border-zinc-300 dark:in-data-dragging:bg-white/15 dark:in-data-dragging:border-white/20 [[disabled]_&amp;]:opacity-75 [[disabled]_&amp;]:pointer-events-none" data-flux-file-upload-dropzone="" tabindex="0">
        <div class="relative me-4">
            <svg class="shrink-0 [:where(&amp;)]:size-6 text-zinc-400 dark:text-white/60 transition [[disabled]:hover_&amp;]:text-zinc-400 dark:[[disabled]:hover_&amp;]:text-white/60 in-data-dragging:text-zinc-800 dark:in-data-dragging:text-white [[data-flux-file-upload-trigger]:hover_&amp;]:text-zinc-800 dark:[[data-flux-file-upload-trigger]:hover_&amp;]:text-white" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
                <path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd"></path>
            </svg>
            
            
            <svg class="shrink-0 [:where(&amp;)]:size-6 animate-spin absolute inset-0 text-zinc-800 dark:text-white transition opacity-0" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
        </div>
        
        <div class="flex flex-col gap-1">
            <div class="text-sm font-medium text-zinc-800 dark:text-white cursor-default [[disabled]_&amp;]:opacity-75">
                Drop files or click to browse
            </div>
            
            <div class="relative text-zinc-500 dark:text-white/60 cursor-default text-xs">
                <!--[if BLOCK]><![endif]-->                    <div class="not-in-data-loading:opacity-0 absolute inset-x-0 top-0 flex gap-3 items-center">
                    <div class="flex-1 h-1 rounded-full bg-zinc-200 dark:bg-white/10">
                        <div class="h-full rounded-full bg-zinc-500 dark:bg-white" style="width: var(--flux-file-upload-progress)"></div>
                    </div>
                    
                    <div class="text-zinc-500 dark:text-white/70 tabular-nums font-medium after:content-[var(--flux-file-upload-progress-as-string)]"></div>
                </div>
                
                <span class="in-data-loading:opacity-0">CSV up to 10MB</span>
                <!--[if ENDBLOCK]><![endif]-->
            </div>
        </div>
    </div>
</ui-file-upload>

which includes an input type="file" input, so I think they are pretty tightly linked.

That said, I haven't done a code dive into the related Flux files, so I'm not sure what, if anything, is possible.
I'll defer to @joshhanley on this one.

[lucasromanojf]

I think this can be done using the flux:file-item component.
But the point is: how? what's the best approach?
I think this is a very common use case but I admit I don't know an easy way to populate it with existing uploaded files, so they can be deleted, re-added etc.
There are solutions, but I don't see any that don't demand a lot of checks/details.