aws-amplify / aws-amplify/amplify-ui

[FR] provide file to StorageManager event callbacks

Open
#5,328 1 comment 0 reactions 0 assignees View on GitHub
feature-request Storage StorageManager
Dominant language
TypeScript
Stars
1.1k
Forks
347
Avg merge
18h 29m
Merged PRs (30d)
9

Description

### Before creating a new issue, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/discussions).
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#bug-reports).

### On which framework/platform are you having an issue?

React

### Which UI component?

Storage (Storage Manager)

### How is your app built?

Create React App

### What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari

### Which region are you seeing the problem in?

_No response_

### Please describe your bug.

The file prop is undefined in all callbacks (onFileRemove, onUploadStart, onUploadSuccess, onUploadError) except processFile. This inconsistency makes it difficult to manage file operations effectively.

### What's the expected behaviour?

The file prop should be defined and available in all callbacks, not just processFile.

### Help us reproduce the bug!

Include StorageManager
Implement callbacks for onFileRemove, onUploadStart, onUploadSuccess, and onUploadError
Observe that the file prop is undefined in these callbacks

### Code Snippet

```javascript
import React from 'react';
import { StorageManager } from "@aws-amplify/ui-react-storage";
import { v4 as uuidv4 } from 'uuid';

const ImageUploader = () => {

const processFile = ({ file, key }) => {
const fileExtension = file.name.split('.').pop();
const new_key = `${uuidv4()}.${fileExtension}`;
console.log("from processFile, file:", file);
return { file, key: new_key };
};

const handleFileRemove = ({ file, key }) => {
console.log("from onFileRemove, file:", file);
};

const handleUploadSuccess = ({ file, key }) => {
console.log("from onUploadSuccess, file:", file);
};

const handleUploadStart = ({ file, key }) => {
console.log("from onUploadStart, file:", file);
};

const handleUploadError = ({ file, key }) => {
console.log("from onUploadError, file:", file);
};

return (
handleUploadError({ file, key })}
onUploadSuccess={handleUploadSuccess}
onUploadStart={handleUploadStart}
processFile={processFile}
/>
);
};

export default ImageUploader;

```

### Console log output

from processFile, file: File {name: "img.png", ...}
from onUploadStart, file: undefined
from onUploadSuccess, file: undefined
from onFileRemove, file: undefined

### Additional information and screenshots

Amplify Version:
"@aws-amplify/ui-react": "^6.1.4",
"@aws-amplify/ui-react-storage": "^3.1.3",

Contributor guide

Open the contributing guide

Research direction

Start with the StorageManager callback implementations and the supplied React reproduction, focusing on processFile, onFileRemove, onUploadStart, onUploadSuccess, and onUploadError. Verify the callbacks in the reproduction and consider the work complete when each receives the expected file value consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
aws, react, typescript
Domain
cloud, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.