NEXT: FileUpload component - expose bindable files prop

[jpdewing]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Would it be possible to expose a files prop for two-way binding or provide a way to access the files that have been added to acceptedFiles.

This would allow for something external to update/clear the uploaded files. My specific use case would be to combine with Superforms that resets the form once successfully submitted and would automatically clear the uploaded files from the component.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[jpdewing]

https://github.com/skeletonlabs/skeleton/blob/a0653e8ffd9da9d6280c96bd9dc56a613818da0d/packages/skeleton-svelte/src/lib/components/FileUpload/FileUpload.svelte#L116

Just noticed the file size calc is missing a zero i.e. 1000 * 1000, my upload files were not looking very svelte ;)

[endigo9740]

Good catch, we'll also need to adjust it so mb is not hardcoded. That may not work in all languages.

[Hugos68]

Javascript allows for better number notations, eg:

const multiplier = 1_000_000

underscores are removed and they help make it clearer.

We can probably use the Intl.NumberFormat function though, this would handle locale aswell.

[endigo9740]

From @jpdewing on Discord:

Following up on your point on the github issue about ‘mb’ not being hard coded. Possibly a helper utility function along the lines of this gist could handle formatting the friendly file size to the browser locale.

https://gist.github.com/lanqy/5193417?permalink_comment_id=4379535#gistcomment-4379535

The gist uses SI format so should be using 1000 rather than 1024 (IEC). Also, I don't think Intl.NumberFormat supports the IEC units. Amazing the rabbit warren you can fall down looking into these things! This article summaries things nicely https://www.simonrjones.net/2022/01/a-little-bit-about-filesize-units/ the comic at the end is great, I vote for using the Bakers Kilobyte

[endigo9740]

First the good news - I've implemented two improvements to the component in the pending PR:

1. Implemented a new bytesToSize() function that handles byte size and unit conversion based on James' suggestion.
2. As well as some minor style improvements when the component does not have a fileIcon provided.

The bad news - I've spent some time testing ways to handle a reset of the File Input within the File Upload component. Sadly I am coming up short on this one. Here's what I've tested thus far:

1. Creating a $bindable() reference to the <input> within the component. Unfortunately Svelte doesn't allow binding with out type="file" explicitly defined, and we cannot assign this because it's handled by Zag. So I don't think this will be a viable option.
2. I also tried wrapping the component with a <form> element and used Svelte's bind:this so I could run form.reset() method (the native HTML reset method). Likewise I also tried a native HTML <button type="reset">. Neither option appears to reset all fields except file inputs.
3. Currently it seems like the de-facto solution would be to set the value attribute to either and empty string '' or null. So I went through the process of biding the value (similar to other components) - but again, this is not working. The value is updated, but the files are not cleared.

The only other idea I have is to somehow expose the Zag api.clearFiles() method described here

However, I'm struggling to come up with a clean way to handle this. So for now I'm open to other ideas or suggestions!

[endigo9740]

This looks like an orphaned ticket, but this functionality is now implemented: https://next.skeleton.dev/docs/components/file-upload/svelte/#bind-to-api

[jpdewing]

Thanks Chris, apologies should have closed this ages ago after discussing on discord.

[endigo9740]

Nah, all good. Our issue tracker is setup to auto-close issues tagged in their respective PRs. But it's awaiting the changes to hit our master branch - which is still a ways out for v3! In the meantime we just have to take care to manually close these out. Sometimes we miss one or two though!

[magiceupho]

Hi, Sorry, but I don't understand how to bind files when using Superforms without a bindable property. Is it possible to help me please ? Thank you

[jpdewing]

You should be able to make use of the onFileAccept or onFileChange event to get the list of uploaded files and then manually set Superforms, something like:

function fileAccept(e: FileAcceptDetails) {
    myForm.files = [...e.files];
}

[endigo9740]

@magiceupho please avoid creating new issues under old closed issues. It's the easiest way for myself and the community to miss these posts. Just link relevant issues if there's something of historical context.