Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Drag and drop

Drag and drop (or browse) to upload a file.

Drag and drop-pattern

Guidelines

Short description

This component lets the user "drag and drop" a file in a droppable area. It is also combined with a standard upload by browsing functionality. The user can upload more than one file when using the drag and drop.

When and how to use it

Use this component on a separate page or a wizard, but it might look different in functionality related to messaging.

Behaviour

This component has different states:

1. Default state – nothing has yet been nether dragged or dropped

2. Uploading progress

  • 2a. Browsing – if the user clicks “browse” and instead selects a file on the device to upload
  • 2b. Droppable – a state when the user hovers with a file over the droppable area

3. Uploading - a progressbar that shows the progress of the uploading

4. Feedback and table – we show feedback to the user when uploading is finished. We also display a table below the droppable area, in which the user sees the file(s) that has been uploaded. In this table, the user can also delete the file.

5. Default and table. The feedback displays for 3 seconds and then switches back to state 1, default state, and the user can upload more files.

 

Do's and don'ts

  • Combine with toast notifications if the user uploads a file that we don't accept, might be harmful, or more files than we can handle. Make sure to use proper instructions for each state (drag/upload, drop, uploading, feedback). Display the table when the first file has been uploaded.

Page last updated

Feedback

Was this helpful?