Displaying list of file names

Hi,

I am uploading file from a form using Arc (Everything works as documented). I am using a custom button element to fire the file select action on the input so that I can maintain my UI styling.

For a single file I grabbed the value of the input field and showed it on the screen.

I decided to allow multiple files by adding the multiple attribute to the input field (Everything works in the back end saving files etc.

My problem is displaying a list of the selected files on the screen. Can anyone tell me if it is possible to grab the selected file name with JS and display them in a list when using multiple attribute?

Thanks,

Andrew

On the browser side? So using javascript? It’s pretty easy if so, just get the input element from the DOM and just iterate over the .files property on it Each of those file objects in the files list has a .name property, as well as other useful things like .size (which is the filesize in bytes) and more all documented in the spec. :slight_smile:

2 Likes

Thank you. Works as described. What specs? I still have not been able to find it!

1 Like

I grabbed it from MDN (which is basically an easier to read version of the spec in 95% of cases):
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-files

But the actual spec for it is at (the far more not-as-readable):
https://www.w3.org/TR/2010/WD-html5-20101019/common-input-element-attributes.html#dom-input-files

:slight_smile:

2 Likes

Brilliant … thank you

1 Like