UI: Import: Drag and drop area

Context

Once the user clicks 'Import your files' from the dashboard, they are taken to an import page. On this page we need a place for the user to drag and drop their chapter files.

They can drop 1 or more files at a time (bulk upload must be supported).

Only .doc, .docx are supported so if the user drops a different file format, reject the upload of that file and display a notice: Only .doc and .docx formats are supported.

As files are dropped into that area, they will appear on the right as in #14 (closed).

Design

1. Add the drag and drop area to the Import page as in the Figma design here and here and shown in the two mockups below:

2. Also add validation and a warning for when files that are not .doc or .docx are uploaded by the user (we don't have a design for that).

Implementation (if applicable)

[A description of the steps to implement the feature.]

Alternative approaches (if applicable)

[Include any alternatives to meet this use case.]

Open issues (if applicable)

[Links to and a discussion of related issues, if applicable.]