Upload File - Clicking 'Retry' uploads wrong file

Rich-biomni commented 1 year ago

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

NPM

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Browser: Edge (latest), Browser: Chrome (latest), Browser: Firefox (latest), Browser: Safari (latest)

Which area does this issue affect?

Send box

What is the public URL for the website?

No response

Please describe the bug

When file upload fails there is an option to retry, clicking retry succeeds but the file that is sent is not the file that was trying to be uploaded.

Do you see any errors in console log?

No

How to reproduce the issue?

1) Click on the paper clip and upload a file, make sure the file is > than 4MB (you need the the upload to fail) The UI will show the file name and size, but because the file is > 4MB the upload will fail (this is fine) the UI will display a Send failed: Retry 2) Click the Retry button

It will look like the file upload has now completed successfully but this is not true, the file that was uploaded it not the one selected in fact it will be the root web sites html file. This gives a false positive to the user and is very confusing.

What do you expect?

The correct file be upload, appreciate in this scenario the file is too large, which is fine, so perhaps an error message stating the file is to large and remove the ability to retry.

What actually happened?

the wrong file is uploaded

Do you have any screenshots or recordings to repro the issue?

No response

Adaptive Card JSON

No response

Additional context

No response

stevkan commented 1 year ago

@Rich-biomni - I was unable to repro this using the CDN version of Web Chat in a hosted web chat instance. I see that you used the NPM version. Is this part of a React project or something similar? Are you able to share your code or include a copy of your project that I can test against?

Rich-biomni commented 1 year ago

@stevkan Thanks for looking into this. I think it might be quite subtle.

I've tried it on

https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle/

The retry does fail, but not because it actually retried to upload the file.

If you go to

https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle/

Open the browser dev tools and clear the network list.

Upload a file that's exceeds the max size which I think is > 4M. Upload should fail

In the browser dev tools, network tab, you should see something similar to

https://directline.botframework.com/v3/directline/conversations/6Lovr96KphuH6M9a323dBD-us/upload?userId=dl_9c8562ab9835c1dbfe50a89770359ecd

The upload http request returned a http status 400 so the upload fails, all good so far.

Now click the "retry"

In the browser dev tools network tab you should see that it attempted a download

https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle/undefined

but that actually failed with a 404..

I think this is why the "retry" failed (on this site) because it failed to download

https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle/undefined

The important bit If that "retry" http GET had succeeded then that would have been the data used to in upload

In my site the ../undefined just returns the root of the site and that's what ends up being uploaded.

stevkan commented 1 year ago

@Rich-biomni - thank you for your patience while I looked into this. I'm still unable to repro the problem. I went thru all the steps you listed above, however when I clicked 'retry' and received the 404 I'm not seeing any indication that any part of the root has been uploaded.

Can you provide an example or explain in detail where you are seeing evidence of this? Also, can you verify for me the browser you are using? Does this also occur if you run the site in inPrivate mode (or similar)?

Rich-biomni commented 1 year ago

@stevkan - I've included a visual studio project which shows the issue

upload file ~ 20mb
will fail
click retry
for some reason the webchat component hits /undefined if that returns 200 with content then that's what gets uploaded

Thanks

UploadFileRetryIssue.zip

stevkan commented 1 year ago

@Rich-biomni - Thank you for your patience while I looked into this. Unfortunately, I am still unable to repro using the provided file. When I upload a large file, it fails with a 400 response and an error code of 'MessageSizeTooBig'. When I click the retry, it immediately fails with a 404 error as the context of the request wasn't retained. Rather than a POST call with a defined url and headers, it defaults to a GET call with an undefined url and missing headers.

400 error on send

404 error on retry

That being said, I don't know if you meant to send me your bot which is what was included in the zip file. If possible, could you share your Web Chat code that I might test with that. On a related note, while I don't believe the issue is with the bot, I did notice that you are using v4.16 of the SDK. I would suggest updating to the most recent version (v4.19.2) as several bugs and security issues have been addressed since then.

Rich-biomni commented 1 year ago

@stevkan thanks for your support on this issue.

Yes I included a sample c# project thinking you could use it, as that shows the issue. That project contains bot.html which when hosted has the webchat in it. the bot.html is using a cdn latest/webchat.js for the web chat, the c# project server code can be upgrade to the latest version and will still show the issue.

I've attached a video of the c# project running highlighting the issue. (I had to zip it first as it was to big to upload)

The webchat appears to go wrong when clicking the retry as the webchat performs a http request to /undefined if that http request returns 200 then the contents are what is uploaded. In this case it returns the bot.html so thatswhat gets uploaded.

webchat_fileupload_retry_issue.zip

stevkan commented 1 year ago

@Rich-biomni - Thank you for your patience. I was finally able to repro the issue.

For clarification:

Tested sending several different files types (txt, har, pdf, heic, and zip) that each exceeded the file size threshold.
Each file resulted in a 400 status code on the attempted upload on a POST call (https://directline.botframework.com/v3/directline/conversations/FdpEqssHe6DLgs22eKwthk-us/upload?userId=xxxxxxxxxxx)
Clicking the 'Retry' button in Web Chat results in a 304 status code on a GET call (http://localhost:3978/undefined)
Because the GET call is, essentially, against itself it responds with the host file's contents.
Web Chat then performs another POST call (https://directline.botframework.com/v3/directline/conversations/FdpEqssHe6DLgs22eKwthk-us/upload?userId=xxxxxxxxxxx)
Verified in Fiddler that the contents of the second POST call do match the contents of the host file.
In some cases, when clicking the content URL, it downloaded the file rather than display it in Edge. When downloaded, it saved the file using the file name and extension of the original file being sent. However, attempting to open that file would result in an error as the file was actually a text file. Renaming the extension (e.g., 'myPhoto.png' to 'myPhoto.txt') allowed the file to be opened and, subsequently, display the host file contents.

I'll be digging deeper into this and will keep you posted on what I find. To start, I'll be checking if this is reproducible in other Web Chat instances of my own, testing previous versions to see if this is a regression and where it was introduced, and checking if this could possibly be expected behavior.

biom-andy commented 9 months ago

Hi @stevkan, is there an update to your investigations?

mihaiManea89 commented 8 months ago

@stevkan , maybe this will help.

In botframework-webchat-core\src\reducers\createActivitiesReducer.ts the to-upload activity is patched by removing the contentUrl prop from attachments. It is needed when creating the blob for upload; On the second attempt (retry), if contentUrl is undefined, an empty blob is created in the directline library.

microsoft / BotFramework-WebChat