0

I've read tons of articles about sending image to server via java script, but I didn't get my answer and I'm still looking for response.

Some of the links:

Example of multipart/form-data

What is http multipart request?

What is the boundary in multipart/form-data?

Upload image using javascript

Most of these links have used file object to get the file, but my problem is that I don't have a file input.

I get user's image via google drive I have the link and it works as expected, I can see the image. We have a web server (python) and I have to send the picture to web service. I turned it into a binary and set boundry and multipart-formdata:

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryn1mushSV09kpAN4G
Accept: */*
Referer: http://localhost:8080/app/profile
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: _ga=GA1.1.2037701396.1452595438; _gat=1;

------WebKitFormBoundaryn1mushSV09kpAN4G
Content-Disposition: form-data; name="file"; filename="photo3887649996827300720.jpg"
Content-Type: image/png

And some Binary data here.......

------WebKitFormBoundaryn1mushSV09kpAN4G

Now when I send my request to server on the other side web server cannot get it($_FILES['file'] in PHP or request.files['file'] is empty!)

Should I do something else? I think I have formed multipart-formdata correctly.

I even checked the whole response on server by nc -l IPADDRESS PORT (you see the result above)

My javascript code:

var body = '------WebKitFormBoundaryHwezUEKNYSfCHWwd'+ '\r\n' +
                  'Content-Disposition: form-data; name="file"; filename="test.jpg"\r\n'+
                    //'Content-Transfer-Encoding: base64'+"\r\n"+
                  'Content-Type: image/png\r\n\r\n'+
                  data.responseText + '\r\n' +
                  '------WebKitFormBoundaryHwezUEKNYSfCHWwd--\r\n';
                debugger;
                $.ajax({
                  type: "POST",
                  url: Config.api.path + 'storage',
                  data: body,
                  headers: {
                    "content-type": "multipart/form-data; boundary=" + '------WebKitFormBoundaryHwezUEKNYSfCHWwd',
                    //'Content-Transfer-Encoding': 'base64'

                  },
                  success: function (data) {
                    $scope.putUserImage(data.file_path, $scope.userIno);
                  }
                });
Community
  • 1
  • 1
Alireza
  • 6,497
  • 13
  • 59
  • 132
  • Have you thought about just sending the link to the image within drive to the server. That way instead of retrieving the image on the client and then posting it to the server, the server just requests it directly? Or is there some sort of authentication requirement that makes this difficult? – ste-fu Jan 12 '16 at 11:51
  • @ste-fu, Backend server receives a custom access_token that validates client requests. – Alireza Jan 12 '16 at 11:52

0 Answers0