File Upload

The file upload component allows users to select files and then upload them to your server.

You can include a file upload component as so:

FormFileUpload("spreadsheets")

Common Methods

For a list of common field component methods, see here.

Getting started

Security

Accepting file uploads from your users can expose your application and its server to security risks that may not be immediately apparent. Attackers often will try to upload files that are executable, like .php files, 'fake' files, files with pathing, etc. etc.. They then will attempt to run those malicious files by exploiting various parts of your application.

Iridium includes some pre-built hooks for storing/deleting/reading files, however, we recommend overriding them and tailoring them to your infrastructure and risk profile! What you can choose to accept is likely much tighter than what a framework can. Be safe!

Iridium is not a batteries included framework (we just do your UI), so the setup process for our file upload component is more involved & requires you to make personal decisions about how your app handles files.

By default, Iridium bundles in three implementations of saving StoreUsing, FindFilesUsing, & DeleteFilesUsing

File Obfuscation

By default, Iridium will obfuscate all uploaded file names. This means the names and extensions of user-uploaded files are randomized, and their metadata (including their original name) are stored alongside the file in a *.meta file. This is generally a recommended approach for additional security, but it does make reading your files on your server not as easy as clicking on them.

We recommend leaving this enabled, but Iridium provides an option to disable file aliasing as well.

Default Directory

Security

By default, Iridium bundles in three implementations of saving StoreUsing, FindFilesUsing, & DeleteFilesUsing

StoreUsing

FindFilesUsing

DeleteFilesUsing

Multiple

You can define if your FileUpload component allows multi files as so:

// static
FormFileUpload("spreadsheets").
    Multiple()


// callback
FormFileUpload("spreadsheets").
    MultipleFn(
        func (ctx FieldContext) bool {
            return false
        }
    )

Max Files

The MaxFiles method will specify the maximum number of files allowed.

This is generally used along side the multiple configuration option.

// static
FormFileUpload("images").
    MaxFiles(3)

// callback
FormFileUpload("images").
    MaxFilesFn(
        func (ctx FieldContext) int {
            return 5
        }
    )

Draggable

The Draggable option will allow users to drag file(s) into your input box. The default behaviour requires users to click on the box and then select their files with their system's file manager.

// static
FormFileUpload("spreadsheets").
    Draggable()

// callback
FormFileUpload("spreadsheets").
    DraggableFn(
        func (ctx FieldContext) bool {
            return false
        }
    )

Accept

The accepted method will define which types of files are accepted in your upload. This applies the following HTML input tag as seen here.

// static
FormFileUpload("images").
    Accept([]string{
        "image/png", "image/jpeg"
    })

// callback
FormFileUpload("images").
    Accept(
        func (ctx FieldContext) []string {
            return []string{
                "video/*",
            }
        }
    )

Capture

The Capture method is (generally) a mobile specific option that allows users to open specific device camera to generate a image file to upload. It will respect your Accept options. Read more here.

// static
FormFileUpload("images").
    Capture(config.UserCapture). // for front facing camera
    Caputre(config.EnvironmentCapture) // for back facing camera

// callback
FormFileUpload("images").
    CaptureFn(
        func (ctx FieldContext) config.FileUploadCapture {
            return config.UserCapture
        }
    )

Max Size KB

The MaxSizeKB option will specify the maximum file sizes allowed in KB.

If using the multiple option, this will limit the file size of each file provided.

// static
FormFileUpload("images").
    MaxSizeKB(1024)

// callback
FormFileUpload("images").
    MaxSizeKBFn(
        func (ctx FieldContext) int {
            return 2048
        }
    )

Async

The Async method allows you to immediantly upload a user's chosen file as soon as it is selected. The default file upload box will wait till the user submits their form to post their files.

// static
FormFileUpload("images").
    Async()

// callback
FormFileUpload("images").
    AsyncFn(
        func (ctx FieldContext) bool {
            return true
        }
    }

Validation & Rules

Server Side

Unlike similar form components, Iridium does not bundle in rules for your file upload components. Instead, Iridium passes in a UploadConfig struct to the StoreFilesUsing method. This allows you to take full control of your validation for file uploads.

Iridium still resolves your file upload's configuration (which includes things like the max file size, max count of files, etc.) from your file uploads *Fn methods for you, but their enforcement is not handled for you when you write a custom store method. You'll need to do that on your own.

Our default StoreFilesUsing method has its own implementation of enforcing these rules however, so if you rely on our implementation, your files will be validated.

Client side

Client side validation occurs using our file upload component based on the rules you apply to your component, so you don't need to worry about these. If you want greater control, we recommend overriding the file upload component yourself