Hello ,
How to display and show image using mongodb? How we can send file/image in api as request? I am not getting, how to send the file/image in backend? I am using mongodb and node js in backend.
Thank You,
Prattyancha
Hi Patharkar,
To display and show an image using MongoDB and Node.js, you need to perform the following steps:
1. Store the image in MongoDB: You can store the image in MongoDB as a binary object, known as Binary Large Object (BLOB). You can use the mongoose library to store the image in MongoDB, as follows:
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const imageSchema = new Schema({ image: { data: Buffer, contentType: String } });
const Image = mongoose.model('Image', imageSchema);
2. Retrieve the image from MongoDB: You can retrieve the image from MongoDB using a query and send it as a response to the client, as follows:
app.get('/image/:id', (req, res) => {
Image.findById(req.params.id, (err, image) => {
if (err) return res.send(err);
res.set('Content-Type', image.contentType);
res.send(image.data);
});
3. Send the image in the API request: To send an image in an API request, you need to encode it as a base64 string and send it in the request body, as follows:
const fs = require('fs');
const image = fs.readFileSync('image.jpg').toString('base64');
const requestOptions = {
method: 'POST',
uri: 'https://your-api-endpoint.com/image',
body: {
image: image
},
json: true
};
request(requestOptions, (err, res, body) => {
// handle the response
In the API endpoint, you can decode the base64 string and store it in MongoDB, as shown in step 1.
Let me know if you need any other help.
Hello Shubham Sharma,
Thanks for your answer. But I have one question on you solution. i.e How will const fs = require('fs'); work in outsystems ? I mean can we install it in outsystems?
Thank You ,
Hello Shubham Sharma ,
Here is my code .
$parameters.base64 is output parameter created inside javascript file in service studio.
const file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function() {
$parameters.base64 = reader.result ;
console.log('RESULT', reader.result);
}
reader.readAsDataURL(file);
I am sending $parameters.base64 in api request. But it is sending blank.
Will you help me out in this scenario.
Regards,
Hi Prattyancha ,
The code you posted sets the value of $parameters.base64 inside the onloadend function, which is called when the file has finished being read. However, it's possible that the API request is being sent before the file has finished being read, which would result in $parameters.base64 being blank. To fix this, you can either wrap the code block in an asynchronous function and use await to wait for the file to be read before sending the API request, or you can send the API request inside the onloadend function to ensure that $parameters.base64 has a value before the request is sent.
I tried this. Is this way correct?
reader.onloadend = async function () {
$parameters.base64 = await reader.result;
console.log('RESULT', reader.result)
}reader.readAsDataURL(file);
But still I am getting $parameters.base64 blank.
Can you share your oml file for reference for this?
Hello @Prattyancha Patharkar
you can go through this video I hope this will help you
https://www.youtube.com/watch?v=QSO4vIePxqs&ab_channel=OutSystems
Regards
Nikhil kumar vijay