[Bug]: File is corrupted when pushing PNG from image picker through POST via multipart/form-data

[96imranahmed]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

When I attempt to create a POST request using multipart/form-data, the server receives a corrupted file

Reproduction below:

1. Go to imgbb.com, and create a configuration key for their api (POST request on https://api.imgbb.com/1/upload?expiration=100&key=XXXXX)
2. Set content-type to multitype/form-data and body as per screenshot below (e.g.,{{FilePicker.files[0]}})
3. Set FilePicker file type to binary (also fails for base64 and text)
4. Try POST the request. Request fails with following error in Appsmith

{ "status_code": 400, "error": { "message": "Can't get target upload source info", "code": 310, "context": "CHV\\UploadException" }, "status_txt": "Bad Request" }

Note: Posting the exact same file with a Postman configuration gives a valid response (see example below):

{ "data": { "id": "HhgPWDY", "title": "245041252-239228178183498-5503923721507175673-n", "url_viewer": "https://ibb.co/HhgPWDY", "url": "https://i.ibb.co/FH7YSbJ/245041252-239228178183498-5503923721507175673-n.png", "display_url": "https://i.ibb.co/FH7YSbJ/245041252-239228178183498-5503923721507175673-n.png", "size": 5764, "time": "1633956377", "expiration": "100", "image": { "filename": "245041252-239228178183498-5503923721507175673-n.png", "name": "245041252-239228178183498-5503923721507175673-n", "mime": "image/png", "extension": "png", "url": "https://i.ibb.co/FH7YSbJ/245041252-239228178183498-5503923721507175673-n.png" }, "thumb": { "filename": "245041252-239228178183498-5503923721507175673-n.png", "name": "245041252-239228178183498-5503923721507175673-n", "mime": "image/png", "extension": "png", "url": "https://i.ibb.co/HhgPWDY/245041252-239228178183498-5503923721507175673-n.png" }, "delete_url": "https://ibb.co/HhgPWDY/782574610367920e2a46ceefe00322e8" }, "success": true, "status": 200 }

Steps To Reproduce

See above for detailed reproduction

Environment

Release

Version

Self-Hosted

[96imranahmed]

I also tried doing a vimdiff on our own internal API. We see that the file received through AppSmith is different to the one received via Postman

Any ideas as to what might be causing this? Not sure if this a compression or truncation issue? (Correct image on LHS)

[Nikhil-Nandagopal]

@96imranahmed thank you for reporting this! We'll look into this ASAP

[nidhi-nair]

Hey @96imranahmed! The reason the usage in Appsmith is different from Postman is because we only support using base64 encoded data in payloads. Copying over the resolution from our Discord thread:

This provider only accepts base64 data as a text input. The filepicker stores the encoded data in data URL format. The snippet below helps to retrieve just the base64 data to make the upload work as expected.

{{fp.files[0].data.substring(fp.files[0].data.indexOf(',')+1)}}

[96imranahmed]

Gotcha - closing this issue as I believe this feature request will be addressed here: https://github.com/appsmithorg/appsmith/issues/8431

Thanks for the rapid support, team :)