Back to File Upload-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

The File Upload Component provides an easy and integrated way for users to upload multiple files. You can configure the file uploader to accept specific file types, and the file types are filtered in the user's file browser

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/file-upload@14.1.0

  1. Image from iOS.jpg53.65KB

Table of Contents

Edit this section, Opens in new window

Usage

Required markup

Input

<form autocomplete="off">
  <div class="if input-wrapper">
    <input type="file" class="if" accept="image/*" id="if-file-upload-1" placeholder="Välj bild at bifoga" />
    <label for="if-file-upload-1">Bifoga bild</label>
    <button aria-hidden="true" type="button" class="if file-upload">Välj bild at bifoga</button>
  </div>
</form>

Button

<form autocomplete="off">
  <div class="if input-wrapper">
    <input
      data-size="larger"
      type="file"
      class="if file-upload"
      accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      id="if-file-upload-2"
      placeholder="Please upload your CV"
    />
    <label for="if-file-upload-2" class="if button secondary">
      <span class="if icon ui data-upload blue"></span>Upload your CV
    </label>
  </div>
</form>

Drag and drop

<form autocomplete="off">
  <div class="if input-wrapper">
    <input
      data-size="large"
      type="file"
      class="if drag-drop"
      multiple=""
      id="if-file-upload-anatomy-6"
      placeholder="Drop files here to upload"
    />
    <label for="if-file-upload-anatomy-6">Upload file</label>
    <button aria-hidden="true" type="button" class="if file-upload">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="if loader dots horizontal small"
        viewBox="0 0 64 64"
        width="32"
        height="32"
      >
        <circle cx="8" cy="32" r="8" fill="#0054f0"></circle>
        <circle cx="32" cy="32" r="8" fill="#0054f0"></circle>
        <circle cx="56" cy="32" r="8" fill="#0054f0"></circle>
        <style>
          .if.loader.dots.horizontal circle {
            transform: scale(0);
            animation: ifAnimationLoaderHorizontal 1.15s infinite ease-in-out;
            transform-origin: 56px 32px;
          }
          .if.loader.dots.horizontal circle:nth-child(1) {
            animation-delay: -0.32s;
            transform-origin: 8px 32px;
          }
          .if.loader.dots.horizontal circle:nth-child(2) {
            animation-delay: -0.16s;
            transform-origin: 32px 32px;
          }
          @-moz-keyframes ifAnimationLoaderHorizontal {
            0%,
            80%,
            100% {
              transform: scale(0);
            }
            40% {
              transform: scale(1);
            }
          }
          @-webkit-keyframes ifAnimationLoaderHorizontal {
            0%,
            80%,
            100% {
              transform: scale(0);
            }
            40% {
              transform: scale(1);
            }
          }
          @-o-keyframes ifAnimationLoaderHorizontal {
            0%,
            80%,
            100% {
              transform: scale(0);
            }
            40% {
              transform: scale(1);
            }
          }
          @keyframes ifAnimationLoaderHorizontal {
            0%,
            80%,
            100% {
              transform: scale(0);
            }
            40% {
              transform: scale(1);
            }
          }
        </style>
      </svg>
      <svg class="if icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>
      <span class="if">
        Drop files here to upload
        <br />
        <span class="if fake-link text-meta">Or select files to upload</span>
      </span>
    </button>
    <div class="if uploaded-files"></div>
  </div>
