# File Uploader

This component allows a user to upload files other via dropping a file into the "zone" or by clicking on the prompt and selecting a file from the file dialog.

## Usage

Uploading a file will trigger `onDropAttachmentHandler`. Removing a file will trigger `onClickRemoveHandler`.

The `acceptedFileTypes` should be a comma separated string of extensions (including the period).

### Reading a file

In order to read a file, it is recommended to use the `promise-file-reader` package.

You can then:
```js
// Example: https://github.com/wealthsimple/marketing-ui/blob/master/src/portfolio-review/store/portfolio-review-wizard/portfolio-review-wizard.actions.js#L40-L63

import { readAsDataURL } from 'promise-file-reader';

const content = readAsDataURL(attachment);
// content will be a base64 encoded version of the file
```

### Decoding a file

When you send a file to a server, you may want to upload it to `DocumentService`.

Assuming you sent the encoded content and the filename as mentioned above, you could do so like this:

This will require decoding the file:
```rb
// Example: https://github.com/wealthsimple/review/blob/master/app/services/attachment_uploader.rb

def decode_data_url(data_url)
  start = data_url.index(';base64,') + 8
  file_content = data_url[start..-1]
  Base64.decode64(file_content)
end

def upload_attachment_to_document_service(attachment)
  extension = File.extname(attachment['filename'])
  new_document = DocumentService::Document.new!(
    filename: "#{@prospect.canonical_id}-statement-#{UUID.generate(5)}#{extension}", # Modify as desired
  )
  RestClient.put(new_document.upload_url, decode_data_url(attachment['content']))
  DocumentService::Document.create!({
    resource_type: 'Prospect', # Change to the right resource type
    resource_id: @prospect.canonical_id, # Change to the right resource ID
    s3_key: new_document.s3_key,
    document_type: 'prospect_investment_statement', # Change to the right document type
    date: Date.today,
  })
end
```

### Handler examples

#### onDropAttachmentHandler

```js
// Source: https://github.com/wealthsimple/marketing-ui/blob/master/src/portfolio-review/components/steps/portfolio-upload.step.js#L26-L28
const onDropAttachmentHandler = props => newAttachments => props.updateProspect({
  attachments: concat(newAttachments, props.attachments),
});
```

#### onClickRemoveHandler
```js
// Source: https://github.com/wealthsimple/marketing-ui/blob/master/src/portfolio-review/components/steps/portfolio-upload.step.js#L30-L32
const onClickRemoveHandler = props => removeAttachment => props.updateProspect({
  attachments: (props.attachments).filter(attachment => attachment !== removeAttachment),
});
```

### Appendix

React Dropzone - https://react-dropzone.js.org/

