Simple File Upload

Allowing multiple files

To use the multiple file widget, you must add a data-attribute of multiple= "true". If you also want to include the "Remove" links as shown below, add a data-attribute of remove-links="true". You can optionallly set the maximum number of files allowed (defaults to 20) using data-max-files.

When the uploader is configured for multiple file, the hidden input will be replaced with an "Add Files" button. The button text can be configured using the data-button-text data-attribute.


        <input class="simple-file-upload" data-multiple="true" data-remove-links="true" data-max-files="5" data-button-text="Add Files" type="hidden" name="user[avatar_url]" id="user_avatar_url" />

Heads up! You cannot resize files if you have multiple files enabled. Any data-width or data-height attributes will be ignored. (You can serve the files at size so this won't impact your page speed - read more)

How do I save the files?

There are two methods to access the uploaded files - respond to the javascript event or read the form parameters on your server.

1. Javascript Event

Listen for the javascript event. When the user clicks the "Add" button, the fileUploadSuccess event is fired. The file list is available on the event e.detail.files. You can listen for the event like this:


        //"el" is the element with class simple-file-upload

        const el = document.getElementById("user_avatar_url")
        el.addEventListener("fileUploadSuccess", (e) => {
          console.log(e.detail.files)
        })

        //File object returned will be an array of file objects as show below (e.detail.files)
        0: 
        cdnUrl: "file1_url"
        name: "file1.jpg"
        size: 1024
        type: "image/jpeg"

        1: 
        cdnUrl: "file2_url"
        name: "file2.jpg"
        size: 1024
        type: "image/jpeg"

        2: 
        cdnUrl: "file3_url"
        name: "file3.jpg"
        size: 1024
        type: "image/jpeg"

2. Form parameters

Get the file URLS from the hidden inputs. Simple File Upload will create a hidden input for each uploaded file. Each input will have the same name as the hidden input you originally created with [] appended to the name. Most server side languages will parse this format into an array.

Example

If you have configured your hidden input as below and allowed multiple files:


          <input class="simple-file-upload" data-multiple="true" type="hidden" name="user[avatar_url]" id="user_avatar_url" />

If the user uploads 3 files, after they click "Add" the markup will look like this:


          <input class="simple-file-upload" data-multiple="true" type="hidden" name="user[avatar_url][]" id="user_avatar_url" value="file1_url" />

          <input  type="hidden" name="user[avatar_url][]" id="user_avatar_url2" value="file2_url" data-created-by-sfu ="true"/>

          <input  type="hidden" name="user[avatar_url][]" id="user_avatar_url3" value="file3_url" data-created-by-sfu ="true"/>
          </form>

Reading the parameters on your server

If you are using Ruby on Rails, you must sanitize your parameters
params.require(:user).permit(avatar_url: [])
On the server, the array of avatar_urls will be accessible via params["user"]["avatar_url"]

How do I style the button?

The button fires a buttonCreated javascript event when it is available to customize. The button id is available via e.detail.id. Listen for the javascript event and replace the css with your own.


        //"el" is the element with class simple-file-upload

        const el = document.getElementById("id-of-hidden-input")

        el.addEventListener("buttonCreated", (e) => {
          const button = document.getElementById(e.detail.id)
          button.classList.remove("btn-primary btn")
          button.classList.add("your-class")
        })