</form>
Complete
<div class="if input-wrapper is-dragover">
  <input
    data-size="large"
    type="file"
    class="if drag-drop"
    multiple=""
    id="if-file-upload-7"
    placeholder="Drop files here to upload"
  />
  <label for="if-file-upload-7">When you drag files over</label>
  <button aria-hidden="true" type="button" class="if file-upload">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="if loader dots horizontal small"
      viewBox="0 0 64 64"
      width="32"
      height="32"
    >
      <circle cx="8" cy="32" r="8" fill="#0054f0"></circle>
      <circle cx="32" cy="32" r="8" fill="#0054f0"></circle>
      <circle cx="56" cy="32" r="8" fill="#0054f0"></circle>
      <style>
        .if.loader.dots.horizontal circle {
          transform: scale(0);
          animation: ifAnimationLoaderHorizontal 1.15s infinite ease-in-out;
          transform-origin: 56px 32px;
        }
        .if.loader.dots.horizontal circle:nth-child(1) {
          animation-delay: -0.32s;
          transform-origin: 8px 32px;
        }
        .if.loader.dots.horizontal circle:nth-child(2) {
          animation-delay: -0.16s;
          transform-origin: 32px 32px;
        }
        @-moz-keyframes ifAnimationLoaderHorizontal {
          0%,
          80%,
          100% {
            transform: scale(0);
          }
          40% {
            transform: scale(1);
          }
        }
        @-webkit-keyframes ifAnimationLoaderHorizontal {
          0%,
          80%,
          100% {
            transform: scale(0);
          }
          40% {
            transform: scale(1);
          }
        }
        @-o-keyframes ifAnimationLoaderHorizontal {
          0%,
          80%,
          100% {
            transform: scale(0);
          }
          40% {
            transform: scale(1);
          }
        }
        @keyframes ifAnimationLoaderHorizontal {
          0%,
          80%,
          100% {
            transform: scale(0);
          }
          40% {
            transform: scale(1);
          }
        }
      </style>
    </svg>
    <svg class="if icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <title>data upload</title>
      <g
        class="if animate bounce"
        class="nc-icon-wrapper"
        stroke-linecap="square"
        stroke-linejoin="miter"
        stroke-width="1.5"
        fill="#6e625e"
        stroke="#6e625e"
      >
        <line
          data-cap="butt"
          data-color="color-2"
          x1="16"
          y1="24"
          x2="16"
          y2="2"
          fill="none"
          stroke-miterlimit="10"
          stroke-linecap="butt"
        />
        <polyline data-color="color-2" points="24 10 16 2 8 10" fill="none" stroke-miterlimit="10" />
      </g>
      <g
        class="nc-icon-wrapper"
        stroke-linecap="square"
        stroke-linejoin="miter"
        stroke-width="1.5"
        fill="#6e625e"
        stroke="#6e625e"
      >
        <polyline points="2 23 2 30 30 30 30 23" fill="none" stroke="#6e625e" stroke-miterlimit="10" />
      </g>
    </svg>
    <span class="if">
      Drop files here to upload
      <br />
      <span class="if fake-link text-meta">Or select files to upload</span>
    </span>
  </button>
</div>
<div class="if input-wrapper is-loading">
  <input
    data-size="large"
    type="file"
    class="if drag-drop"
    multiple=""
    id="if-file-upload-8"
    placeholder="Drop files here to upload"
  />
  <label for="if-file-upload-8">When it is uploading</label>
  <button aria-hidden="true" type="button" class="if file-upload">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="if loader dots horizontal small"
      viewBox="0 0 64 64"
      width="32"
      height="32"
    >
      <circle cx="8" cy="32" r="8" fill="#0054f0"></circle>
      <circle cx="32" cy="32" r="8" fill="#0054f0"></circle>
      <circle cx="56" cy="32" r="8" fill="#0054f0"></circle>
      <style>
        .if.loader.dots.horizontal circle {
          transform: scale(0);
          animation: ifAnimationLoaderHorizontal 1.15s infinite ease-in-out;
          transform-origin: 56px 32px;
        }
        .if.loader.dots.horizontal circle:nth-child(1) {
          animation-delay: -0.32s;
          transform-origin: 8px 32px;
        }
        .if.loader.dots.horizontal circle:nth-child(2) {
          animation-delay: -0.16s;
          transform-origin: 32px 32px;
        }
        @-moz-keyframes ifAnimationLoaderHorizontal {
          0%,
          80%,
          100% {
            transform: scale(0);
          }
          40% {
            transform: scale(1);
          }
        }
        @-webkit-keyframes ifAnimationLoaderHorizontal {
          0%,
          80%,
          100% {
            transform: scale(0);
          }
          40% {
            transform: scale(1);
          }
        }
        @-o-keyframes ifAnimationLoaderHorizontal {
          0%,
          80%,
          100% {
            transform: scale(0);
          }
          40% {
            transform: scale(1);
          }
        }
        @keyframes ifAnimationLoaderHorizontal {
          0%,
          80%,
          100% {
            transform: scale(0);
          }
          40% {
            transform: scale(1);
          }
        }
      </style>
    </svg>
    <svg class="if icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <title>data upload</title>
      <g
        class="if animate bounce"
        class="nc-icon-wrapper"
        stroke-linecap="square"
        stroke-linejoin="miter"
        stroke-width="1.5"
        fill="#6e625e"
        stroke="#6e625e"
      >
        <line
          data-cap="butt"
          data-color="color-2"
          x1="16"
          y1="24"
          x2="16"
          y2="2"
          fill="none"
          stroke-miterlimit="10"
          stroke-linecap="butt"
        />
        <polyline data-color="color-2" points="24 10 16 2 8 10" fill="none" stroke-miterlimit="10" />
      </g>
      <g
        class="nc-icon-wrapper"
        stroke-linecap="square"
        stroke-linejoin="miter"
        stroke-width="1.5"
        fill="#6e625e"
        stroke="#6e625e"
      >
        <polyline points="2 23 2 30 30 30 30 23" fill="none" stroke="#6e625e" stroke-miterlimit="10" />
      </g>
    </svg>
    <span class="if">
      Drop files here to upload
      <br />
      <span class="if fake-link text-meta">Or select files to upload</span>
    </span>
  </button>
