Transfer image via http post

Questions
1

Hi!

My game takes a screenshot of the player’s decor and upload the photo to the server. Using Flash I did it like this:

        var form:Multipart = new Multipart(upload_url);
			form.addFile("file1", PNGEncoder.encode(bitmapData), "application/octet-stream", "test.jpg");
		
		var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, onComplete);
			loader.load(form.request);

Now I’m trying to do it like this - but the server does not accept photo data:

-- here i'm using screenshot extension
local screenshot_png, w, h = screenshot.png()

http.request(upload_url, "POST", function(self, _, response)
   pprint(response)
end, {["Content-Type"] = "application/octet-stream"}, "file1="..screenshot_png)

I think that I may be giving the wrong data …

2

You’re not formatting the post data correctly. Read this stack overflow answer to better understand the format:

3 Likes
3

Thanks for the answer!
I tried different options, but unfortunately this does not work for me :cold_sweat:

-- here i'm using screenshot extension
 local screenshot_png, w, h = screenshot.png()

 http.request(upload_url, "POST", function(self, _, response)
  pprint(response)
  end, {["Content-Type"] = "multipart/form-data"}, "filename="..screenshot_png.."&name=file1")

It seems that I don’t fully understand how photo upload works.

4

Are you testing in computer or HTML5?

"filename="..screenshot_png.."&name=file1"

This part looks wrong, that should be part of the url not the post_data. Check the docs for http.request() again.

5

I tested this from a computer.
I am trying to upload a photo to the VK.com server. Here is what is written in their documentation:

Send files to the upload_url address forming a POST request with file1 - file5 fields. These fields should contain images in multipart/form-data format.

I tried using a module to form a request, but this still does not work for me

local enc = (require "lib.utils.multipart-post").encode
local body, boundary = enc{file1=screenshot_img}

http.request(jd1.upload_url, "POST", function(self, _, response)
  pprint(response)
end, {["Content-Type"] = "multipart/form-data; boundary="..boundary}, body)
6

Sorry for the frequent posts

Okay, I finally figured out how to form the post body :joy:. And even progress has been outlined - instead of an empty answer, I began to receive a “bad request”

-- create 100x100 red pixels
local w = 100
local h = 100
local pixels = string.rep(string.char(255,0,0), w * h)
-- encode
local contents = png.encode_rgb(pixels, w, h)

local filename = "file1"
local boundary = "WebKitFormBoundaryePkpFF7tjBAqx29L"
local body = "--"..boundary..
"\rContent-Disposition: form-data; "..
'name="'..filename..'"; filename="'..filename..'"'..
"\rContent-Type: image/png"..
"\r\n"..contents..
"\r--"..boundary.."--";

local headers = {
  ["Content-Type"] = "multipart/form-data; boundary="..boundary,
  ["Content-Length"] = #body
}

http.request(jd1.upload_url, "POST", function(self, _, response)
  pprint(response)
end, headers, body)

Maybe I was mistaken somewhere? Thanks!

7

Hurray, I did it! Thank you very much! It really works!

  -- create 100x100 red pixels
local w = 100
local h = 100
local pixels = string.rep(string.char(255,0,0), w * h)
-- encode
local contents = png.encode_rgb(pixels, w, h)

local filename = "file1"
local boundary = "WebKitFormBoundaryePkpFF7tjBAqx29L"
local body = "--"..boundary..
'\r\nContent-Disposition: form-data; name="'..filename..'"; filename="'..filename..'.png"'..
"\r\nContent-type: image/png"..
"\r\n\r\n"..contents..
"\r\n--"..boundary.."--\r\n";

local headers = {
  ["Content-Type"] = "multipart/form-data; boundary="..boundary
}

http.request(jd1.upload_url, "POST", function(self, _, response)
  pprint(response)
end, headers, body)
4 Likes