Add a function to easily clear the files list

[andrzejkupczyk]

I needed a way to clear the files list, but calling handleFileInput, e.g., on a click event, throws an error (obv). Although I found a workaround:

<OButton @click="files = []" />

I think it might be a good idea to provide a dedicated function in the useFileStorage composable:

const files = ref<ClientFile[]>([])

// ...

const clearFiles = () => (files.value = [])

return {
    files,
    handleFileInput,
    clearFiles,
}

<OButton @click="clearFiles" />

Would you be open to a PR with this change?

[NyllRE]

I had similar requests for this function, at first I thought that since it's a basic vue ref with a list inside it I thought that it wouldn't be necessary to add such a simple one liner function to the module but since there seems to be a couple requests I will be adding it soon. No need to open a new PR I'll add it myself. Thanks

[andrzejkupczyk]

Thank you for the quick response and for providing this package—much appreciated! 🙇🏻

[LasterAlex]

I've just came across the same issue, and there's a problem with just files.value = [] in the default configuration of

<input 
    type="file"
    @input="handleFileInput"
/>

input is not updated at all, it just updates the function, resulting in a dangling filename in the input element without the actual file, not returning to 'No file selected.'

The only way to fix it that i found is

<input 
    type="file"
    ref="input_file"
    @input="handleFileInput"
/>

and

const input_file = ref<null | HTMLInputElement>(null);
const clearFiles = () => {
    input_file.value.value = "";
    files.value = [];
}

Is it possible to implement this without the ref?

And thanks for the awesome package!

[NyllRE]

@LasterAlex That actually is a good reason why the need for a clear function would be necessary.

although making the user have to add a ref is too much hassle for the developers, I'll be looking into solutions such as custom vue props or I would encourage users to add a certain custom component for their inputs