</div>

File list

<div class="if uploaded-files">
  <ol class="if">
    <li class="if error">
      <span class="if file-name ui icon symbol image" title="Image from iOS.jpg">Image from iOS.jpg</span>
      <span class="if file-feedback">Upload error</span>
      <button type="button" class="if file-action refresh">Try again</button>
    </li>
    <li class="if error">
      <span class="if file-name ui icon symbol image" title="Image from iOS.jpg">Image from iOS.jpg</span>
      <span class="if file-feedback">File format not supported</span>
    </li>
    <li class="if">
      <span class="if file-name ui icon symbol image" title="A very long image name that is truncated.png">
        A very long image name that is truncated.png
      </span>
      <span class="if file-feedback">53.65<abbr title="Kilobytes">KB</abbr></span>
      <button type="button" class="if file-action load">
        <svg class="if loader dots horizontal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
          <g class="if svg g">
            <circle class="if svg circle" fill="#0054f0" cx="8" cy="32" r="6" />
            <circle class="if svg circle" fill="#0054f0" cx="32" cy="32" r="6" />
            <circle class="if svg circle" fill="#0054f0" cx="56" cy="32" r="6" />
          </g>
        </svg>
      </button>
    </li>
    <li class="if">
      <span class="if file-name ui icon symbol image" title="Image from iOS.jpg">Image from iOS.jpg</span>
      <span class="if file-feedback">53.65<abbr title="Kilobytes">KB</abbr></span>
      <button type="button" class="if file-action delete"></button>
    </li>
    <li class="if">
      <span class="if file-name ui icon symbol document" title="CV.pdf">CV.pdf</span>
      <span class="if file-feedback">83.31<abbr title="Kilobytes">KB</abbr></span>
      <button type="button" class="if file-action delete"></button>
    </li>
    <li class="if">
      <span class="if file-name ui icon symbol image" title="Profile-photo.jpg">Profile-photo.jpg</span>
      <span class="if file-feedback">2.45<abbr title="Megabytes">MB</abbr></span>
      <button type="button" class="if file-action delete"></button>
    </li>
  </ol>
</div>
File icon

Use an icon that fits the file that is to be uploaded. You match the mime-type and or file extension in your JavaScript to display correct icon.

<li class="if">
  <span class="if file-name [ui icon symbol image]" title="Profile-photo.jpg">Profile-photo.jpg</span>
  <span class="if file-feedback">2.45<abbr title="Megabytes">MB</abbr></span>
  <button type="button" class="if file-action delete"></button>
</li>
File name

The name of the file to be uploaded. If the file name is too long, it is truncated with ellipsis. Users can hover over the file name to get the full name.

<li class="if">
  <span class="if file-name ui icon symbol image" title="Profile-photo.jpg">Profile-photo.jpg</span>
  <span class="if file-feedback">2.45<abbr title="Megabytes">MB</abbr></span>
  <button type="button" class="if file-action delete"></button>
</li>
File feedback

The feedback text usually contains the file size. If there's an error, you can display an error text there.

<li class="if">
  <span class="if file-name ui icon symbol image" title="Profile-photo.jpg">Profile-photo.jpg</span>
  <span class="if file-feedback">2.45<abbr title="Megabytes">MB</abbr></span>
  <button type="button" class="if file-action delete"></button>
</li>
<li class="if error">
  <span class="if file-name ui icon symbol image" title="Profile-photo.jpg">Profile-photo.jpg</span>
  <span class="if file-feedback">File format not supported</span>
</li>
File action

