feat(upload, form-upload): allow headers to be passed as a function

packages/form-upload/src/Upload.js

@@ -198,7 +198,6 @@ const Upload = ({
       fileTypes: allowedFileTypes,
       maxSize,
       allowedFileNameCharacters,
-      customHeaders,
     };
 
     if (isCloud) options.endpoint = CLOUD_URL;
@@ -207,6 +206,8 @@ const Upload = ({
     let newTotalSize = 0;
 
     for await (const file of selectedFiles) {
+      options.headers = typeof customHeaders === 'function' ? customHeaders(file) : customHeaders;
+
       const upload = new UploadCore(file, options);
       await upload.generateId();
 
@@ -385,7 +386,7 @@ Upload.propTypes = {
   /** Set as true to show a drag and drop file upload option instead of a button (file explorer still available on click). */
   showFileDrop: PropTypes.bool,
   /** Set custom headers on the upload request */
-  customHeaders: PropTypes.object,
+  customHeaders: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 };
 
 export default Upload;

packages/form-upload/tests/Upload.test.tsx

@@ -344,7 +344,7 @@ describe('Upload', () => {
       <Form<{ upload: UploadCore[] | null }>
         initialValues={initialValues}
         onSubmit={(values) => {
-          mockFn(values.upload?.[0].options.customHeaders);
+          mockFn(values.upload?.[0].options.headers);
         }}
       >
         <Upload {...defaultUploadProps} customHeaders={customHeaders} onFileUpload={onFileUploadMock} />
@@ -375,6 +375,92 @@ describe('Upload', () => {
     });
   });
 
+  test('passes customHeaders function result to UploadCore options', async () => {
+    const customHeadersFunction = jest.fn((file: File) => ({
+      'X-File-Name': file.name,
+      'x-metadata-content-type': `application/${file.name.split('.').pop()?.toLowerCase()}`,
+    }));
+    const mockFn = jest.fn();
+    const onFileUploadMock = jest.fn();
+
+    render(
+      <Form<{ upload: UploadCore[] | null }>
+        initialValues={initialValues}
+        onSubmit={(values) => {
+          mockFn(values.upload?.[0].options.headers);
+        }}
+      >
+        <Upload {...defaultUploadProps} customHeaders={customHeadersFunction} onFileUpload={onFileUploadMock} />
+        <button type="submit">click</button>
+      </Form>
+    );
+
+    const file: UploadFile = Buffer.from('hello world');
+    file.name = 'fileName.png';
+    const fileEvent = { target: { files: [file] } };
+
+    const inputNode = screen.getByTestId('file-picker') as HTMLInputElement;
+
+    act(() => {
+      fireEvent.change(inputNode, fileEvent);
+    });
+
+    await waitFor(() => {
+      expect(onFileUploadMock).toHaveBeenCalled();
+      expect(customHeadersFunction).toHaveBeenCalledWith(file);
+    });
+
+    act(() => {
+      fireEvent.click(screen.getByText('click'));
+    });
+
+    await waitFor(() => {
+      expect(mockFn).toHaveBeenCalledWith({
+        'X-File-Name': 'fileName.png',
+        'x-metadata-content-type': 'application/png',
+      });
+    });
+  });
+
+  test('handles customHeaders as undefined', async () => {
+    const mockFn = jest.fn();
+    const onFileUploadMock = jest.fn();
+
+    render(
+      <Form<{ upload: UploadCore[] | null }>
+        initialValues={initialValues}
+        onSubmit={(values) => {
+          mockFn(values.upload?.[0].options.headers);
+        }}
+      >
+        <Upload {...defaultUploadProps} onFileUpload={onFileUploadMock} />
+        <button type="submit">click</button>
+      </Form>
+    );
+
+    const file: UploadFile = Buffer.from('hello world');
+    file.name = 'fileName.png';
+    const fileEvent = { target: { files: [file] } };
+
+    const inputNode = screen.getByTestId('file-picker') as HTMLInputElement;
+
+    act(() => {
+      fireEvent.change(inputNode, fileEvent);
+    });
+
+    await waitFor(() => {
+      expect(onFileUploadMock).toHaveBeenCalled();
+    });
+
+    act(() => {
+      fireEvent.click(screen.getByText('click'));
+    });
+
+    await waitFor(() => {
+      expect(mockFn).toHaveBeenCalledWith(undefined);
+    });
+  });
+
   describe('dropzone', () => {
     // start msw server
     beforeAll(() => server.listen());

packages/upload/src/Upload.js

@@ -54,6 +54,8 @@ class Upload extends Component {
       // eslint-disable-next-line unicorn/prefer-spread
       this.files.concat(
         selectedFiles.map(async (file) => {
+          const headers =
+            typeof this.props.customHeaders === 'function' ? this.props.customHeaders(file) : this.props.customHeaders;
           const options = {
             bucketId: this.props.bucketId,
             customerId: this.props.customerId,
@@ -62,7 +64,7 @@ class Upload extends Component {
             maxSize: this.props.maxSize,
             onPreStart: this.props.onFilePreUpload || [],
             allowedFileNameCharacters: this.props.allowedFileNameCharacters,
-            headers: this.props.customHeaders,
+            headers,
           };
 
           if (this.props.endpoint) options.endpoint = this.props.endpoint;
@@ -290,7 +292,7 @@ Upload.propTypes = {
   /** Override the endpoint used for uploading the file(s) */
   endpoint: PropTypes.string,
   /** Set custom headers on the upload request */
-  customHeaders: PropTypes.object,
+  customHeaders: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 };
 
 Upload.defaultProps = {

packages/upload/tests/Upload.test.js

@@ -331,4 +331,75 @@ describe('Upload', () => {
       expect(mockFn).toHaveBeenCalledWith(customHeaders);
     });
   });
+
+  test('passes customHeaders function result to UploadCore options', async () => {
+    const customHeadersFunction = jest.fn((file) => ({
+      'X-File-Name': file.name,
+      'x-metadata-content-type': `application/${file.name.split('.').pop()?.toLowerCase()}`,
+    }));
+    const mockFn = jest.fn();
+
+    render(
+      <Upload
+        clientId="a"
+        bucketId="b"
+        customerId="c"
+        customHeaders={customHeadersFunction}
+        onFilePreUpload={[
+          (file) => {
+            mockFn(file.options.headers);
+          },
+        ]}
+      />
+    );
+
+    const file = Buffer.from('hello world');
+    file.name = 'fileName.png';
+    const fileEvent = { target: { files: [file] } };
+
+    const inputNode = screen.getByTestId('file-picker');
+
+    fireEvent.change(inputNode, fileEvent);
+
+    expect(inputNode.files.length).toBe(1);
+
+    await waitFor(() => {
+      expect(customHeadersFunction).toHaveBeenCalledWith(file);
+      expect(mockFn).toHaveBeenCalledWith({
+        'X-File-Name': 'fileName.png',
+        'x-metadata-content-type': 'application/png',
+      });
+    });
+  });
+
+  test('handles customHeaders as undefined', async () => {
+    const mockFn = jest.fn();
+
+    render(
+      <Upload
+        clientId="a"
+        bucketId="b"
+        customerId="c"
+        onFilePreUpload={[
+          (file) => {
+            mockFn(file.options.headers);
+          },
+        ]}
+      />
+    );
+
+    const file = Buffer.from('hello world');
+    file.name = 'fileName.png';
+    const fileEvent = { target: { files: [file] } };
+
+    const inputNode = screen.getByTestId('file-picker');
+
+    fireEvent.change(inputNode, fileEvent);
+
+    expect(inputNode.files.length).toBe(1);
+
+    await waitFor(() => {
+      expect(mockFn).toHaveBeenCalledWith(undefined);
+    });
+  });
 });