I am working on a react mobile application where the user can take an image with their camera and then my node application can do image processing on that uploaded picture, finally information is sent back to the react side from the node application. The problem I'm currently receiving is that I'm not really sure how to get my node application to access the taken photo.
Would the only way to do this would be to save the photo into some database and then have my node application access it there? Would it be possible to do this without saving the photo to a database?
Thanks for the help.
you could storage the taken photo using a database,but it depends of your requirements if you don't need to have an historical from your image processors (like receive a image X from user USERNAME and it was processed as image Y ).
If you just need to make the process the photo you can send it as base64 string encoded, so you can make a POST request and send that string in a JSON field from your React app to Node.js and when you receive that string you need to decode the message to generate an image, next you cold make your image processing and finally send that image as was received before
Related
I would like to know what is the best way to handle image uploading and saving the reference to the database. What I'm mostly interested is what order do you do the process in?
Should you upload the images first in the front-end (say Cloudinary), and then call the API with result links to the images and save it to the database?
Or should you upload the images to the server first, and upload them from the back-end and save the reference afterwards?
OR, should you do the image uploading after you save the record in the database and then update it once the images were uploaded?
It really depends on the resources, timeline, and number of images you need to upload daily.
So basically if you have very few images to upload then you can upload that image to your server then upload it to any cloud storage(s3, Cloudinary,..) you are using. As this will be very easy to implement(you can find code snippet over the internet) and you can securely maintain your secret keys/credential to your cloud platform on the server side.
But, according to me best way of doing this will be something like this. I am taking user registration as an example
Make server call to get a temporary credential to upload files on the cloud(Generally, all the providers give this functionality i.e. STS/Signed URL in AWS).
The user will fill up the form and select the image on the client side. When the user clicks the submit button make one call to save the user in the database and start upload with credentials. If possible keep a predictable path for upload. Like for user upload /users/:userId or something like that. this highly depends on your use case.
Now when upload finishes make a server call for acknowledgment and store some flag in the database.
Now advantages of this approach are:
You are completely offloading your server from handling file operations which are pretty heavy and I/O blocking and you are distributing that load to all clients.
If you want to post process the files after upload you can easily integrate this with serverless platforms and do that on there and again offload that.
You can easily provide retry mechanism to your users in case of file upload fails but they won't need to refill the data, just upload the image/file again
You don't need to expose the URL directly to the client for file upload as you are using temporary Creds.
If the significance of the images in your app is high then ideally, you should not complete the transaction until the image is saved. The approach should be to create an object in your code which you will eventually insert into mongodb, start upload of image to cloud and then add the link to this object. Finally then insert this object into mongodb in one go. Do not make repeated calls. Anything before that, raise an error and catch the exception
You can have many answers,
if you are working with big files greater than 16mb please go with gridfs and multer,
( changing the images to a different format and save them to mongoDB)
If your files are actually less than 16 mb, please try using this Converter that changes the image of format jpeg / png to a format of saving to mongodb, and you can see this as an easy alternative for gridfs ,
please check this github repo for more details..
Title is my questions.
First. I'm making simple diary app with Node.js and Vue.js. Vue-router using history mode and in backend, using "connect-history-api-fallback" module. I think i did everything i can do, but when i run my app in local, refresh make vue.js's store clear. I googled but can't find same problem. Someone have any idea?
Second. I'm using Multer to upload. Upload is fine, i can see uploaded image. But i don't know how to show that uploaded image.
I mean in vue's template, what path will show uploaded image?
Image uploaded here "/simple-diary/backend/upload/profilePhoto/"
Vue.js component is here "/simple-diary/frontend/src/components/"
#samayo is right.One question per post.So of course when the page refresh the store is refreshed.So if you dont want that you can use plugin like vuex-persistedstate.Or if you want to keep the token and the user that is currently logged then when the user logged in,use localstorage to save the token and the user.Or cookies.Or session storage.You have many options
I am using an API from TinyPng.com which helps in compressing images.
When a user uploads images, I make an API call to TinyPng.com with the URL of the image that I want to compress, it provides a response with a link of the compressed file. Based on image size it could take about a few seconds to get a response.
How can I handle such time consuming processes in NodeJS ?
What you should be doing is handling that in the background on the server side. Once the compressed image is ready, download and replace the original one
I am trying to build a Facebook chatbot that sometimes sends image as response to user queries. These images are from the response of API requests from my node server and don't sit at my server end.
I am using Graph api to send messages automatically from the chatbot whenever a postback is received.
I am able to get image response back, but the images are not responsive. I have attached a picture for reference.enter image description here
From the Facebook documentation, I don't see any parameter that dynamically changes the image size. As the images I receive are from an external api and not from my server, is there a way around to change the image size and display the image with new dimensions in my chatbot.
Thanks in advance!
There is no image size exactly, but you can set the aspect ratio of the image, which will crop it to that ratio in the template. payload.image_aspect_ratio and the options are horizontal (1.91:1) or square (1:1).
You could also fetch the image with a third party API like Cloudinary, which will do image transforms on the fly.
I'm building a react webapp which allows users to upload a picture and then render the thumbnail, just like facebook chat. But I'm not sure what's the best practice to solve the uploading-resizing-generatingThumbnail time gap before I can render them.
The workflow is like:
1) User uploads a picture to S3, stored in bucket1
2) Lambda function invoked, getting the newly uploaded picture and do the resizing work, then store thumbnail in bucket2
3) Thumbnail rendered in browser(client-side). Here it's a bit tricky - I just hardcode the img url because it's predictable, however, it takes a while before available(generating process).
But I don't know how to let lambda notifies the browser when a thumbnail successfully generated and ready to render. In production it might be lambda tells node server first, and then node server tells the client; but in developing mode, it seems impossible as I'm running an express server on my own laptop. Should lambda do the notification in a proper way or there's other better solution?
AWS Lambda cannot "notify the browser" because it is a process that was independently triggered and has no connection with the web page request.
One option would be to code the web page to keep trying to download the image. You'd need some fancy JavaScript/node code that can check whether the image was successfully downloaded and then retry if necessary.
By the way, there are also services that can resize images on-the-fly so you don't have to create your own thumbnails:
Cloudinary
Imgix