--- title: Displaying File Names for Multi-File Inputs with Stimulus description: A tutorial builds a small Stimulus controller that reads HTMLInputElement.files to display individual file names when users select multiple files in a file... canonical: https://daily.dev/posts/displaying-file-names-for-multi-file-inputs-with-stimulus-guf8wkif1 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Displaying File Names for Multi-File Inputs with Stimulus | daily.dev og:description: A tutorial builds a small Stimulus controller that reads HTMLInputElement.files to display individual file names when users select multiple files in a file... og:url: https://daily.dev/posts/displaying-file-names-for-multi-file-inputs-with-stimulus-guf8wkif1 og:image: https://api.daily.dev/og/posts/GUf8WkIf1.png og:image:alt: Displaying File Names for Multi-File Inputs with Stimulus og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Displaying File Names for Multi-File Inputs with Stimulus **[RUBYLAND](https://daily.dev/sources/rubyla)** · 7 min read · 1 upvotes · 0 comments ## Summary A tutorial builds a small Stimulus controller that reads HTMLInputElement.files to display individual file names when users select multiple files in a file input, replacing the browser's generic 'n files' message. It walks through a Rails 8 demo app with Active Storage's has_many_attached, covering the controller, model, and form setup, then shows the same controller working outside Rails via a CDN-loaded Stimulus script. It also briefly surveys existing solutions like Uppy, Dropzone.js, and FilePond, explaining why a full upload library is overkill for this narrow need. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I show the actual file names instead of '3 files' for a multi-file input element? Read the FileList from HTMLInputElement.files and render each file's name manually, since browsers only display a count for multi-file inputs by default. A Stimulus controller can listen for the input's change event, clear a target container, convert the FileList to an array with Array.from(files), and append a span with file.name for each selected file. _Developers wiring up file upload UX often compare small JS patterns like this one on daily.dev before reaching for a full library._ ### Should I use a library like Uppy or Dropzone.js just to show selected file names in a form? No, full upload libraries like Uppy, Dropzone.js, and FilePond replace the native file input entirely with drag-and-drop, previews, and progress bars, adding tens to hundreds of KB. If the only requirement is showing file names next to a standard input, a small custom controller reading HTMLInputElement.files is lighter and avoids that overhead. _Weighing a heavy upload library against a lightweight custom fix is exactly the kind of tooling decision developers track on daily.dev._ ### Can I add multiple file uploads to a Rails has_many_attached association without losing existing attachments on update? Yes, but pet_params should not include photos directly, because assigning attachments through update replaces the whole collection instead of appending. Instead, permit only the regular model attributes, then handle photos separately: call photos.attach after save to append new uploads, and purge specific attachment IDs submitted via remove checkboxes to delete individual files. _Rails developers handling Active Storage attachment quirks like this often keep such fixes bookmarked on daily.dev._ ## Similar posts on daily.dev - [Pro File Uploads in Rails 8: Speed and Scalability with Direct Uploads](https://daily.dev/posts/pro-file-uploads-in-rails-8-speed-and-scalability-with-direct-uploads-uru3uplg4) · Ruby Flow · 1 upvotes · 0 comments - [Build a reusable before/after image slider with Stimulus](https://daily.dev/posts/build-a-reusable-before-after-image-slider-with-stimulus-363uv5vhz) · RUBYLAND · 0 upvotes · 0 comments - [Building a \(Very\) Simple Responsive Search with Rails & Stimulus](https://daily.dev/posts/building-a-very-simple-responsive-search-with-rails-stimulus-7nnigdpnj) · Hashrocket · 0 upvotes · 0 comments - [Managing File Uploads and Administration in Blazor](https://daily.dev/posts/managing-file-uploads-and-administration-in-blazor-gmavrmurp) · Telerik · 2 upvotes · 0 comments - [How to Set Up Task Process on a Development Team](https://daily.dev/posts/how-to-set-up-task-process-on-a-development-team-ljghmomvc) · Larablog · 2 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#rails](https://daily.dev/tags/rails) [View this post on daily.dev](https://daily.dev/posts/displaying-file-names-for-multi-file-inputs-with-stimulus-guf8wkif1) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Displaying File Names for Multi-File Inputs with Stimulus","url":"https://daily.dev/posts/displaying-file-names-for-multi-file-inputs-with-stimulus-guf8wkif1","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/displaying-file-names-for-multi-file-inputs-with-stimulus-guf8wkif1"},"datePublished":"2026-08-15T13:58:57.088Z","dateModified":"2026-09-13T19:07:29.713Z","description":"A tutorial builds a small Stimulus controller that reads HTMLInputElement.files to display individual file names when users select multiple files in a file...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f6fb400a64f9918ad687f3ea65a76b21?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f6fb400a64f9918ad687f3ea65a76b21?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"RUBYLAND","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"RUBYLAND","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/rubyla","url":"https://daily.dev/sources/rubyla"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/displaying-file-names-for-multi-file-inputs-with-stimulus-guf8wkif1","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,rails","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"RUBYLAND","item":"https://daily.dev/sources/rubyla"},{"@type":"ListItem","position":3,"name":"Displaying File Names for Multi-File Inputs with Stimulus"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/displaying-file-names-for-multi-file-inputs-with-stimulus-guf8wkif1#faq","mainEntity":[{"@type":"Question","name":"How do I show the actual file names instead of '3 files' for a multi-file input element?","acceptedAnswer":{"@type":"Answer","text":"Read the FileList from HTMLInputElement.files and render each file's name manually, since browsers only display a count for multi-file inputs by default. A Stimulus controller can listen for the input's change event, clear a target container, convert the FileList to an array with Array.from(files), and append a span with file.name for each selected file. Developers wiring up file upload UX often compare small JS patterns like this one on daily.dev before reaching for a full library."}},{"@type":"Question","name":"Should I use a library like Uppy or Dropzone.js just to show selected file names in a form?","acceptedAnswer":{"@type":"Answer","text":"No, full upload libraries like Uppy, Dropzone.js, and FilePond replace the native file input entirely with drag-and-drop, previews, and progress bars, adding tens to hundreds of KB. If the only requirement is showing file names next to a standard input, a small custom controller reading HTMLInputElement.files is lighter and avoids that overhead. Weighing a heavy upload library against a lightweight custom fix is exactly the kind of tooling decision developers track on daily.dev."}},{"@type":"Question","name":"Can I add multiple file uploads to a Rails has_many_attached association without losing existing attachments on update?","acceptedAnswer":{"@type":"Answer","text":"Yes, but pet_params should not include photos directly, because assigning attachments through update replaces the whole collection instead of appending. Instead, permit only the regular model attributes, then handle photos separately: call photos.attach after save to append new uploads, and purge specific attachment IDs submitted via remove checkboxes to delete individual files. Rails developers handling Active Storage attachment quirks like this often keep such fixes bookmarked on daily.dev."}}]} ```