The situation is that you have to work with an image API and you have to make a POST request to get an image stream that you want to display in the rest of your web page.
I can make an ajax request to that service on page load using jQuery, but i just get a binary stream returned. Is there anyway that JavaScript can take that binary string and display the content type that is in the header?
I believe what you are looking for is that Data URI Scheme - which allows you to format a really long URI that specifies the needed binary data in itself.
I believe you'll need to arrange to have the stream delivered when a URL is referenced by an HTTP GET operation - then have JavaScript set the src attribute of the image to that URL. I've seen this done with ASP.NET, where a .ashx handler is used to stream the image. One then references http://site.com/images/imagehandler.ashx?parameters.
Can you not set an image's src attribute to the url you are using for your ajax communication currently? Or do you have to strip out other info from the ajax call first?
do form post request with targeting an iframe. this is the only way.
Just use javascript to create an img element with the url that returns the image as the src:
// jquery
$(#some-id).append('<img src="/get-image/?foo=bar"/>');
Related
Sometimes when making an HTTP request to download a file (e.g. PDF, XLSX, etc.) from the own webserver, it is necessary to use the HTTP method POST, because it requires dynamic input data. I have been trying different ways to reduce that to one single HTTP request for best performance, but could not succeed.
As JavaScript with the XMLHttpRequest object (AJAX) can not "download" files, I guess it requires an HTML workaround. The only working solution I found for that case is generating a form element wrapping input elements containing the data. I could not find a way how to send boolean values via this, as AJAX is able to. That would mean: it is not suitable for a standardizable implementation.
My question is: How can I download a file via one POST request which can include boolean values (JavaScript)?
In case it is important: The backend system I use is Ruby on Rails
As #Pointy mentioned, boolean values are always translated to strings in HTTP communication. I was wrong about that in my question. That means, converting a JavaScript JSON string or a classic object to an HTML form (then submitting and deleting it) works!
Actually sending an AJAX request and then manually triggering a link click to the generated file has the advantage of being able to use a progressbar.
I have a JavaScript application that uses REST API server as a data provider.
There is one method on API that takes GET request and returns raw response that contains email (as far as I can see there is some kind of .eml content).
I use a simple xmlhttprequest.
The question is: how could I take a response (the file content) and delegate it ti browser so the browser can begin a downloading process ?
Is it possible to do at all with GET method ?
Javascript does not support downloading and saving arbitrary files on a user's computer due to obvious security concerns.
There are, however, a few ways to indirectly trigger the download using javascript. One of those ways would be using an invisible iframe and setting the source to the path towards the file.
You might be waiting for browsers to implement window.saveAs, see also the question Using HTML5/Javascript to generate and save a file
There are several snipets you could try, for instance https://github.com/eligrey/FileSaver.js or https://gist.github.com/MrSwitch/3552985
Depending on how you have your client running you could use local storage.
to store the item
localStorage.setItem('NAME', DATA);
and to retrieve
localStorage.getItem('NAME');
and to delete
localStorage.removeItem('NAME');
and then set up a callback or promise to render into the html. If you use axios you can set this up with a promise https://github.com/mzabriskie/axios
I have a node.js server which takes an image parameter from a form with a file input tag. It uses new formdata(this) to put it in the ajax request and returns a link to a dynamically generated image on the node.js server. I then have to visit that link to download the image. I want a way to do combine both of this call.
I found this thread which shows how you can send an ajax request to get an image. But it expects it in base64 encoding.
Is it possible to do ajax call to get an image while providing a formdata with an image, and have the return type gzip binary like how an image is normally returned and not base64?
Thanks
EDIT: I think I have to use this but not sure how.
Using GWT I am loading images from a server I do not control. Currently, I use GWT new Image( url) and then use ImageHandlers and ErrorHandlers to catch what happened and put the images in my buffer and the DOM. Then I make the images visible sequently to animate the process. But now I need a bit more, I need to know the error code, e.g.304 that the server returned for the image and also I need to get at the header response attribute, 'Last-modified'. For 304, I know I need to resubmit the request later when the server will have created a new version ( with exactly the same url ) which I think I can manage, but it will then have a new 'Last-modified' and I need to know that DateTime.
By using new Image(url), I am letting the browser do the loading, but I don't know how to get at the details of the load.
Q1:Is there a way to pull more info from an image?
GWT Image just seeems to wrap a JS object. I look in Firefox Console-Network, but don't see much detail there either. Is Last-modified and error code forgotten by the time it gets (or doesn't) in the DOM tree.
If the answer to Q1 is no the information is gone or inaccessible, ..
Q2: Do I need to stop using the browser to fetch images and do it with an XmlHttpRequest and then presumably I have access to the response codes and the header attributes. SOP is not an issue. But how then do I get from say the Response OutputStream to an Image? Do I have to Base64 encode it or is there a better way? Will one of the other non-url constructors for image help, say Image(Element) or Image(ImageResource). Then the issue becomes how to make a response stream into a Element or ImageResource?
Note: This other question 'How to print error message of why image failed to load?' is related, but doesn't get to an answer.
Getting Error codes, and getting the response as a stream must be done with an HTTP client (GWT has the built in RequestBuilder). You can also try to get the error code with native JS, using the method described here.
I'm using jsOauth-twitter to upload an image to twitter which calls the update_with_media api method. It looks like it needs the actual image data. This is already on my webpage inside a normal <img src="localfile"> tag.
Using Javascript, can I get at the actual image data (JPEG) to pass it to the function? Is it available in the DOM? I need the raw image data so I can pass it to twitter as application/octet-stream, so base64 is no good to me.
It looks like the API requires the form to be sent as multipart/form-data, which means the media[] parameter is expecting a file rather than binary or base64 encoded data. If you use HTML file input inside a form, this should be fairly straightward.
If you must use the <img> tag, then it would be difficult. All I can think of is draw the image to a <canvas>, obtain a base64-encoded URI with toDataURI(), decode it to obtain the raw image data using window.atob(), then build the multipart/form-data POST body manually. This answer has some sample code for the first couple of things.
The Blob API may help in creating a file-like object which your OAuth library can accept (rather than manually building the request body), but its not very well supported yet.