[DropZone] Allow duplicate files to be uploaded consecutively/ removed and added again

[elileto]

WHY are these changes introduced?

Resolves #425

WHAT is this pull request doing?

This is addressing the issue that the DropZone will not allow duplicate files to be added consecutively. This also caused issues when a file was removed , it could not be added again.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {
  Page,
  Stack,
  Thumbnail,
  DropZone,
  Button,
  Card,
  Caption,
} from '@shopify/polaris';

interface State {}

export default class Playground extends React.Component<{}, State> {
  state = {
    files: [],
  };

  render() {
    const {files} = this.state;
    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

    const fileUpload = !files.length && <DropZone.FileUpload />;
    const uploadedFiles = files.length > 0 && (
      <Stack vertical>
        {files.map((file, index) => (
          <Stack alignment="center" key={index}>
            <Thumbnail
              size="small"
              alt={file.name}
              source={
                validImageTypes.indexOf(file.type) > 0
                  ? window.URL.createObjectURL(file)
                  : 'https://cdn.shopify.com/s/files/1/0757/9955/files/New_Post.png?12678548500147524304'
              }
            />
            <div>
              {file.name} <Caption>{file.size} bytes</Caption>
            </div>
          </Stack>
        ))}
      </Stack>
    );

    return (
      <Card>
        <Stack vertical>
          <Button
            plain
            onClick={() => this.setState({files: []}, () => console.log())}
          >
            Remove
          </Button>
          <DropZone
            onDrop={(files) =>
              this.setState({files: [...this.state.files, ...files]}, () =>
                console.log(files),
              )
            }
            // onClick={() => console.log('HELP IM A TINY MAN STUCK IN A BOX!')}
          >
            {uploadedFiles}
            {fileUpload}
          </DropZone>
        </Stack>
      </Card>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[elileto]

Will add a UNRELEASED and some testing tomorrow.

[elileto]

@AndrewMusgrave and I are going to refactor the drop zone testing page in the new year.

[elileto]

This is still a WIP . I'll re-ping once its ready to go! @solonaarmstrong @AndrewMusgrave but feel free to leave comments if you see anything that stands out.

[elileto]

@solonaarmstrong @AndrewMusgrave this is ready for your review :)

[AndrewMusgrave]

Other than @solonaarmstrong comment 💯

[jzsplk]

👍