I have an app that displays a list of pictures with titles and descriptions. The app sends a get request to the node server, and I want it to respond with the pictures and the titles/descriptions. In order to send the images at the same time as the other stuff, I think I need to use the multipart/form-data Content-Type. How do I do that? The expressjs docs don't say anything about multipart responses as far as I can tell.
In your case I would send only an initial response with image urls and then generate <img src="image.url"> in the front end.
You don't need multipart here because there will be two separate requests, one for the image metadata, and another when the browser displays the image (downloads the file).
Nevertheless I commented a use case example in which multipart responses seems to be the only way around, and currently cannot find a solution for that one, so thanks for asking.
Related
I'm in a situation where I'm not sure what is the correct way of doing this. I'm trying to take a large json file, send it to the server, process and reorder it, and then send it back to the client. I don't want to store any data in a database. I know there's the HTTP GET verb, but the amount of data I would be inputting would be longer than the max length URI. I also read that you shouldn't try to do this with a HTTP POST either.
I looked into WebSockets as well but to me it appears to be overkill. I would only need the socket for the time that it takes to do the computations, then I would close it. Also I want to share the data with only the client who sent it to me.
Does any one have recommendations as for what to do. Maybe just a push in the right direction with a few links I can read. I'm really looking for something that runs down the middle of these two methods.
Why don't you just use a HTTP POST request? Taken from an info box on
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST
> Request has body Yes
> Successful response has body Yes
> Safe No
> Idempotent No
> Cacheable Only if freshness information is included
> Allowed in HTML forms Yes
As you see, a HTTP POST request is used for sending data to the server, and if the POST request was successful, the server sends data back to the client. Perfect for your situation, I think.
A POST request doesn't have to be used within a HTML form; you could use XHR, AJAX, the fetch API, or any other way you can find to send the server a POST request. And yes, you could send JSON data with it.
If you need more convincing:
When the POST request is sent via a method other than an HTML form — like via an XMLHttpRequest — the body can take any type. As described in the HTTP 1.1 specification, POST is designed to allow a uniform method to cover the following functions:
Annotation of existing resources
Posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles;
Adding a new user through a signup modal;
Providing a block of data, such as the result of submitting a form, to a data-handling process;
Extending a database through an append operation.
Notice that there, it said that a POST request can be used to provide a block of data to a data-handling process.
Hope this helps you. :)
Client vs server imagen process.
We got a big system which runs on JSF(primefaces) EJB3 and sometimes JavaScript logic (like for using firebase and stuff).
So we run onto this problem, we have a servlet to serve some images. Backend take a query, then extract some blob img from DB, make that BLOB into array of bytes, send it to browser session memory and servlet take it to serve it in ulr-OurSite/image/idImage. Front end calls it by <img>(url/image/id)</img> and works fine so far.
Then we are using a new direct way to show img, we send BLOB/RAW data to frontend and there we just convert them into Base64.imageReturn. and pass it to html.
Base64 codec = new Base64();
String encoded = codec.encodeBase64String(listEvidenciaDev.get(i).getImgReturns());
Both work, for almost all cases.
Note: We didn't try this before because we couldn't pass the RAW data through our layers of serialized objects and RMI. Now we can of course.
So now there are two ways.
Either we send data to servlet and put it on some url, which means the backend does all the job and frontend just calls url
or we send data to frontend which is going to make some magic and transform it to img.
This brings 2 questions.
If we send to frontend RawObject or make them call URL to show his image content, final user download the same amount of data? This is important because we have some remote branch offices with poor internet connection
Is worth pass the hard work to frontend (convert data) or backend (convert and publish)?
EDIT:
My questions is not about BLOB (the one i call RAW data) being bigger than base64
It is; passing the data as object and transform it to a readable picture is more heavy to internet bandwidth than passing a url from our servlet with the actual IMG and load it on html ?
I did choose to close this answer because we did some test and it was the same bandwidth usage on front end.
Anyway we make use of both solutions
If we dont want to charge frontend making a lot of encode we set a servlet for that images (that comes with more code and more server load). We look for the best optimization on specific cases.
So i'm trying to wrap my head around developing full applications with the MEAN stack (mongodb, express, angular, node.js).
I understand that using express and node i can create a rest api with endpoints to grab data for my app. I also understand that angular is for FRONT END only. So my question is this... when you have something like an upload form and you want to upload an image to the server, would you want to create an api endpoint called something like "/api/upload/" and have all your logic for uploading the image inside that endpoint, or would you want all that upload logic somewhere else and then simply provide the file name to the "/api/upload/" endpoint with a post request?
I'm not 100% sure what you mean by upload logic - there isn't much needed, but I would put everything (including the file itself) in a POST to /api/upload/, then save it however you wish to within that function.
It is always a better approach to put your business logic at server side and I suggest you to follow this approach. If you are following this approach you can easily manipulate images if required. for e.g while uploading an logo or avatar sometime we need to crop,re-size etc operations on image like same image is used for thumbnail and profile picture. Here this approach is very meaning full for us. we can give response to the user and create a new process for image manipulation without waiting or notifying end user. Most of the apps following this approach for better experience
You can apply a separation of concerns, first of you can delegate the file upload to the client to be more "user friendly", crop it, resize it and then post the resulting file as "a file" or base64 to the server for storing it either in the database or to the file system.
I'd recommend a combination of these two libraries for the client:
Angular File Upload and ngImgCrop
then you can post the image and use a body parser to "catch" the image in express I'd recommend you to use busboy and it could be part of an endpoint as you mentioned like api/file/upload for example
// your controller
exports.uploadDocument = function(req,res, next){
req.pipe(req.busboy);
req.busboy.on('file',function(fieldname, file, filename, encoding, contentType){
// implementation
});
//updating req.body with busboy parameters
req.busboy.on('field',function(fieldname,val){
req.body[fieldname] = val;
});
req.busboy.on('finish', function() {
// implementation
next();
});
};
I hope that helps.
Short answer: express should do the upload, but it doesn't have to.
Long answer: It's a design question. If it was an image, you could have angular post the image to the imgur api and send that returned url to your server, but that's much more unreliable than doing it server-side. People could be using your site from phones, tablets, etc and though image uploading is fairly fast and consistent, the server will always do it the fastest of all because it doesn't depend on the client's wireless connection strength. Angular and Express are equally good at validating the image file.
Most importantly, if something goes wrong, you'll want to log the attempt (and maybe the image) are mostly unable to do that on the client side.
I would strongly advice you move your logic to the backend and do it with express,
More secure, as the code is not expose on the client browser
Fast uploading (though can be fast on the client side too, but if the client browser is slow, it would relatively affect the uploading)
Reduce the code exposed to the client browser
I'm posting json to my server and I want to return a csv response and have my browser automatically download the csv.
I know there have been some questions on SO exactly about this topic on the past. So far, I've gathered the following solutions:
Put the request into <form> element. This isn't possible because the JSON is nested and too large to be posted as a string.
Save the csv file (get request) onto the server and then have a separate post request to download it. This is not ideal because I don't want to keep a bunch of useless csv files on my server.
Is there a better solution? Can I make a Post request act like a form submission and automatically get the file to start downloading?
I have a WEBUI (using html and DOJO) which talks to a Web Service. The data required in the WEBUI is coming from a java Web Service using REST Calls.
IE (HTML/DOJO) <------ REST CALL(xml response) ----> Java WS on tomcat.
I have a certain data for a call
<AllData>
<DataList>
<type>A</type>
<xcoord>20</xcoord>
<ycoord>20</ycoord>
<length>250</length>
<width>350</width>
<imageName>images/myPic.jpg</imageName>
</DataList>
</AllData>
But in this case, if I have a list of data, for rendering each image, I have to do a http call again to my server.
Instead, I came to know that I can embed the image itself in the REST XML response.
I know I can read the image through ImageIO/BufferedImage classes in Java. But if I use the same to send the data which is read, is it possible to render the image on Dojo?
If there is any other method where I can send the image in the REST Response (XML or JSON) and using Dojo render the same, please let me know.
One thing that I could think of is Data URL. It allows you to store the entire image in URL form. On the client, you can insert an <img> tag with src="data:image/gif;base64,R0lGOD...... and you're done.
The drawback of this is, that the encoding overhead is huge, you'll save a request, but the data to transfer is bigger. I only used this approach in CSS files for tiny icons, where it's reasonable.
But I'd think about it again. Is that one more request really that bad? If not, you can run the same approach as above, just with a normal URL (in case your images are accessible from the web).