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.
Related
Assuming the website you'd like to get data from doesn't have an API, where would you go on that site to find its data in JSON format (and if it doesn't have it in JSON format, is there a way to create a JSON with the data you'd like to retrieve)?
For example, if I wanted to get, let's say, a body of text from another webpage or a video whose address is embedded in its source code, using a JSONP request to get a JSON file with the text as a string or the address as a string, is it at all possible (using pure JavaScript)?
My application has to generate reports which should be available for download in XLS format. I have built a REST API using Django Rest Framework and there is an endpoint for report generation. It accepts POST requests with JSON body (report parameters, like from, to, etc., but there is also some data that represented with JSON objects) and returns JSON result. I successfully use it from Javascript, render the report as an HTML table and it works just fine.
My problem is that I need to allow users to save the report as an .xls file with a decent filename (like myawesomereport.04.12-10.12.xls. I tried JS data url approach, but as far as I understand, there is no way to set a filename if you go with that option (except setting a download attribute on an a tag, but its support is limited, so it's not the way to go). I thought that maybe I should open a new window with my API endpoint's url appropriately formed, so it outputs an XLS file, but the problem is that I do not understand if there is a way to send JSON with that request.
How should I approach this problem?
You can set the filename in the backend, by using the header Content-Disposition, so that in the frontend you can use a standard <a> tag.
In DRF, it would look like this:
response['Content-Disposition'] = 'attachment; filename={}'.format(
file_name
)
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.
I want to upload a binary file using json.
I choose Json because with the file I would also like to send additional information.
I am going to do this by -
Select a file in the file input tag.
Use the HTML5 File Reader Api to read a file first.
Convert the file content into base64.
Add the base64 content to a JS object in a data uri format.
Convert the JS object to json and post it to the server.
I wonder if this is the only legitimate way to achieve my goal? Also, if there is a plugin already available somewhere which give me this ability?
No, this is not the only way - one of the other ways is just to submit a form with a file in it. Such form uses multipart/form-data content type.
See W3C documentation on the subject:
The content type "application/x-www-form-urlencoded" is inefficient for sending large quantities of binary data or text containing non-ASCII characters.
The content type "multipart/form-data" should be used for submitting forms that contain files, non-ASCII data, and binary data.
So, there is no need to reinvent the wheel - browsers already support sending the files along with additional information, in a simple way. You just create a form where the user can enter data and select files, then all of them are sent to the server with multipart/form-data content type, and your web framework should be able to understand that it deals with both files and textual data.
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"/>');