Modify File Input to accept multiple files

.storybook/styles/components/_forms.scss

@@ -296,7 +296,7 @@ Uploader
     }
   }
 
-  .button-secondary-light>input{
+  input[type="file"]{
     position:absolute;
     top:0;
     right:0;
@@ -579,4 +579,4 @@ Color Picker
   .hex{
     @include position(absolute, 35px null null 38px);
   }
-}
+}

docs.md

@@ -423,19 +423,22 @@ export default TodoForm
 
 ## CloudinaryFileInput
 
-A wrapper around the [FileInput][38] component that automatically uploads files to cloudinary via the [cloudinaryUploader][159] HOC.
-The value of this input is the public URL of the uploaded file.
+A wrapper around a file input component (defaults to [FileInput][46]) that automatically uploads files to cloudinary via the [cloudinaryUploader][145] HOC.
+
+The value of this input will only get set upon successful upload. The shape of the value will be of a file object or an array of file objects with the `url` set to the public URL of the uploaded file. The full response from Cloudinary is accessible via the value's `meta.cloudinary` key.
+
 Additionally, the `uploadStatus` passed down from `cloudinaryUploader` will be added as a class on the input.
 
 You can pass arguments to the instance of `cloudinaryUploader` via this component's props,
 or via the `CLOUDINARY_CLOUD_NAME` and `CLOUDINARY_BUCKET` env vars (recommended).
 
 ### Parameters
 
--   `input` **[Object][156]** A `redux-forms` [input][157] object
--   `meta` **[Object][156]** A `redux-forms` [meta][158] object
--   `onUploadSuccess` **[Function][150]?** A handler that gets invoked with the response from a successful upload to Cloudinary
--   `onUploadFailure` **[Function][150]?** A handler that gets invoked with the error from a failed upload to Cloudinary
+-   `input` **[Object][142]** A `redux-forms` [input][140] object
+-   `meta` **[Object][142]** A `redux-forms` [meta][143] object
+-   `fileInput` **[Function][135]** A component that gets wrapped with Cloudinary upload logic (optional, default `FileInput`)
+-   `onUploadSuccess` **[Function][135]** A handler that gets invoked with the response from a successful upload to Cloudinary (optional, default `noop`)
+-   `onUploadFailure` **[Function][135]** A handler that gets invoked with the error from a failed upload to Cloudinary (optional, default `noop`)
 
 ### Examples
 
@@ -570,26 +573,28 @@ export default TodoForm
 ## FileInput
 
 A file input that can be used in a `redux-forms`-controlled form.
-The value of this input is the data URL of the loaded file.
+The value of this input is a file object or an array of file objects with the `url` set to the base64 encoded data URL of the loaded file(s).
 
-An optional callback can be fired when the file is loaded: `onLoad(fileData, file)`.
-This callback will be passed the data URL of the file, as well as the `File` object itself.
+Allowing multiple files to be selected requires passing in the `multiple` prop set to `true`. Multiple files can then be uploaded either all at once or piecemeal. Once a file has successfully been loaded, it is possible to remove the file object from the current set of values. An optional callback can be fired when a file is removed: `onRemove(removedFile)`. To customize the component that receives this `onRemove` handler, pass in a cutom component to the `removeComponent` prop.
 
-By default, this component displays a thumbnail preview of the loaded file. This preview can be customized
+By default, this component displays a thumbnail preview of the loaded file(s). This preview can be customized
 by using the `thumbnail` or `hidePreview` props, as well as by passing a custom preview via `previewComponent` or `children`.
 
 A component passed using `previewComponent` will receive the following props:
 
--   `file`: the uploaded file object, or `null` if no file has been uploaded.
--   `value`: the current value of the input (data URL or empty string)
+-   `value`: the current value of the input (file object or array of file objects)
 
 ### Parameters
 
--   `input` **[Object][156]** A `redux-forms` [input][157] object
--   `meta` **[Object][156]** A `redux-forms` [meta][158] object
--   `onLoad` **[Function][150]?** A callback fired when the file is loaded
--   `thumbnail` **[String][149]?** A placeholder image to display before the file is loaded
--   `hidePreview` **[Boolean][151]?** A flag indicating whether or not to hide the file preview
+-   `input` **[Object][142]** A `redux-forms` [input][140] object
+-   `meta` **[Object][142]** A `redux-forms` [meta][143] object
+-   `readFiles` **[Function][135]?** A callback that is fired with new files and is expected to return an array of file objects with the `url` key set to the "read" value. This can be either a data URL or the public URL from a 3rd party API
+-   `multiple` **[Boolean][136]** A flag indicating whether or not to accept multiple files (optional, default `false`)
+-   `onRemove` **[Function][135]** A callback fired when the file is removed (only available when `multiple` is set to `true`) (optional, default `noop`)
+-   `removeComponent` **[Function][135]** A custom component that receives the `onRemove` callback (only available when `multiple` is set to `true`) (optional, default `RemoveButton`)
+-   `thumbnail` **[String][134]?** A placeholder image to display before the file is loaded
+-   `hidePreview` **[Boolean][136]** A flag indicating whether or not to hide the file preview (optional, default `false`)
+-   `selectText` **[String][134]?** An override for customizing the text that is displayed on the input's label. Defaults to 'Select File' or 'Select File(s)' depending on the `multiple` prop value
 
 ### Examples
 
