I have a MEVN Stack app. This requires to upload media files to the database. From the client-side, I am posting a multipart type form which will send the file to the server through Axios. I don't know how to store that in the MongoDB database and retrieve the same.
What you are looking for, is creating an API in node.js to handle uploaded file. (You can use express.js to make your life easier if you are not already using it)
In Vue.js create a component to upload a file and store the files in the file system on the server might be in a folder that is accessible through the web server (like in a public folder).
Finally, save the URL to access the file in MongoDB so, you can reference it later. You can google for tutorials on this, an example is here.
Related
wondering what the modern paradigm is for securing upload images/files.
In other words, I have a website which requires authentication. Once a user logs in they can upload files/images which they can later access.
I'm using multer for the file upload, so a couple questions:
1) Should I be storing files in a database (MongoDB) or in folders? Pros and cons? Security considerations?
2) Assuming the answer to #1 is "folders", how do I practically control access to (i.e. authorization) to those files. In other words, if a user upload file image.jpg, and I save it to http://API_URL/images/image.jpg, I want that jpg to be accessible only after I receive a validation token from that user, but that isn't possible since the image will be accessed via , i.e. not a get or post where I can attach such token. Is that something I should be doing via the express router? Maybe make the path of the saved file /images/:id and then attach some long user id which cannot be guessed as part of the path to get to the image?
Thanks
My goal is to upload a profile picture. I did this in development mode using multer in Node.js. Multer asks for a path where to save the new picture.
In development mode, my Angular frontend and my Node.js backend were in the same file (see below for the project structure). The destination path used in Multer worked for development mode.
I then deployed my backend and frontend separately and now this path doesn't work. How can I make sure that the uploaded profile pictures end up in the same map as it did in development?
This is the structure in development mode. SRC map contains the Angular frontend code and backend contains the Node.js backend.
This is the path I used to store uploaded profile pictures with Multer. The problem now is that I deployed my backend and frontend separately to Heroku and so this path doesn't work anymore.
How can I change my path so that my uploaded profile pictures still get added to this assets/images/profile-pictures map?
The filesystem that Heroku provides is ephemeral: any changes you make to it will be lost the next time your dyno restarts. This happens frequently (at least once per day).
Instead of storing uploaded files on the local filesystem, Heroku recommends storing them on a third-party service like Amazon S3. The multer-s3 library should let you do that fairly easily.
Once the files have been stored you can access them via Amazon's SDK or, if you've configured your uploads accordingly, via HTTP. Regular HTTP access can be authenticated or anonymous.
Sorry, It might be very novice problem but I am new to node and web apps and just have been stuck on this for couples of days.
I have been working with a API called "Face++" that requires user to upload images to detect faces. So basically users needed to upload images to my webapps backend and my backend would do an API request with that image. I somehow managed to upload the files at my node's backend using tutorial provided below but now I am struggling how to use those image files. I really don't know how to have access to those files. I thought writing just the filepath/filename would help but it did not. I am really new at webapps.
I used tutorial from here: https://coligo.io/building-ajax-file-uploader-with-node/
to upload my files at back-end.
thanks
You can also use the Face++ REST API node client
https://www.npmjs.com/package/faceppsdk
As per in documentation it requires a live URL on web. Then you have to upload your files into remote location (You may upload files to a Amazon S3 Bucket)
And also you check the sample codes from Documentation where you can upload directly to Face++
I am trying to upload an image to my server through a node.js server using express. I am in the process of writing an CRUD API but I am stuck on how to POST and save the image in a directory on my server.
//post
app.post('/public/media', function(req,res){
});
This is the barebones of my post method. I am trying to store the image in my media file. How should I go about this?
Note, I am not trying to store the image into a database. Rather, I am trying to store the image in a folder on my server and simply store the path to the image in my database.
Without duplicating an entire article about this issue, checkout this tutorial out. You will need to make slight adjustments to this code if using Express 4, otherwise it will work great.
Comment if you have issues below.
I am building a MEAN application (Angular + node + Express + Mongo).
In this app there are users who can upload a limited amount of pictures (lets say 5).
I really want to avoird storing too many data on my server.
So I am looking for a module that let users upload the images to a service such as picasa, imageshack... The service should be transparent to the user.
When it's done, I save the picture URL in my DB and so I can retrieve it and display pictures easily.
Do you know such module / tutorial to do that? Does it even exists?
I have been looking but it seems to not exists.
The easiest way to have a file upload service with AngularJS as the front end and NodeJS as the backend is to use the jQuery File Upload for use with AngularJS, which can be found here.
It makes use of a directive that you can use to upload your file.
You need to specify a route to which the uploaded file should be POST'ed to.
In this route handle, that is in you Node.js server, you can then post it to the external image hosting servers. This is something that you can write on your own or you can use the node.js modules for the respective hosts (if they exist).
I find a service doing it:
http://cloudinary.com/
With a nodejs integration:
http://cloudinary.com/documentation/node_integration
It seems perfect (free up to 500 MO and 50.000 pictures, far enough for my needs).