Add ability to cancel uploads in processFile

[raystorm]

On which framework/platform would you like to see this feature implemented?

React

Which UI component is this feature-request for?

Storage (Storage Manager)

Please describe your feature-request in detail.

I am building an Enterprise Content Management System / Digital Asset Management System with Amplify.
I am storing files in an S3 bucket. I have a page, that lets users fill out metadata related to a file, and upload the file. I am adding a check to see if a file with the same name already exists in the bucket or not. If the file already exists, I want to cancel the upload and report an error message to the user, so they don't accidentally overwrite the existing file.

I am running the following amplify versions:

"dependencies": {
  "@aws-amplify/core": "^5.8.11",
  "@aws-amplify/ui-react": "^5.3.3",
  "@aws-amplify/ui-react-storage": "^2.3.3",
  "aws-amplify": "^5.3.17",
}

Note:
I have not filed a bug report for the following issues I found while trying to programmatically cancel a running upload.

1. Rejecting the promise from processFile() bubbles all they way to the top of the app, like a JSX syntax error does.
2. clearFiles() Clears the FileList but does not fire any of the associated events for removing the files or canceling uploads. onRemoveUpload() && onCancelUpload()

Let me know if I should file Bug Reports for those issues I found.

---

TLDR: I want to be able to cancel currently running file upload in processFile() if file checks fail.

Please describe a solution you'd like.

In the async processFile() Handler, I would like to return reject the promise.

return Promise.Reject('File already exists');

---

Alternate Solution Use a reference to cancel all Uploads similar to clearFiles();

ref.current.cancelUploads();

---

Alternate Solution 2
Disable Auto Upload, and programmatically start the upload in processFile(). processFile() doesn't run until the upload is started, even if I could figure out how to call the start button.

---

Alternate Solution 3
Call the onCancelUpload() or onRemoveUpload() events for the file.
They are not callable from the processFile object, and I couldn't figure out how to access them from the component.

We love contributors! Is this something you'd be interested in working on?

• [ ] 👋 I may be able to implement this feature request.
• [ ] ⚠️ This feature might incur a breaking change.

[esauerbo]

Hey @raystorm thanks for opening this. We're adding this to our roadmap to consider for future feature work.

[raystorm]

I initially didn't check the 👋 I may be able to implement this feature request. box, because I had other work in my own backlog ahead of this, and I wasn't sure I understood @aws-amplify/ui-react-storage's implementation enough to attempt a fix.
I have cleared my own backlog, to the point where I am ready to look into this.
I'm still exploring the Logic of how to build and test @aws-amplify/ui-react-storage but since I have started exploring this, I figured I should come back and update this issue.

[lwang-79]

I encountered the same problem, so I have to use DragZone component instead of the StorageManager.