The file action depicts the current action that's available for the file that is uploading or is to be uploaded.

Delete

If there applies a feature to delete specific files before upload, or after a file is uploaded, you can use this icon and relevant action to delete the file.

Load

When an image is uploaded, for example on the change-event, use the loader as the action.

Success

When a file has successfully been uploaded. The check mark should only be visible for 1-2 seconds, before turning back to a cross (the delete action).

Refresh

If something went wrong with the upload, use the refresh icon and relevant action.

  1. Image from iOS.jpg 53.65KB
  2. Image from iOS.jpg 53.65KB
  3. Image from iOS.jpg 53.65KB
  4. Image from iOS.jpg Upload failed
<li class="if">
  <span class="if file-name ui icon symbol image" title="Profile-photo.jpg">Profile-photo.jpg</span>
  <span class="if file-feedback">2.45<abbr title="Megabytes">MB</abbr></span>
  <button type="button" class="if file-action [delete|refresh|success]"></button>
</li>
<li class="if">
  <span class="if file-name ui icon symbol image" title="Profile-photo.jpg">Profile-photo.jpg</span>
  <span class="if file-feedback">2.45<abbr title="Megabytes">MB</abbr></span>
  <button type="button" class="if file-action load">
    <svg class="if loader dots horizontal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <g class="if svg g">
        <circle class="if svg circle" fill="#0054f0" cx="8" cy="32" r="6" />
        <circle class="if svg circle" fill="#0054f0" cx="32" cy="32" r="6" />
        <circle class="if svg circle" fill="#0054f0" cx="56" cy="32" r="6" />
      </g>
    </svg>
  </button>
</li>
Error

If there's an error, you can display that text in the feedback element, but remember to use the .if.error on the list-element.

<li class="if error">
  <span class="if file-name ui icon symbol image" title="Profile-photo.jpg">Profile-photo.jpg</span>
  <span class="if file-feedback">File upload failed</span>
  <button type="button" class="if file-action refresh">Try again</button>
</li>
Implementation
Regarding removal of files when selecting multiple

There is no direct way of removing one element or more from the list of files to be uploaded. You can however remove all by reselecting the desired files.

But, you can do it the hard way:

  1. Copy the FileList object into an array
  2. Remove element from the copied array
  3. When uploading via AJAX (only known way so far), only pass the desired files
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Separate out JS and CSS documentation (ea4c5c6), closes #467386
  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!
  • 🧨 The JavaScript example is now moved to a separate JS package:

@ids-js/file-upload

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

13.5.1 (2021-09-07)

Bug Fixes

13.5.0 (2021-09-06)

Features

  • 🎸 Add support for loading state for file upload (ed4991d), closes #303371

12.13.1 (2021-08-11)

Bug Fixes

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Bug Fixes

Code Refactoring

Features

  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner
  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 Footer is now renamed to Global Footer
  • 🧨 Crosslinks have seized to exist. They are all extracted into separate

components. This commit converts crosslink buttons into the new component Shortcuts

10.0.0 (2021-02-15)

Code Refactoring

  • 💡 Rename form-group to input-wrapper (7ee3bae)

BREAKING CHANGES

  • 🧨 form-group is now renamed to input-wrapper, a more logical name

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

6.42.0 (2020-10-22)

Bug Fixes

  • 🐛 Remove margins from file-upload button (962f01c)
  • 🐛 Use correct inclusion of mixins (d4b2232)

6.36.0 (2020-10-12)

Features

  • 🎸 Add updated focus styling to file-upload (4aaf6c6)

6.22.0 (2020-07-01)

Bug Fixes

  • 🐛 Use correct colors for disabled states in input controls (a0862db)

Features

  • 🎸 Add new color categories, update documentation (5496822)

6.16.1 (2020-05-20)

Bug Fixes

  • 🐛 Fix routing for dev server (295db6e)

6.11.0 (2020-04-22)

Bug Fixes

  • 🐛 Add sr only text for footer logo link (2971dd9)

6.5.4 (2020-04-08)

Bug Fixes

6.4.2 (2020-04-03)

Bug Fixes

  • 🐛 Remove misuse of unset, none, auto and initial (87624d7)
  • 🐛 Use initial instead of none and unset (d75bc65)

6.1.0 (2020-03-25)

Features

  • 🎸 Add new component file upload (40942fa)
Edit this section, Opens in new window
Contact us, Opens in new window