Save and get media from MongoDB database - reactjs

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

Related

React + Django communication

I'm working on a data mining web app, you should be able to upload a csv file, apply an algorithm and get results in the browser and a pdf with information (graphs and models for prediction principally) this is my first time using React and Django, so my question is, how to send the csv file from react to django, handle the data and return it to react?
Thanks!!
I've seen a lot of tutorials, but every tutorial use the sqlite data base and the POST method for store data and I only want to process the data inside the csv, because the files will never be the same.
You can do the csv file upload via a HTTP POST request with the {"Content-Type": "multipart/form-data"} header. After that, you can read the file with some python library that handles datasets like pandas, process everything you want about it and then send it back to the client. After that you can delete your file.
Depending of the time of this operation this request can become really slow, though.
I also think there is probably a cleaner solution where you dont even need to utilize the filesystem, just manipulate the file in-memory that came from the request, but i never tried to do something like that in django.

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?

How can I store a img into a MongoDB?

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)

React + Redux + Electron desktop application, how to save data on local files

As the title says I want my react-redux application running with node-electron to save some data when few actions fires.
Try 1:
So I tried nedb first but it does not actually create any local database file but only does save data in memory and I lose the data when I close the electron window or restart it. I initialize nedb datastore in redux actions file so I think that it may be called in a sub-process of main electron app or something but I don't know how to work around this problem.
Try 2:
After I tried simple json file module with same setup, when a file save action is fired it tries to save payload to a json file with jsonfile.writeFile method but it also fails here with error that "writeFile" is not a method. It is working perfectly with my node-express app but fails with react-electron setup.
Try 3:
I tried redux-persist and nedb-persist libraries but i think they also save data in local storage and not actually to a file system, so they lose data after a restart...
Any solution to above 2 problems or a new way to save data on local json file or any other offline database solution like nedb will work for me.

Where does the data's are stored when using Backbone.localstorage()?

im doing a sample todo application by using a tutorial .. In that they are using Backbone.localstorage , my doubt is Where does the data's will be stored when using Backbone.localstorage()?
localstorage will save all of your todos data within your browser, instead of sending them to a server.
-So that when you use Backbone.localstorage() the data is with you in your browser than to store it on server side and will get accessed from browser only
-You may refer the link http://backbonejs.org/
Do you want this?
I'm taking this on http://todomvc.com/architecture-examples/backbone/
Want to know what is localstorage indeed?
See it in your computer:
C:\Users\YourUserName\AppData\Local\Google\Chrome\User Data\Default\Local Storage
You will find
http_todomvc.com_0.localstorage
If you try to edit the file with your notepad, you will find it's a sqlite3 datebase indeed.

Resources