@@ -601,6 +606,7 @@ function HeadshotForm ({ handleSubmit, pristine, invalid, submitting }) {
          name="headshot"
          component={ FileInput }
          onLoad={ (fileData, file) => console.log('Loaded file!', file) }
+         selectText="Select profile picture"
       />
       <SubmitButton {...{ pristine, invalid, submitting }}>
         Submit

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "5.4.1",
+  "version": "6.0.0",
   "engines": {
     "node": "^8.0.0 || ^10.13.0 || ^12.0.0"
   },

src/forms/helpers/cast-form-value-to-array.js

@@ -0,0 +1,9 @@
+import { castArray } from '../../utils'
+
+// Casts value(s) to an array
+function castFormValueToArray (value) {
+  if (!value) return []
+  return castArray(value)
+}
+
+export default castFormValueToArray

src/forms/helpers/field-prop-types.js

@@ -128,3 +128,15 @@ export const checkboxGroupPropTypes = fieldPropTypesWithValue(
     ])
   )
 )
+
+const file = PropTypes.shape({
+  file: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  fileUpload: PropTypes.object,
+  fileData: PropTypes.string,
+})
+
+export const fileInputPropTypes = fieldPropTypesWithValue(
+  PropTypes.arrayOf(file).isRequired,
+)

src/forms/helpers/index.js

@@ -1,4 +1,5 @@
 export blurDirty from './blur-dirty'
+export castFormValueToArray from './cast-form-value-to-array'
 export convertNameToLabel from './convert-name-to-label'
 export DropdownSelect from './dropdown-select'
 export fromHex from './from-hex'
@@ -8,3 +9,4 @@ export omitLabelProps from './omit-label-props'
 export replaceEmptyStringValue from './replace-empty-string-value'
 export toHex from './to-hex'
 export hasInputError from './has-input-error'
+export readFilesAsDataUrls from './read-files-as-data-urls'

src/forms/helpers/read-files-as-data-urls.js

@@ -0,0 +1,43 @@
+import { isServer } from '../../utils'
+
+// Reads files and returns objects with file information and base64 encoded string url
+async function readFilesAsDataUrls (files) {
+  const filePromises = files.map(async (file) => {
+    const fileData = await readFile(file)
+    return createFileValueObject(file, fileData)
+  })
+
+  return Promise.all(filePromises)
+}
+
+// ----- PRIVATE ------
+
+// Read a file and convert it to a base64 string (promisified)
+function readFile (file) {
+  return new Promise((resolve, reject) => {
+    if (isServer()) return resolve()
+    // eslint-disable-next-line no-undef
+    const reader = new window.FileReader()
+    reader.onload = (readEvent) => {
+      resolve(readEvent.target.result)
+    }
+    reader.onerror = reject
+
+    reader.readAsDataURL(file)
+  })
+}
+
+// Copy metadata related to a file, but not the actual File object. These
+// properties are not enumerable / visible in Redux.
+function createFileValueObject (file, dataUrl='') {
+  return {
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    lastModified: file.lastModified,
+    url: dataUrl,
+  }
+}
+
+export default readFilesAsDataUrls
+

src/forms/inputs/cloudinary-file-input.js

