Remember array params in web dev

This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the web-development category.

Last Updated: 2024-12-03

Multi-file uploads application

For the life of me, I could not get multiple uploads to work from a Rails form.

It instead seemed to just upload the last file.

<p>
  <%= file_field_tag :"files", multiple: true, direct_upload: true, class: 'file-input' %>
  <%= label_tag :"files", "Choose your files" %>
</p>

Server: Parameters: {"files"=>"thing"}

The trick was to use the array notation for the parameter name:

<p>
  <%= file_field_tag :"files[]", multiple: true, direct_upload: true, class: 'file-input' %>
  <%= label_tag :"files[]", "Choose your files" %>
</p>

Server: Parameters: {"files"=>["thing", "other"]}

or with curl:

curl "localhost:3000/?files\[\]=thing&files\[\]=zzz"

0-or-more checkboxes application

Similarly, I was given an UI with many checkboxes, each one representing one item in an array (e.g. languages spoken — such as "French" or "German"). How should I connect the front-end form to the back-end?

My fist instinct was to name the inputs "German" "French" etc.

But this leads to too much backend processing.

Instead call all the checkboxes the name "languages[]" and set the value to the language itself (e.g. "German". Then rely on Laravel or Rails to sort it out (it's a common feature to parse such data).