search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
443 stars 99 forks source link

[FileUploader]: [Delete Icon & Cancel behavior issue in File Uploader] #6308

Closed kushalkaranjkar closed 2 months ago

kushalkaranjkar commented 2 months ago

Describe the bug

We have some UX concerns about default behavior of FileUploader with Buttons component. When user has a previously uploaded file and clicks on “Upload single file” button it opens a browse dialog. From here there are two options to proceed: Option 1: Choose a new file to upload and confirm the action. From here the new file will override the previous file selection. No questions about this User Experience. Option 2: User decided not to choose a new file and clicks on “Cancel” closing the dialog. It automatically deletes the previously uploaded file. It happens without any warning that already uploaded file will be deleted. We find this behavior very confusing and not intuitive for the user who didn’t choose to delete already uploaded file, which makes it look like an error. We would like to suggest a possible solution: When user has opened the browsing dialog and clicks on “Cancel” it should keep the previously uploaded file. We also suggest to add a “Delete” button next to the uploaded file in case if user just wants to delete it without uploading a new one.

Isolated Example

No response

Reproduction steps

Issue can be reproducible in https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/inputs-fileuploader--docs -

  1. Above URL - go to More example section and click on "Upload file" button to upload it.
  2. Upload one file
  3. Again try to reupload one more file but cancel instead of selecting file .
  4. Previous uploaded file is removed.

Expected Behaviour

When user has opened the browsing dialog and clicks on “Cancel” it should keep the previously uploaded file. We also suggest to add a “Delete” button next to the uploaded file in case if user just wants to delete it without uploading a new one.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29

UI5 Web Components Version

1.24

Browser

Chrome

Operating System

Mac

Additional Context

No response

Relevant log output

No response

Organization

SAP successfactors

Declaration

Lukas742 commented 2 months ago

Hi @kushalkaranjkar

the FileUploader doesn't upload the files, it only provides the FilesList which includes the uploaded file's data that you can then upload to your server. This is the same for the native input element. So, it's up to app developers to decide how the upload should be handled.

I've prepared a small example that shows this behavior: https://stackblitz.com/edit/ui5wcr-fileuploader-basic-ahmjqu?file=src%2FApp.tsx

In case I misinterpreted the issue, please let me know. I'll reopen it then.