@@ -1,33 +1,35 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import FileInput from './file-input'
-import { fieldPropTypes } from '../helpers'
-import { compose, cloudinaryUploader, noop } from '../../utils'
+import DefaultFileInput from './file-input'
+import { fileInputPropTypes, readFilesAsDataUrls } from '../helpers'
+import { compose, cloudinaryUploader, first, noop, set } from '../../utils'
 import classnames from 'classnames'
 
 /**
+ * A wrapper around a file input component (defaults to {@link FileInput}) that automatically uploads files to cloudinary via the [cloudinaryUploader](https://github.com/LaunchPadLab/lp-hoc/blob/master/docs.md#cloudinaryuploader) HOC.
+ *
+ * The value of this input will only get set upon successful upload. The shape of the value will be of a file object or an array of file objects with the `url` set to the public URL of the uploaded file. The full response from Cloudinary is accessible via the value's `meta.cloudinary` key.
  *
- * A wrapper around the {@link FileInput} component that automatically uploads files to cloudinary via the [cloudinaryUploader](https://github.com/LaunchPadLab/lp-hoc/blob/master/docs.md#cloudinaryuploader) HOC.
- * The value of this input is the public URL of the uploaded file.
  * Additionally, the `uploadStatus` passed down from `cloudinaryUploader` will be added as a class on the input.
- * 
+ *
  * You can pass arguments to the instance of `cloudinaryUploader` via this component's props,
  * or via the `CLOUDINARY_CLOUD_NAME` and `CLOUDINARY_BUCKET` env vars (recommended).
- * 
  *
  * @name CloudinaryFileInput
  * @type Function
  * @param {Object} input - A `redux-forms` [input](http://redux-form.com/6.5.0/docs/api/Field.md/#input-props) object
  * @param {Object} meta - A `redux-forms` [meta](http://redux-form.com/6.5.0/docs/api/Field.md/#meta-props) object
- * @param {Function} [onUploadSuccess] - A handler that gets invoked with the response from a successful upload to Cloudinary
- * @param {Function} [onUploadFailure] - A handler that gets invoked with the error from a failed upload to Cloudinary
+ * @param {Function} [fileInput=FileInput] - A component that gets wrapped with Cloudinary upload logic
+ * @param {Boolean} [multiple=false] - A flag indicating whether or not to accept multiple files
+ * @param {Function} [onUploadSuccess=noop] - A handler that gets invoked with the response from a successful upload to Cloudinary
+ * @param {Function} [onUploadFailure=noop] - A handler that gets invoked with the error from a failed upload to Cloudinary
  * @example
- * 
+ *
  * function HeadshotForm ({ handleSubmit, pristine, invalid, submitting }) {
  *   return (
  *     <form onSubmit={ handleSubmit }>
- *       <Field 
- *          name="headshotUrl" 
+ *       <Field
+ *          name="headshotUrl"
  *          component={ CloudinaryFileInput }
  *          cloudName="my-cloudinary-cloud"
  *          bucket="my-cloudinary-bucket"
@@ -41,38 +43,64 @@ import classnames from 'classnames'
  */
 
 const propTypes = {
-  ...fieldPropTypes,
+  ...fileInputPropTypes,
+  fileInput: PropTypes.func,
+  multiple: PropTypes.bool,
   onUploadFailure: PropTypes.func,
   onUploadSuccess: PropTypes.func,
   upload: PropTypes.func.isRequired,
   uploadStatus: PropTypes.string.isRequired,
 }
 
 const defaultProps = {
+  fileInput: DefaultFileInput,
+  multiple: false,
   onUploadSuccess: noop,
   onUploadFailure: noop,
 }
 
-function CloudinaryFileInput ({ 
+function mapCloudinaryResponse (file, response) {
+  return compose(
+    set('url', response.url),
+    set('meta.cloudinary', response)
+  )(file)
+}
+
+function CloudinaryFileInput ({
   input,
   className,
   onUploadFailure,
   onUploadSuccess,
-  upload, 
-  uploadStatus, 
-  ...rest 
+  upload,
+  uploadStatus,
+  fileInput: FileInput,
+  multiple,
+  ...rest
 }) {
-  const { onChange } = input
   return (
-     <FileInput
-      input={{ ...input, onChange: noop }}
-      onLoad={ (fileData, file) => upload(fileData, file)
-        .then((res) => {
-          onChange(res.url)
-          return onUploadSuccess(res)
-        }, (err) => onUploadFailure(err))
-      }
+    <FileInput
+      input={ input }
+      readFiles={async (files) => {
+        let uploadedFiles = null
+        try {
+          const filesWithDataUrls = await readFilesAsDataUrls(files)
+          const uploadFilePromises = filesWithDataUrls.map(async (file) => {
+            const cloudinaryRes = await upload(file.url, file)
+            return mapCloudinaryResponse(file, cloudinaryRes)
+          })
+
+          uploadedFiles = await Promise.all(uploadFilePromises)
+        } catch (e) {
+          onUploadFailure(e)
+          throw e
+        }
+
+        const successResponse = multiple ? uploadedFiles : first(uploadedFiles)
+        onUploadSuccess(successResponse)
+        return uploadedFiles
+      }}
       className={ classnames(uploadStatus, className) }
+      multiple={multiple}
       { ...rest }
     />
   )