We Keep Coding

Passing JSON Through URL

I have two html files, and the task for us is to pass data between the two. Then I came up with the idea of sending the data through the URL using the hash, and parsing this link something like JSON.parse(window.location.hash.slice(1)); and assigning it to a local variable. It seems to work for the couple try. But when I populated my JS files with codes error occurs. Can you tell what alternative can I do.? Here's the console errors. I'm using jquery by the way ..
The Console Error
Thank you!

JSON contains a number of characters that are not legal in urls.
A simple way around this could be to simply encode the JSON data using Base64.

You can use the latest way of accessing the data from one page to another:
//1st page
storage["key"]=data;
//2nd page
var value= storage["key"];

I think jQuery.param is what you need it converts a Json into a URL String
http://www.sourcecodemart.com/convert-json-object-to-url-query-string/

This won't work in the long run. urls are limited to about 2000 characters. What is the maximum length of a URL in different browsers?
You have to base64 encode the json to have it live in the URL. This eats up a lot of the available characters.
You don't get the same limitations when doing POST requests but a HTML page can't access post requests.
You might want to look at postMessage and embedding one page in the other in an iframe to do cross communication.
Also if the urls are on the same domain, just use local or session storage.

How to allow user to save reports from a REST API?

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
)

Is it possible to get an image with jquery ajax while sending an uploaded image?

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.

How to handle string that looks URL encoded in REST URI

Hey so I'm having trouble figuring out how to include something that looks URI encoded but in fact must be treated literally in my RESTful URL. For example, say I had an endpoint on my server that looked like this:
/something/:value
Then from my client code, I want to make a GET request to:
/something/some%20value
On the server, I want ":value" to be the literal string "some%20value" and NOT "some value". How do I properly encode the request URL to ensure the server treats it as such? I should also mention that not all request URIs will have these potential URL encoded values in them.
Thanks in advance.

Actually I think I may have figured this out. It seems to work if I just encode the percentage sign in my URLs. URL code for % is %25. So for example the correct URL would be:
/something/some%2520value

How to get hold of image data from webpage using Javascript

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.