I'm new in nodejs and angular and trying to create a page that users can upload multi-file from frontend to backend and then retrieve data with images.
sending data to the backend is absolutely fine but retrieving data with files to front end doesn't work and I lost in google for three days and no luck so far to find any start point.
any help will be grateful
Related
I'm beginner and using MERN. I've successfully deployed frontend and backend separately on render for testing purposes and when a user signs up they can choose a profile picture, now on localhost this works fine and it successfully adds to mongodb and shows in the web application. However when deployed I get an error that I can't 'GET' the image from the specific path.
Now I'm trying to workout with this is the case but could someone explain in ELI5 terms? Also would I need to host my images such as cloudinary? Thank you.
Tried to upload images when deployed but not being fetched.
You should consider using cloudinary or an S3 bucket to store images in production.
First of all, call your /upload api route
Generate a uuid + .extension (png or jpg)
Upload this key as the name with your image file to cloudinary (for exemple)
Then save this key into your database to be able to access it later on.
If you consider using an S3 bucket, you should always configure a CDN between your client and your bucket to avoid billing’s surprises
Hello and thanks for your answers!
I´m creating a webapp (React, NodeJS, Express, MongoDB) where my users can upload products and i was wondering where it´s the best place to store the images. I know i can store them directly in the /public/ folder of my project and save the url into MongoDB, but i also know i can use services like AWS Storages.
Considering i´m not going to host my app in AWS, is it worth it to have my image files in a separate service? I´m not expecting to have an huge app but i´m expecting around 200/300 images, having 300 images in my /public/ folder affects my app performance at the moment of the render?
Thank you so much again, have a good day.
Am not saying that i dont know how because i tried it before using multer and it works perfectly fine but the thing is these images get saved to a foldet called uploads with a namd and an id that i generatr using js
What i want to know : is this the propper way of doing it and if so wherr does that folder go to after hosting your website and does it contain alll the images from my website, i mean it will be a really large folder so where does it go to when hosting ??
PS: And another thing whenever i go to youtube or facebook etc i see a domain like i.ytimg.com containing these images so how is that acheived
I don't know if my reply would be helpful, but the way I use it is I save the image in a mongoDB database (Buffer) and just load it from the database.
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 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).