I have an app using MERN stack. What i want to do is to allow the user to upload images from their local machine, save that image, and display it on the website. What would be the recommended way to do this? It seems as if GridFS and MongoDB is an option but from what I am reading, storing images files directly in a database isn't recommended
Storing images directly to DB is not recommended. Instead, you can use some third party libraries like multer that store images in the folder and generate a path for you to access that image which you can save in db.
Another approach is to use third-party services like Cloudinary or S3 bucket to save images and they will in return give you the URLs and you can save those Urls in DB.
Related
I have a developed a Reactjs front end, FastAPI backend and MongoDb database. I want to upload images to a private Azure storage account and consume them on the site.
What I'm struggling to understand is what the best practice is for loading the images?
Should I:
Get a SAS key from my API, then go directly from Reactjs to the storage account URL?
Get the image from the Azure storage using the API and serve it to the Reactjs
A better option?
Thanks in advance
Preferred way would be to go with option 1 - Get a SAS key from my API, then go directly from Reactjs to the storage account URL.
The advantages of this approach is that the Browser is directly requesting the images from Azure Storage so that there is less load on your API to fetch and serve the images. You may need to configure CORS settings on your Storage account if your React app is making an Ajax request to fetch the blob contents from Storage.
Doing this way however exposes your SAS URL to the client. If you do not want the clients to know from where the images are being served, then go with option 2.
Now I am creating a real digital library website. The website is required to store uploaded file in a database and receive it from the database. I have found a way to store the uploaded files in Google Cloud. May I know is there another way better than this?
I am creating a web app using React where the user can upload files to a folder in my S3 bucket. This folder will have a unique passcode name. The user (or someone else) can use this passcode to retrieve these files from the S3 folder. So basically there is no login/authentication system.
My current issue is how do I safely allow read/write access to my S3 bucket? Almost every tutorial stores the access keys to the client code which I read is very bad practice but I also don't want to create a backend for something this simple. Someone suggested presigned URLs but I have no idea how to set that up (do I use Lambda? IAMs?). I'm really new to AWS (and webdev in general). Does anyone have any pointers on what I could look into?
do I use Lambda? IAMs?
The setup and process if fully explained in AWS blog:
Uploading to Amazon S3 directly from a web or mobile application
I need to save sounds which my rn app is using on a database. I'm not really familiar with databases, so I chose the most easiest variant as I'm thinking - firebase. So, is there a possibility to save an mp3 file on this db using react native? If not, what db supports this feature?
What you usually do in such cases is to store the actual file on a cloud storage service, such as AWS S3, while in your actual database you save the path to that file.
When you need to retrieve the file, you load the path from the database and with that information you can download the file from the storage.
If you want to remain in the firebase eecosystem, you should take a look at the cloud storage service for Firebase: https://firebase.google.com/docs/storage
You better store the files inside a storage like Google storage for firebase
or AWS simple storage or any other storage.
And store the url of the file inside your database.
I am a mobile developer trying to do backend development. It is going more or less well but still having doubts about some subjects. Currently I want to add a Google app engine service to upload and resizing images on Google Storage. Now I am trying to define the best way to upload it because image is just a part of the object form data.
Option 1: I know I can use Javascript to send two different forms (one for the data to my own controller and the other one for image to the app engine service) pointing to different processing URIs and create a random string to use as a link between image and data (because after uploading successfully on Google Storage I need to write the URL on my object data.
Option 2: Upload everything in one form just with my service and store temporally the image locally and send it on background calling app engine from my controller.
Option 3: Storing everything like now and use a background task to send image to app engine and the replacing the image by the returned URI.
No one of this options convinces me, please if some of you faced this before, enlighten me.
Regards,