A web application feature I'm working on allows users to upload an image along with some form data. We're working under the assumption that the image file will not exceed 16MB and so GridFS can be disregarded (for now).
On my React + Flux front-end I am utilising the FileReader object to read the image file as a binary string which I then append to my request object. It's a pretty ugly but it works...
My Node.js backend receives said object and is inserted into my MongoDB datastore. The image is set to 'BinData' data type in my schema which represents binary data. When a request is initiated to retrieve document X that contains image Y the request is slow, but manageable for single document retrieval as we're are only handling one buffer array with a base64 encoding that is converted on the client which.
Now I have attempted to retrieve multiple documents of this type, however the request is taking dreadfully long. To set the context, a single request for 4 documents around 1MB in size (about 996kb of binary data representing the image) takes about 6 seconds.
Now obviously I can add pagination to reduce the load but starting with response times for only 4 documents is like fighting an uphill battle. There doesn't seem to be much guidance on this matter as many of the Stackoverflow questions relate to storing images but not actually receiving them at reasonable speed.
The underlying problem is retrieving multiple documents, each containing a single image. Is there an intuitive way of storing and receiving image files with my current stack to improve response times?
If complete refactoring of my implementation is required, what would be an optimal solution for this type of scenario? E.g. User uploads information + image, store data, retrieve multiple instances across many users at once.
Thanks in advance.