Allow for customised file uploads

.changeset/fuzzy-zebras-change.md

@@ -0,0 +1,5 @@
+---
+"@newfrontdoor/s3-file-upload": minor
+---
+
+Add `use-s3-dropzone` hook for S3 file uploads

packages/s3-file-upload/__tests__/s3-dropzone.test.tsx

@@ -68,7 +68,7 @@ test('it renders a dropzone', async () => {
     [
       'Upload Audio',
       'Drag ‘n’ drop some files here, or click to select files',
-      'Try dropping an audio file here, or click to select file for upload.'
+      'Try dropping a file here, or click to select file for upload.'
     ].join('')
   );
 

packages/s3-file-upload/src/index.ts

@@ -1,2 +1,3 @@
 export {S3Dropzone} from './s3-dropzone';
-export {useS3FileUpload} from './use-s3-file-upload';
+export * from './use-s3-file-upload';
+export * from './use-s3-dropzone';

packages/s3-file-upload/src/s3-dropzone.tsx

@@ -2,9 +2,8 @@
 import {jsx} from 'theme-ui';
 import {cloneElement, FC} from 'react';
 import PropTypes from 'prop-types';
-import {useDropzone} from 'react-dropzone';
 import {ScaleLoader} from 'react-spinners';
-import {useS3FileUpload, UploadFileResult} from './use-s3-file-upload';
+import {useS3Dropzone, UploadFileResult} from './use-s3-dropzone';
 
 const baseStyle = {
   borderWidth: 2,
@@ -29,6 +28,10 @@ export type S3DropzoneProps = {
   uploadUrl: string;
   title?: string;
   initialFileName?: string;
+  errorJSX?: React.ReactElement;
+  loadingJSX?: React.ReactElement;
+  accept?: string | string[];
+  customElementTitle?: string;
   onChange(result?: UploadFileResult): void;
 };
 
@@ -47,25 +50,18 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
     isError,
     isSuccess,
     isIdle,
-    startFileUpload
-  } = useS3FileUpload({
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragReject
+  } = useS3Dropzone({
     host,
     uploadUrl,
-    initialFileName
+    initialFileName,
+    accept: 'audio/*',
+    onChange,
   });
 
-  const {getRootProps, getInputProps, isDragActive, isDragReject} = useDropzone(
-    {
-      accept: 'audio/*',
-      onDrop(acceptedFiles) {
-        const [firstFile] = acceptedFiles;
-        void startFileUpload(firstFile).then((result) => {
-          onChange(result);
-        });
-      }
-    }
-  );
-
   let styles = {...baseStyle};
   styles = isDragActive ? {...styles, ...activeStyle} : styles;
   styles = isDragReject ? {...styles, ...rejectStyle} : styles;
@@ -123,7 +119,7 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
             <p>Unsupported file type...</p>
           ) : (
             <p>
-              Try dropping an audio file here, or click to select file for
+              Try dropping a file here, or click to select file for
               upload.
             </p>
           )}

packages/s3-file-upload/src/use-s3-dropzone.ts

@@ -0,0 +1,68 @@
+import {useDropzone, DropzoneState} from 'react-dropzone';
+import {useS3FileUpload, UploadFileResult} from './use-s3-file-upload';
+export type {UploadFileResult} from './use-s3-file-upload';
+
+export type S3DropzoneOptions = {
+  host: string;
+  uploadUrl: string;
+  title?: string;
+  initialFileName?: string;
+  errorJSX?: React.ReactElement;
+  loadingJSX?: React.ReactElement;
+  accept?: string | string[];
+  customElementTitle?: string;
+  onChange(result?: UploadFileResult): void;
+};
+
+export type S3DropzoneState = DropzoneState & {
+  fileUrl: URL | null,
+  fileName?: string,
+  isLoading: boolean,
+  isError: boolean,
+  isSuccess: boolean,
+  isIdle: boolean,
+}
+
+export function useS3Dropzone({
+  host,
+  uploadUrl,
+  initialFileName,
+  accept,
+  onChange
+}: S3DropzoneOptions): S3DropzoneState {
+  const {
+    fileUrl,
+    fileName,
+    isLoading,
+    isError,
+    isSuccess,
+    isIdle,
+    startFileUpload
+  } = useS3FileUpload({
+    host,
+    uploadUrl,
+    initialFileName
+  });
+
+  const dropzoneState = useDropzone(
+    {
+      accept,
+      onDrop(acceptedFiles) {
+        const [firstFile] = acceptedFiles;
+        void startFileUpload(firstFile).then((result) => {
+          onChange(result);
+        });
+      }
+    }
+  );
+
+  return {
+    fileUrl,
+    fileName,
+    isLoading,
+    isError,
+    isSuccess,
+    isIdle,
+    ...dropzoneState
+  }
+}