[FR] provide file to StorageManager event callbacks

[aljasser]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting 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

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 (
    <StorageManager
      acceptedFileTypes={["image/*"]}
      accessLevel="public"
      maxFileCount={10}
      onFileRemove={handleFileRemove}
      onUploadError={(error, { key, file }) => 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",

[jacoblogan]

thanks for creating this issue. We'll take this into consideration for our roadmap.