2

I am trying to submit an Post Request to an image recognition API using Javascript, but I cannot work out how to send the actual image. I know that I cannot send it just using a local file (I get the "Cross origin requests are only supported for protocol schemes" error when I try to run it). How would I send the image using a Post request?

My code so far is: 

var xhr = new XMLHttpRequest();

xhr.open("POST", "cigarette.jpg", false);
xhr.setRequestHeader("Authorization", "CloudSight [key]");

xhr.send("http://api.cloudsightapi.com/image_requests");

console.log(xhr.status);
console.log(xhr.statusText);

I am quite new to Javascript and APIs and haven't really done anything like this before; how would I send the image without going into incredibly complicated stuff?

CDub
  • 13,146
  • 4
  • 51
  • 68
teamshortcut
  • 292
  • 1
  • 5
  • 19
  • It depends on what format the service expects the data to be in (and I have no idea what that appears to be since they don't seem to link to any public facing documentation from [their API homepage](http://cloudsightapi.com/api)). Oh, no, found the docs, they are just well hidden by a link (that doesn't look like a link) in the middle of the page. – Quentin Oct 14 '15 at 12:20
  • 1
    (The second argument of `open` should be the URL of the webservice's endpoint though). – Quentin Oct 14 '15 at 12:20
  • So [it says](https://cloudsight.readme.io/) "Image attached as a multipart-form-request part.", which means you just post form data in the regular way. – Quentin Oct 14 '15 at 12:25
  • Duplicate of [sending a file as multipart through xmlHttpRequest](http://stackoverflow.com/questions/9395911/sending-a-file-as-multipart-through-xmlhttprequest) – Quentin Oct 14 '15 at 12:26
  • @Quentin So if the second argument of open is the URL, where does the image go, and how would I attach form data? Sorry if this is really basic stuff... is there a link I can look at to tell me about it perhaps? EDIT: sorry, posted before I saw the link: thanks a lot! :) – teamshortcut Oct 14 '15 at 12:29
  • See the duplicate question. – Quentin Oct 14 '15 at 12:30
  • You are sending a post request to the image....not the service.... https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#open() – epascarello Oct 14 '15 at 12:38

1 Answers1

0

There are few issues with your code.

  1. You need correct HTTP headers to port the image.
  2. You cannot POST a JPG image like that.

Further you are not using the API properly, kindly take a look here to see how to do it.

https://cloudsight.readme.io/docs/testinput

Also find a sample here in curl

curl -i -X POST \
-H "Authorization: CloudSight [key]" \
-F "image_request[image]=@Image.jpg" \
-F "image_request[locale]=en-US" \
https://api.cloudsightapi.com/image_requests
anand
  • 1,506
  • 14
  • 28
  • Thanks, I will: when you say correct HTTP headers to port the image, what do you mean? – teamshortcut Oct 14 '15 at 12:52
  • You need to set a HTTP Header `Authorization: CloudSight [key]` and `multipart/form-data` is also needed which cannot be done with regular `xhr`. You might want to switch to jQuery to do it in a better way. – anand Oct 14 '15 at 13:05