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]

skeleton/packages/skeleton-svelte/src/lib/components/FileUpload/FileUpload.svelte

Line 116 in a0653e8

{(file.size / 100000).toFixed(1)} mb

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!