change function in file upload component is not getting executed if same file is uploaded again

[AmirHussain93]

I am using the ibm-file-uploader component in my app and I have implemented some validation for the uploaded file. There is a scenario where I need the change function to get executed irrespective of the file name (same file or a different file) on upload.

Describe in detail the issue you're having. I uploaded file and it was uploaded successfully. Than I went inside the file in my system make some syntax error issues and tried to upload the same file again. It should have thrown error but instead the upload function was not even called.

Is this a feature request (new component, new icon), a bug, or a general issue? General issue

Is this issue related to a specific component? Yes, https://github.com/IBM/carbon-components-angular/tree/88e4998fefb66714bfdbef3e45842510433ca1bc/src/file-uploader

What did you expect to happen? What happened instead? What would you like to see changed? I wanted to confirm if there is any way to call the change function on every upload even if the file is same as previous uploaded file.

What browser are you working in? Chrome

What version of the Carbon Design System are you using? "carbon-components": "^10.56.0"

[exequiel09]

Can I take this on?

[Akshat55]

@AmirHussain93 Can I see the implementation? Or a demo of this happening? I'm not exactly sure what you're trying to achieve.

So you uploaded a file, then you made some changes and tried uploading the updated file with the same name? If both files were uploaded, this should be addressed by you, not the library 🤔

[Akshat55]

I wanted to confirm if there is any way to call the change function on every upload even if the file is same as previous uploaded file.

There is an event emitted whenever there is a state update for files, you can listen for this event using filesChange function. You can even double bind files.

[AmirHussain93]

Hi @Akshat55 filesChange function gets emit only if the file name is different.

My scenario is.

I have uploaded a file with a name sample.json. I have added some validation if the uploaded file passes validation it will be uploaded successfully. file.state will change to 'Complete'. Some how I missed something (example a wrong value for a key.) which is not covered in validation. In that case I will make changes in the file without removing the current file because there is no option to remove the file once it gets uploaded and will try to upload the file again hoping that new changes will be uploaded. But the ibm-file-upload couldn't upload the file with new changes because the name of the file was same as previous uploaded file. The fileChange function doesn't get emit the second time because the name of the file was same.

And I entered the submit button to send the data to backend via api. To my surprise the sent data was not the one which I changed. After doing some research I figured out If i have to make any changes in my uploaded file I have to give an option to remove the file and than upload the same file again.

Is it at all possible to emit fileChange function on every upload irrespective of the file name ?

Below are the getter and setter methods which are setting this.files value https://github.com/IBM/carbon-components-angular/blob/f05eaaadc876263c700c68cb7eb4bb474124b3fa/src/file-uploader/file-uploader.component.ts#L180

[exequiel09]

For this to be possible we need to perform deep equality on Set which is hard when doing manually. Introducing a third party dep not sure if that's okay with the org.

Clearly the check in if fails

https://github.com/IBM/carbon-components-angular/blob/f05eaaadc876263c700c68cb7eb4bb474124b3fa/src/file-uploader/file-uploader.component.ts#L180-L185

[AmirHussain93]

@exequiel09 Thanks for the prompt reply. I thought removing if condition might help. Are we not checking the files here?. I mean v !== this.files. If this condition is removed than file change function will be called on every emit.

I have not gone through the entire code If removing "if condition" is difficult than its fine. For now I have added a remove button in my app to remove uploaded file.

[anemonetea]

v !== this.files is a check by reference only. I've been able to add the same file multiple times in Storybook.