Add file uploader component

[hartsick]

@bengolder has requested a file uploader component or reference for use on Workforce.

We currently have a couple of different file uploader patterns present in GCF, Colorado, and (soon) Alaska. @racheledelman and @norrishung are meeting soon to see if they can converge on a design, and that's what we should pull into the styleguide.

An open question: the file uploader may be opinionated about backend implementation, depending on how much of it we bring into the styleguide. How should we handle?

[hartsick]

We're going to be implementing the new file upload pattern in Colorado as https://www.pivotaltracker.com/n/projects/2123705 (only viewable by IBI team members). Once that's done, we can pull into styleguide.

[rustyritz]

Hi! Bump on this one. Since it's already built and live - let's add it to the styleguide.

[hartsick]

@rustyritz there's some work to extract and generalize the component once it's built in a project. Luigi had already started in doing this for the file uploader, so just checked in with him about that progress. https://github.com/codeforamerica/cfa-styleguide-gem/pull/92

In the meantime, is someone wanting to use this right now? If so, are they looking for the design reference, HTML reference, or Ruby code that could be used in a Rails project? Want to know how we can be helpful.

[rustyritz]

@hartsick Thanks! We are planning on using this component for the AB 1793 document uploader (Rap Assist). Eng work hasn't begun yet but will next (?) week.

[bengolder]

We have an immediate need on EITC for a simple, admin-facing file upload. Putting an HTML file input and giving some default styling currently results in something less than desirable.

<%= f.cfa_input_field(:document_bundle, 'Documents bundle', type: 'file', classes: ["file-input"]) %>

<div class="form-group">
<label for="intake_site_drop_off_document_bundle">
<p class="form-question">Documents bundle</p>
</label>
<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="file" class="file-input text-input" id="intake_site_drop_off_document_bundle" value="#<ActiveStorage::Attached::One:0x00007feab123b3a8>" name="intake_site_drop_off[document_bundle]">
</div>