Uploading file to server through REST

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By chris.brkt

I’m trying to upload an image to the server but I keep getting a bad request response.

On Postman, the request’s body is set to “form-data” with 2 fields, ID and the file to upload. Also, the request has a bearer token in its header. The request works properly there.

I’ve tried using HttpRequest with a key value body, first value pointing to the string id and the second pointing to an Image. I tried also passing image.data[“data”] or passing Marshalls base64.

var body = {
	"id": _id,
	"file": image 

I’ve also tried HttpClient with a PoolByteArray as follows:

var headers = [
"Authorization : Bearer %s" % Token,
"Content-Length: " + str(content.size()),   
"Content-Type: multipart/form-data, boundary=------WebKitFormBoundary7MA4YWxkTrZu0gW"

var body = PoolByteArray()
body.append("Content-Disposition: form-data; name=\"file\"; filename=\"Treasure.png\"\n")
body.append("Content-Type: image/png\n\n")
body.append("Content-Disposition: form-data; name=\"id\"\n\n")

I’m sure I’m doing something wrong but I haven’t really found an example to upload a file while having another parameter to pass.

Any help or guidance?
Thanks in advance!

:bust_in_silhouette: Reply From: chris.brkt

I managed to fix it after a combined effort from the community.

I had multiple issues:

1- I had an extra space in Authorization header and the “:”, so it should be “Authorization: …” instead of “Authorization : …”

2- Content-Length should be the full length of the body and not only the content

3- I changed the boundary as dashes are not defined in the “boundary” and I used 2 dashes to define the boundary part in the body

4- I’m not sure if it’s necessary but I ended up converting every line to UTF 8 and escaping the buffer too

5- I added Content-Transfer-Encoding: base64 to my image body part

So the final code should be something like this:

var body = PoolByteArray()
body.append_array("\r\nContent-Disposition: form-data; name=\"file\"; filename=\"Treasure.png\"\r\n".to_utf8())
body.append_array("Content-Type: image/png\r\n".to_utf8())
body.append_array("Content-Transfer-Encoding: base64\r\n".to_utf8())
body.append_array("\r\nContent-Disposition: form-data; name=\"id\"\r\n".to_utf8())

var headers = [
	"Authorization: Bearer %s" % Token,
	"Content-Length: " + str(body.size()),
	"Content-Type: multipart/form-data; boundary=\"BodyBoundaryHere\""

I hope this will help other people as well!!

It’s really useful to me. Thank you very much!

endaye | 2022-10-10 21:16