Drag and drop is not working when using a StorageField in a Form generated by Amplify Studio

[SebaOfek]

Before opening, please confirm:

• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

App Id

d1svm68u3nyy54

Region

us-west-2

Environment name

staging

Figma File Version (if applicable)

No response

Amplify CLI Version

12.0.0

If applicable, what version of Node.js are you using?

16.20.0

What operating system are you using?

Amazon Linux (Cloud9)

Browser type?

Chrome

Describe the bug

Drag and drop functionality is not working, no error directly related to the action is displayed not logged to the console. It just does not do anything. But the "browse file" functionality is working indeed, the files are uploaded correctly.

But the forms is logging a warning when it's loading. This only happens in the form that contains StorageFields

arning: React does not recognize the isRequired prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isrequired instead. If you accidentally passed it from a parent component, remove it from the DOM element.

May is related to the issue that StorageFieldProps is missing in @aws-amplify/ui-react. (This was also reported here #946).

Expected behavior

Drag and drop should work and not warnings/error should be logged when using StorageFields.

Reproduction steps

Just follow the Storage Manager section on this articule:
https://docs.amplify.aws/console/formbuilder/special-inputs/#customize-record-labels

Or:

1. create a blank form in Amplify Studio
2. add StorageField limit to 1 file -do NOT set it as required nor filter by any file extension-
3. add some navigation to access the new form
4. amplify pull
5. and start the app
6. go to the form
7. open Dev Tools and review the console
8. drag & a drop a file --> nothing happens
9. browse a file --> file is uploaded

Project Identifier

No response

Additional information

No response

[ykethan]

Hey @DataLoreB4, 👋 thank you for reaching out. I was able to reproduce this, marking as bug for further investigation.

[SebaOfek]

Hey @DataLoreB4, 👋 thank you for reaching out. I was able to reproduce this, marking as bug for further investigation.

OK, let me know if I can help. I really need this working since It's a perfect match for my project. I can try a workaround or a beta fix or something else.

Thanks a lot!

[ykethan]

Hey @DataLoreB4, as a workaround we will need to add the Accepted file types on the field under input settings.

aws-amplify/amplify-ui#4009
PR to fix this

[SebaOfek]

This worked like a charmed! Thanks a lot!

[ykethan]

closing the issue as fix was merged

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.