I have a sort of strange use case. I have to create a design history journal, and I decided the best way to go about it would be to create a submission form in a create-react-app where I can upload a day's worth of work, and it is saved as a "post" in MongoDB which has text, the date, but most importantly several images. When the page that displays all of the posts loads, it fetches each post and its images (as a base64 data URL) from a custom API I made that interfaces with MongoDB. Since the images must be uploaded and stored alongside the posts, I initially figured GridFS was the best way to do it. Until I had about 15 images on the page, this worked great as the images are relatively small. However, I have 36 images on the page now, and it's just not feasible or fast to store the images on GridFS since they take forever to download and do not cache.
Ideally, I'd like to have the form upload the images (not the text) directly to the React server so that they can cache. Then, I can dynamically access each one with filenames attached to the posts in MongoDB. Safety is not really a concern here because the form and access to the API are password-protected and everything is backed up.
The code for the API is here: https://github.com/lacedwithennui/mongoapi
And the code for the site is here: https://github.com/lacedwithennui/mightypirates
The site is live at http://mp.parkerdaletech.com/design-history where you can see how the images are displayed as base64 data.
The form page is somewhat difficult to get to on the public site so here's a screenshot:
