We Keep Coding

Sending pdf as binary in POST request (from Javascript)

I want:
To send a file (I have my eye on .docx and text files, but let's use a .pdf as an example) as binary in the body of a POST request from a browser (Javascript).
Main problem
I can do this just fine in POSTMAN. You can select "binary" as the body type, and viola! your file is configured to be the body. But I don't know how to mimic that behavior in Javascript.
My question is: On the client-side, in Javascript, how can I get a file into my POST request as binary?
Specifically, how can I get the file into the same format that POSTMAN uses when you select Body -> Binary in a POST request?
For context:
I have been using this guide to get everything configured how I want in AWS. It ends with making requests in POSTMAN. But adding a file as binary in POSTMAN is one thing - doing it from a browser in Javascript is another, and the main question that I have.
I am sending this through API Gateway to a Lambda function. I have API Gateway configured to handle application/pdf as binary, and the Lambda function to decode it once it arrives.
So I think I want to hand it in as a binary blob, not base64. But not sure exactly how.
JavaScript
postBinary() {
var settings = {
"url": "https:<my-aws-api>.amazonaws.com/v1/upload",
"method": "POST",
"timeout": 0,
"headers": {
"Content-Type": "application/pdf"
},
"data": <my pdf file here as binary>
};
$.ajax(settings).done(function (response) {
console.log(response);
});
},
API Gateway:
Integration has 'When there are no templates defined (recommended)' set to 'Content-Type':'application/pdf'. The API's Binary Media Types have 'application/pdf' set. I know I have CORS set correctly - I can pass strings through the POST request and get success messages back, but I would like to handle files here, not just a simple string. I also want to avoid requiring the client side to parse out data on their end.
My Lambda function will take the file and then parse information out of it, then send it back.
Lambda function:
import json
import base64
import boto3
BUCKET_NAME = 'my-bucket'
def lambda_handler(event, context):
file_content = base64.b64decode(event['content'])
parsed_data = some_function(file_content) # parse information from file
return {
'statusCode': 200,
'body': {
'file_path': file_path
}
}
In the end, we want a user experience of: choose a file, send to API, get back parsed data. Simple.
Note: I know there are lots of good reasons to put files in s3 instead of going through Lambda first. But our files are small, and we are not concerned about taking considerable compute time/power in Lambda. Further, we want to avoid sending to s3 right away because we would like the user to only have to make one call to the API: send file in POST request, get results. If we send to s3 first, the user has to send multiple requests: request pre-signed URL, send file to s3, request results from parsing.
I am mostly concerned with the fact that this is possible in POSTMAN and it must be possible via browser/Javascript as well.
Thanks, everyone!

Insert Gzip response into json object

I'm building a simple proxy with php for server side and javascript for the client side (browser).
the php server receives post requests with json data , something like that:
{headersArray: ["Get /someurl...","Cookie: some cookie"],url...}
than after extracting the headers and the url the php code uses curl to fetch the resource , and at this point i would like to construct a response object on the client via the "Response" constructor , so i need to transmit back to the client the headers also so i thought about constructing again a json object which will contain the headers and the response body , but a lot of servers uses gzip encoding, can i insert the gzip encoded response body as a json property and safely transmit it back to the client? would i need to decode it on the client browser? does it add a lot of overhead? any better ideas?

Ajax function dependency between request and response type

If I use:
xhr.setRequestHeader("Content-Type", "application/json");
Am I forced to receive a json response also ? Or I can receive a html response instead?
If I can receive any format I want, what is the best way to dynamically manage this 2 aspects:
the way that I will parse the response (to parse a json or not)
what Accept header to use
For example my function should set:
xhr.setRequestHeader('Accept', "application/json");
in case it waits for a json response, but also do a json parse on the response also, but in case it's a html reponse there is no need for something like this.
So is there any way to manage dynamically the response handling?

Actually content-type is the data type you want to send to the server . on the other hand data-type or as you mention accept is used to negotiate with server which kind of data you are expecting . So as a client you can request multiple data types e.g
httpRequest.setRequestHeader('Accept', 'application/json, text/xml');
But you are responsible to handle the data-type you mention to parse on client side . on server side it is decided by server during negotiation time to produce your desired data-type such as xml,json ,html etc.
So finally you are you are only responsible for the data format you requested. if you request json , then probably the server response data will be json not xml but you have to remember it depends on server side which data-type choice it has, most of the time its json or xml (will known data exchange fromat) then you dont have to request html ,and this mechanism is called content negotiation

Am I forced to receive a json response also?
No. The format of the data you send and the format of the data you receive are unrelated.
Or I can receive a html response instead?
You can.
the way that I will parse the response (to parse a json or not)
Read the Content-Type response header and use it to determine what format the data is in.
what Accept header to use
Ask for a data format that you:
are comfortable parsing and processing
know that server is able to send

How do I handle an ajax request if the endpoint is either json or a new html page?

I have an endpoint that will either return a JSON response or a redirect to a different html page depending on the parameters passed to it. JSON is returned for only some cases, so there are cases that will lead to a new html page. I was wondering if there is a way to get the content of the endpoint with an ajax request and then to either modify the existing page if it's a JSON response or otherwise if it's a html page to make it appear as if the page redirected to that page without calling the endpoint twice.

Yes, you just have to call endpoint and look at the response. If it's meant to be a redirect, it will likely return a 302 response code and contain the redirect URL. You can then set window.location to that URL and the page will redirect there. If you get the normal 200 response and the datatype is JSON, then you just process the JSON.
If you just log the response code, the headers and the response itself for each type of endpoint call, you should be able to clearly tell the difference so your code can branch accordingly.
For example, here's what a redirect response might look like:
HTTP/1.1 302 Found
Location: http://www.iana.org/domains/example/

Check this (Two Methods for Handling Cross-Domain Ajax Calls)
http://devproconnections.com/aspnet/two-methods-handling-cross-domain-ajax-calls

Unable to fetch thumbnails using Dropbox core API - 401

I am able to successfully retrieve metadata using the Dropbox API using the following URL:
https://api.dropbox.com/1/metadata/dropbox/mse
When I try to retrieve a thumbnail for a listed asset, I get a 401:
https://api-content.dropbox.com/1/thumbnails/dropbox/mse/modem_status.png?size=l
In both cases I am providing the access token in the header:
Authorization: Bearer 4JSL1tGWoVEAAAAAAAAAAUxNYpLbiYw-D8l3vqTKRKNBuGnezhps8j.....
I can't see what is missing here.

It turns out that an image is being returned - I was using POSTMAN to test the url and two urls show up in the log - the first returns a 200 with an image buffer containing JPEG data, and a subsequent url that fails with a 401. (the second GET does not contain the authorization header). However, I am at a loss as to how to make use of JPEG data returned from an XHR request - how am I supposed to create an <img> element this way? Isn't there something equivalent to /media which returns a public url that is valid for 4 hours?