How can I store a img into a MongoDB? - reactjs

I need to make a "gallery" like Google Photos for a class project. My idea consists in a web app that allows a user to upload a file (image) and save it to a db and after that to show it in the web app. I just want to know how should the structure of my collection be if that collection saves a file (<16MB I read for >16MB we have to use gridfs).
For the back-end, I will use Node (with Express, Mongoose ... and so on) and for the front-end I will use react or vue.js. I am not sure yet.
Any suggestion is accepted.

You can do the following two things.
Upload image to s3 and save its link in the mongoDB. More Read(https://medium.com/#fabianopb/upload-files-with-node-and-react-to-aws-s3-in-3-steps-fdaa8581f2bd).
Save image in database in a GridFS collection. More Read
(https://docs.mongodb.com/manual/core/gridfs/#when-to-use-gridfs)

Related

How can i save a file on react folder from a url

Hello guys i need to download files from my database or my Onedrive and save them into react, this files is for my 3d models and the types is obj and mtl. For can i load dinamyc objects from database i need this feature, how can i do this ? I'm using three.js in this project.
Today the project is loading the files stored in project but i like to find a away to pick this from a database or a storage provider.
I tried to do using fetch or something like else but i can't find a away to do this correctly. I don't now if three.js supports url files i try to find but i don't see anything can help me.
Unless three.js provides a feature to take input from memory (in which case you can simply download the file into memory and pass it to three.js), doing this solely from a react app isn't possible. You will need to host your website on a server to have dynamic access to the public directory serving the react website.
Standalone react builds have static assets and can't be updated without creating another build

How to fetch text file from google drive with json contents React Native

I need to access a simple text file from my google drive in React Native.
I saw in this post about how you can use this link structure to get a photo from google drive: https://drive.google.com/uc?export=view&id=YOUR PHOTO ID. Is there a structure like this to get a text document?
People keep telling me to setup a backend using sqlite or something but it seems so overkill for the very little that I need. I don't need to set data I just need to read it from a URL. Also, I tried doing a backend but from my limited knowledge, I can't use a backend server on iOS.
Any Ideas?

React Native Data Base

Ok... I am so confused. I am new to React Native and I have created a simple mobile app that shows a list of news (containing a specific image, title, and description). I have a lot of experience with programming most of which comes from game development. I have created many games and I am familiar to cloud storage systems that you update and retrieve data.
Right now I just have a local json file with an array of 'news' Objects and then I loop through this array to show the news posts. Basically, I want to move this json file to somewhere online where the app just retrieves it. This would make it so that the News json file could be edited in order to change, add or remove new news. So, I don't need account or anything. I don't even need to be able to set/update data from the app. I just need a place to store images and files that can be retrieved from the app.
I have tried using the common react native data base systems like sqlite, realm, mongodb, and firebase, but must not understand how they work because they make no sense. Also, it seems like when making a mobile app all of these services require you to setup a backend and start a server, which from what I can tell doesn't work on mobile... It seems logical that there would be a global data base that I could store storage on and just receive it by a simple fetch or network call. Am I totally crazy here ?:) Any help or guidance is super appreciated. Thanks.

Save and get media from MongoDB database

I have a MERN Stack in which the user upload one of the 4 types of files: .pdf, .jpeg, .psd, .ai and I used FileReader to save it as buffer to mongoDB Database. I want to render it back to my React app (automatically download the file) on click. 'react-pdf' didnt help because the data which comes back from the database is buffer type and hence it shows 'Failed to load PDF' How do I solve this issue for all file types?
What I think there is nothing wrong with your client-side part the main cause of this is how you are storing it into DB
To store files in MongoDB you should try to use GridFS
You can find some tutorials about working with GridFS (example).
Check your MongoDB Driver's API and try to implement it in your project

Display a doc/docx with AngularJS and Mongoose

I store word doc/docx as binary data file in mongoDB (not GridFS) and I would like to display it in my AngularJS client.
I probably should use Google Docs Viewer but what I would like to know is how how should mongoose send the file and how AngularJS should use the object it received to display it.
There aren'y currently any projects out there that allow you to render doc/docx in a browser (that I know of).
Your best bet would be to convert the document to HTML or a PDF before you store it in MongoDB (Apache Tika https://tika.apache.org/ can help with this).
If you are using HTML you can then render that easily enough, if you went for PDF take a look at PDF.js - https://mozilla.github.io/pdf.js/

Resources