React storage/cancel upload from process file

.changeset/wet-steaks-smile.md

@@ -0,0 +1,8 @@
+---
+"@aws-amplify/ui-react-storage": patch
+---
+
+react-storage ability to cancel uploads from ProcessFile
+  This allows a user to return a rejected promise from `ProcessFile()` to cancel an in process upload,
+  before any data is sent to S3.
+

CONTRIBUTING.md

@@ -43,7 +43,7 @@ You should open an issue to discuss your pull request, unless it's a trivial cha
 1. Fork & Clone this repo (Make sure to disable associated GitHub Actions. In fork go to Settings > Actions > General > Disable actions > save)
 1. [`nvm install`](https://github.com/nvm-sh/nvm)
 1. [`nvm use`](https://github.com/nvm-sh/nvm)
-1. `yarn setup`
+1. `yarn setup` - _NOTE:_ if Cypress Fails to download during this step, delete `yarn.lock` and try again.
 1. Within your fork, create a new branch based on the issue you're addressing -- `git checkout -b angular/remove-browser-module`
 1. Once your work is committed, validate your changes according to [local development guides](#local-development-guides).
 1. Push your branch with `git push origin -u`

examples/next/pages/ui/components/storage/storage-manager/process-file-reject/aws-exports.js

@@ -0,0 +1,2 @@
+import awsExports from '@environments/storage/file-uploader/src/aws-exports';
+export default awsExports;

examples/next/pages/ui/components/storage/storage-manager/process-file-reject/index.page.tsx

@@ -0,0 +1,30 @@
+import { Amplify } from 'aws-amplify';
+import { withAuthenticator } from '@aws-amplify/ui-react';
+import {
+  StorageManager,
+  StorageManagerProps,
+} from '@aws-amplify/ui-react-storage';
+import '@aws-amplify/ui-react/styles.css';
+
+import awsExports from './aws-exports';
+Amplify.configure(awsExports);
+
+const processFile: StorageManagerProps['processFile'] = async ({ file }) => {
+  return Promise.reject({
+    error: 'This File should not be uploaded.',
+    key: file.name,
+  });
+};
+
+export function StorageManagerExample() {
+  return (
+    <StorageManager
+      acceptedFileTypes={['image/*']}
+      accessLevel="private"
+      maxFileCount={3}
+      showThumbnails={true}
+      processFile={processFile}
+    />
+  );
+}
+export default withAuthenticator(StorageManagerExample);

packages/react-storage/src/components/StorageManager/StorageManager.tsx

@@ -150,6 +150,7 @@ const StorageManagerBase = React.forwardRef(function StorageManager(
     setUploadingFile,
     setUploadProgress,
     setUploadSuccess,
+    removeUpload,
     processFile,
     path,
   });

packages/react-storage/src/components/StorageManager/hooks/useUploadFiles/__tests__/useUploadFiles.spec.ts

@@ -44,12 +44,15 @@ const mockSetUploadProgress = jest.fn();
 const mockSetUploadSuccess = jest.fn();
 const mockOnUploadError = jest.fn();
 const mockOnUploadStart = jest.fn();
+const mockRemoveUpload = jest.fn();
 const props: Omit<UseUploadFilesProps, 'files'> = {
   accessLevel: 'guest',
   maxFileCount: 2,
   setUploadingFile: mockSetUploadingFile,
   setUploadProgress: mockSetUploadProgress,
   setUploadSuccess: mockSetUploadSuccess,
+  removeUpload: mockRemoveUpload,
+  isResumable: false,
   onUploadError: mockOnUploadError,
   onUploadStart: mockOnUploadStart,
 };
@@ -190,6 +193,32 @@ describe('useUploadFiles', () => {
     });
   });
 
+  it('should remove upload after processFile promise rejects', async () => {
+    const processFile: StorageManagerProps['processFile'] = ({ file }) =>
+      Promise.reject({ file, key: 'test.png', error: 'forced test error' });
+
+    const { waitForNextUpdate } = renderHook(() =>
+      useUploadFiles({
+        ...props,
+        isResumable: true,
+        processFile,
+        files: [mockQueuedFile],
+      })
+    );
+
+    waitForNextUpdate();
+
+    await waitFor(() => {
+      expect(mockOnUploadError).toHaveBeenCalledWith('forced test error', {
+        key: 'test.png',
+      });
+    });
+
+    await waitFor(() => {
+      expect(mockRemoveUpload).toHaveBeenCalled();
+    });
+  });
+
   it('prepends valid provided `path` to `processedKey`', async () => {
     const path = 'test-path/';
     const { waitForNextUpdate } = renderHook(() =>

packages/react-storage/src/components/StorageManager/hooks/useUploadFiles/useUploadFiles.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { TransferProgressEvent } from 'aws-amplify/storage';
 import { isFunction } from '@aws-amplify/ui';
 
-import { PathCallback, uploadFile } from '../../utils';
-import { getInput } from '../../utils';
+import { PathCallback, getInput } from '../../utils';
+import { uploadFile } from '../../utils/uploadFile';
 import { FileStatus } from '../../types';
 import { StorageManagerProps } from '../../types';
 import { UseStorageManager } from '../useStorageManager';
@@ -21,7 +21,11 @@ export interface UseUploadFilesProps
     >,
     Pick<
       UseStorageManager,
-      'setUploadingFile' | 'setUploadProgress' | 'setUploadSuccess' | 'files'
+      | 'setUploadingFile'
+      | 'setUploadProgress'
+      | 'setUploadSuccess'
+      | 'files'
+      | 'removeUpload'
     > {
   accessLevel?: StorageManagerProps['accessLevel'];
   path?: string | PathCallback;
@@ -35,6 +39,7 @@ export function useUploadFiles({
   setUploadingFile,
   setUploadSuccess,
   onUploadError,
+  removeUpload,
   onUploadSuccess,
   onUploadStart,
   maxFileCount,
@@ -71,8 +76,10 @@ export function useUploadFiles({
           onProgress,
           path,
           processFile,
+          id,
+          onUploadError,
+          removeUpload,
         });
-
         uploadFile({
           input,
           onComplete: (event) => {
@@ -106,6 +113,7 @@ export function useUploadFiles({
     setUploadProgress,
     setUploadingFile,
     onUploadError,
+    removeUpload,
     onUploadSuccess,
     onUploadStart,
     maxFileCount,

packages/react-storage/src/components/StorageManager/types.ts

@@ -39,6 +39,7 @@ export type DefaultFile = Pick<StorageFile, 'key'>;
 export interface ProcessFileParams extends Record<string, any> {
   file: File;
   key: string;
+  error?: string;
 }
 
 export type ProcessFile = (

packages/react-storage/src/components/StorageManager/utils/__tests__/getInput.spec.ts

@@ -23,6 +23,9 @@ const inputBase: Omit<GetInputParams, 'path' | 'accessLevel'> = {
   key,
   onProgress,
   processFile: undefined,
+  id: '',
+  onUploadError: undefined,
+  removeUpload: () => {},
 };
 const pathStringInput: GetInputParams = {
   ...inputBase,

packages/react-storage/src/components/StorageManager/utils/getInput.ts

@@ -2,11 +2,12 @@ import { fetchAuthSession } from 'aws-amplify/auth';
 import { StorageAccessLevel } from '@aws-amplify/core';
 import { UploadDataWithPathInput, UploadDataInput } from 'aws-amplify/storage';
 
-import { isString, isTypedFunction } from '@aws-amplify/ui';
+import { isFunction, isString, isTypedFunction } from '@aws-amplify/ui';
 
-import { ProcessFile } from '../types';
+import { ProcessFile, ProcessFileParams, StorageManagerProps } from '../types';
 import { resolveFile } from './resolveFile';
 import { PathCallback, PathInput } from './uploadFile';
+import { UseStorageManager } from '../hooks';
 
 export interface GetInputParams {
   accessLevel: StorageAccessLevel | undefined;
@@ -15,6 +16,9 @@ export interface GetInputParams {
   onProgress: NonNullable<UploadDataWithPathInput['options']>['onProgress'];
   path: string | PathCallback | undefined;
   processFile: ProcessFile | undefined;
+  id: string;
+  onUploadError: StorageManagerProps['onUploadError'];
+  removeUpload: UseStorageManager['removeUpload'];
 }
 
 export const getInput = ({
@@ -24,6 +28,9 @@ export const getInput = ({
   onProgress,
   path,
   processFile,
+  id,
+  onUploadError,
+  removeUpload,
 }: GetInputParams) => {
   return async (): Promise<PathInput | UploadDataInput> => {
     const hasCallbackPath = isTypedFunction<PathCallback>(path);
@@ -35,7 +42,17 @@ export const getInput = ({
       file: data,
       key: fileKey,
       ...rest
-    } = await resolveFile({ file, key, processFile });
+    } = await resolveFile({ file, key, processFile }).catch(
+      (result: ProcessFileParams) => {
+        const { key, error } = result;
+        if (isFunction(onUploadError)) {
+          //TODO: localize this error.
+          onUploadError(error ?? `Error processing: ${key}`, { key: key });
+        }
+        removeUpload({ id });
+        return result;
+      }
+    );
 
     const contentType = file.type || 'binary/octet-stream';
 

packages/react/CONTRIBUTING.md

@@ -3,20 +3,29 @@
 ## Getting Started
 
 1. Navigate to the _root_ of your local clone of [aws-amplify/amplify-ui](https://github.com/aws-amplify/amplify-ui)
-1. Run `yarn setup`
+1. [`nvm install`](https://github.com/nvm-sh/nvm)
+1. [`nvm use`](https://github.com/nvm-sh/nvm)
+1. Run `yarn setup` - _NOTE:_ if Cypress Fails to download during this step, delete `yarn.lock` and try again.
 1. Run `yarn react dev`
 
-This will start building `@aws-amplify/ui-react` in watch mode. To test your changes, you can utilize [`examples/next`](../../examples/next) to run examples on `next.js`. Please see examples [README](../../examples/README.md) and e2e [README](../e2e/README.md#contributing) to get started.
+This will start building `@aws-amplify/ui-react` in watch mode.
+To test your changes, you can utilize [`examples/next`](../../examples/next)
+to run examples on `next.js`.
+Please see examples [README](../../examples/README.md) and e2e [README](../e2e/README.md#contributing) to get started.
 
 ## Dependencies
 
-`@aws-amplify/ui-react` depends on [`@aws-amplify/ui`](../ui) for theming, state management, and translation logic. If you're looking for change in these, please refer to `@aws-amplify/ui` [README](../ui/README.md).
+`@aws-amplify/ui-react` depends on [`@aws-amplify/ui`](../ui) for theming,
+state management, and translation logic.
+If you're looking for change in these,
+please refer to `@aws-amplify/ui` [README](../ui/README.md).
 
 ## Code Standards
 
 ### Imports
 
-Separate all imports into organized, alphabetical blocks of `third_party → internal → local` for easier reading.
+Separate all imports into organized,
+alphabetical blocks of `third_party → internal → local` for easier reading.
 
 ```js
 import { isEmpty } from 'lodash/isEmpty';
@@ -28,7 +37,8 @@ import { Button } from './primitives/Button';
 import { THIS_ENUM } from './utils/types';
 ```
 
-Do **NOT** use implicit paths like below. This can lead to circular dependencies unintentionally which is bad for tree shaking.
+Do **NOT** use implicit paths like below.
+This can lead to circular dependencies unintentionally which is bad for tree shaking.
 
 ```js
 import { Flex, Heading } from '../../..';
@@ -48,13 +58,19 @@ import { Heading } from '../../../primitives/Heading';
 
 ### Others
 
-Do **NOT** introduce any [side effects](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) unless you have to with rational reasons. A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports. An example of this are polyfills, which affect the global scope and usually do not provide an export. For example:
+Do **NOT** introduce any [side effects](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) unless you have to with rational reasons.
+A "side effect" is defined as code that performs a special behavior when imported,
+other than exposing one or more exports.
+An example of this are polyfills, which affect the global scope and usually do not provide an export.
+For example:
 
 ```js
 import './polyfill';
 ```
 
-Any imported file is subject to tree shaking, that means CSS file needs to be added to the side effect list so it will not be unintentionally dropped:
+Any imported file is subject to tree shaking,
+that means CSS file needs to be added to the side effect list so it will not be
+unintentionally dropped:
 
 ```js
 import './style.css';

turbo.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://turborepo.org/schema.json",
-  "baseBranch": "origin/main",
+  // "baseBranch": "origin/main",
   "pipeline": {
     "build": {
       "outputs": [".next/**", "dist/**"],