Component: Multiple File Input

[slowbot]

Goal: As a user I want to attach multiple files.

Acceptance Criteria:
Organization:

• Locate ui-components/src/forms
• Product: Partners

Engineering Notes:

• Stub with default data
• Should be configureable to accept one or more items
• Should be configureable to accept specific file type
• When a user selects or drags documents to the file input, the file name and a thumbnail preview are listed.

Props:

• label - input label, string
• note - form element helper text, string
• multiple - one or multiple files, string
• file types - string

Accessibility:

• Each file input should have a . Associate the two by matching the ’s for attribute to the ’s id attribute.
• The file input component should be a progressive enhancement of . If the component doesn’t initialize, it should still work and appear like a standard file input.

Figma Mockup:
https://www.figma.com/file/Y8bFd0aSz7eYJ2TCNid6s3/bloom-partners?node-id=2717%3A158655

Related to this back end work: #1307

[seanmalbert]

This is the FrontEnd section from my comments on #1170 :

1. In ui-component/src/forms create a FileUpload.tsx which uses the react-dropzone-uploader package
2. In addition to some of the standard props the other form inputs receive, it should accept:
   • upload url
   • accepts (they type of assets it should accept, default to "image/*")
   • defaultValues
3. There are a myriad of examples out there using react dropzone with cloudinary, most of which show direct unsigned uploads, so if you're going off an example you found, the difference will be that you're going to send the file(s) to our backend for the secure upload to Cloudinary
4. As files are added, you should be able to check the file size and keep track of the total. We want to be able to notify the user when that limit is exceeded and not upload those files
5. you should get back from the response a file_id and label, these are the values that will get saved with the listing
6. since the server side listing service should be constructing the imageUrl for ImageCard (at least for now), you shouldn't have to change anything client side to render the image for the listing

[kathyccheng]

For the back end implementation, reference #1170

[jaredcwhite]

@seanmalbert In this comment it sounds like we are in fact going to get a pre-signed Cloudinary upload url to direct upload to, rather than upload the photo to our backend first. Is that your understanding? (and if so, can we update the description for this issue?) cc @pbn4

[jaredcwhite]

Leaving this issue open for now since multiple file upload support is still outstanding. The rest should be done and merged in.

[slowbot]

@jaredcwhite Is this ticket still relevant? Does multiple file input work for just photos or supported file types?

[jaredcwhite]

@slowbot It looks like the Dropzone component (mostly) has support for multiple file upload, but we didn't build the extra UI support into the Partners site to utilize that.