File Uploads

Canvas bundles a Bootstrap file input plugin that replaces the default browser file field with a styled control offering previews, captions, custom buttons, upload buttons, and extension filtering. It attaches to a normal <input type="file">.

Setup

Include the bundled stylesheet in the <head> and the plugin script before </body>. Inputs with the .file or .file-loading class are enhanced.

<!-- In <head> -->
<link rel="stylesheet" href="css/components/bs-filestyle.css">

<!-- Before </body> -->
<script src="js/components/bs-filestyle.js"></script>

Structure

Start with a standard file input. Add .file for automatic styling, or .file-loading when you initialize it yourself with fileinput(). Use multiple for multi file selection and data-* attributes for quick configuration.

<!-- Basic, no preview thumbnail -->
<input id="input-1" type="file" class="file" data-show-preview="false">

<!-- Multiple with caption, no upload button -->
<input id="input-3" name="input2[]" type="file" class="file" multiple
       data-show-upload="false" data-show-caption="true" data-show-preview="true">

<!-- Restrict to specific extensions -->
<input id="input-7" name="input7[]" multiple type="file" class="file file-loading"
       data-allowed-file-extensions='["csv", "txt"]' data-show-preview="false">

<!-- Disabled input -->
<input id="input-4" type="file" class="file" disabled="true" data-show-preview="false">

For custom buttons, previews, and error handling, initialize with fileinput():

<input id="input-8" type="file" accept="image/*" class="file-loading"
       data-allowed-file-extensions='[]' data-show-preview="false">

jQuery("#input-5").fileinput({ showCaption: false });

jQuery("#input-6").fileinput({
  showUpload: false,
  maxFileCount: 10,
  mainClass: "input-group-lg",
  showCaption: true
});

jQuery("#input-8").fileinput({
  mainClass: "input-group-md",
  showUpload: true,
  previewFileType: "image",
  browseClass: "btn btn-success",
  browseLabel: "Pick Image",
  browseIcon: "<i class=\"bi-image\"></i> ",
  removeClass: "btn btn-danger",
  removeLabel: "Delete",
  removeIcon: "<i class=\"bi-trash3\"></i> ",
  uploadClass: "btn btn-info",
  uploadLabel: "Upload",
  uploadIcon: "<i class=\"bi-upload\"></i> "
});

jQuery("#input-12").fileinput({
  showPreview: false,
  allowedFileExtensions: ["zip", "rar", "gz", "tgz"],
  elErrorContainer: "#errorBlock"
});

Options

As data-* attributes on the input:

data-show-preview="false": hide the preview thumbnail area.
data-show-caption="true": show the selected file name caption.
data-show-upload="false": hide the built in upload button.
data-allowed-file-extensions='["csv", "txt"]': restrict by extension (JSON array).

As fileinput({ ... }) options:

showCaption, showUpload, showPreview: toggle the caption, upload button, and preview.
maxFileCount: maximum number of files for a multiple input.
mainClass: sizing class such as "input-group-lg" or "input-group-md".
previewFileType: restrict previews, for example "image" or "text".
allowedFileExtensions / allowedFileTypes: whitelist by extension or type (["image", "video"]).
browseClass / browseLabel / browseIcon: customize the Browse button.
removeClass / removeLabel / removeIcon: customize the Remove button.
uploadClass / uploadLabel / uploadIcon: customize the Upload button.
layoutTemplates: override the button and caption layout markup.
elErrorContainer: selector of an element to render validation errors into.

Tips

Use class="file-loading" when you plan to call fileinput() yourself, so the field stays hidden until the plugin is ready.
Pair accept="image/*" with previewFileType: "image" to get proper thumbnail previews.

Was this page helpful?