File upload

A FileUploadFormElement writes an <input> element type="file" to the output. This formElement can be used to select one or multiple files form the users device storage.

Element and builder

The ViewElement implementation is FileUploadFormElement and has an equivalent FileUploadFormElementBuilder. A builder can be created using BootstrapUiBuilders.file() factory methods.

FileUploadFormElement attributes

Attribute Description Default

accept

A string that defines the file types the file input should accept. This string is a comma-separated list of unique type specifiers. For example "images/*"

Accept attribute is not set so All fileTypes are allowed by default

multiple

A boolean indicting if multiple files are allowed.

Multiple attribute is not set so multiple files are not allowed by default

Examples

Creating a basic FileUploadFormElement

Given the following builder configuration

BootstrapUiBuilders.file()
        .controlName( "singleFile" )
        .build();

The following markup would be rendered:

<input name="singleFile" id="singleFile" type="file">

Handle multiFile upload

An input file type can be configured so multiple files can be uploaded at once.

Given the following builder configuration

BootstrapUiBuilders.file()
      .controlName( "multiFIle" )
      .multiple( true )
      .build();

The following markup would be rendered:

<input multiple="true" name="multiFIle" id="multiFIle" type="file">

Change what files to accept

By providing the accept parameter the file upload is limited to those file types.

Given the following builder configuration

BootstrapUiBuilders.file()
      .controlName( "pdfFile" )
      .accept( ".pdf" )
      .build();

The following markup would be rendered:

<input name="singleFile" id="singleFile1" type="file" accept=".pdf">
« Fieldset File upload Form group »