I've created a SNS web application (using node.js) where people can upload pictures (using cloudinary) into collections.
The application works perfectly on a cloud-based IDE I use for writing code; however, after pushing it to heroku, the image upload no longer works. I don't get any error message in my console, even though I think it should be console.logging it, however the error flash happens and the image doesn't upload.
Here is my code:
router.post("/", middleware.isLoggedIn, upload.single('image'), function(req, res){
cloudinary.v2.uploader.upload(req.file.path, function(err, result) {
if (err) {
//if error
console.log(err.message);
req.flash("error", "Can't upload image, try again later.");
return res.redirect("back");
}
//else
// add cloudinary url for the image to the campground object under image property
req.body.image = result.secure_url;
req.body.imageId = result.public_id;
// add author to campground
req.body.author = {
id: req.user._id,
username: req.user.username
};
I've tried searching other posts for a possible reason; but I can't find anything that matches my situation. If anyone can help...please, your advice would be greatly appreciated!
Thank you.
Sorry! The problem was the CLOUD_NAME config variable had '' marks around it.
If anyone is having similar issues, try removing the quotes around the name variable.
Related
hope someone can help me with this:
I am working on a Node/Express/Mongo CRUD app where every post/document has ONE image. I am using multer and cloudinary for uploading the images. However, I want users to be able to upload multiple images to each post. Ideally, the image urls/paths and IDs would be stored in arrays in my database.
I have been trying and researching for hours now but cannot seem to make it work, and there is no tutorial out there explaining how this (simple) task can be achieved using multer and cloudinary.
This is the code I am using to upload ONE image per post, which is working:
// CREATE Route - add new post to DB
router.post("/", middleware.isLoggedIn, upload.single('image'), function(req, res) {
cloudinary.v2.uploader.upload(req.file.path, function(err, result) {
if(err) {
req.flash('error', err.message);
return res.redirect('back');
};
// add cloudinary url for the image to the post object under image property
req.body.post.image = result.secure_url;
// add image's public_id to post object
req.body.post.imageId = result.public_id;
// add author to post
req.body.post.author = {
id: req.user._id,
username: req.user.username
}
Post.create(req.body.post, function(err, post) {
if (err) {
req.flash('error', err.message);
return res.redirect('back');
}
res.redirect('/posts/' + post.id);
});
});
});
How would I need to change this code in order to achieve this goal?
Thanks in advance for your help!
The upload API currently only supports a single file upload at a time, it does have a high concurrency rate (of about 40-50 concurrent calls) so you can use multi-threads to upload many files at once.
You can also use asynchronous calls, and tell Cloudinary to do the upload in the background by adding the async parameter and setting it to true.
im trying to create a download for a user but somehow my download doesnt work even tho it works?Let me explain :
Server post request :
app.post('/downloadRequest', function (req, res) {
var fileName = "testname.txt";
var file = __dirname +'/test.txt';
res.download(file,fileName,function(err) {
if(err) throw err;
console.log("downloaded");
});
});
When im calling it,no error message appears. Also it shows "downloaded" in the console.Im clueless..
How do I create a web gallery and uploading, storing and displaying images via nodejs and mongodb?
I have tried to write some code myself, but don't manage to solve the problem.
Do someone have a link or tutorial that helps me solve the problem?
It is not recommended to store whole images on databases. It can be done but based on similar questions on stack overflow it is better to store images on your file system. That can be done by using themulterand fs module to handle the upload and store it on the file system. You can even use an image proccessor to confirm that what was uploaded was really an image and not something else. I recommend using the sharp module found on npm to do that. This way you are sure that nothing can go wrong and you can even resize images before storing. Here is some code for this using express.js:
var multer = require('multer');
var uploadPicture = multer({
dest: 'temp/'
});
var sharp = require('sharp');
app.post('/upload', uploadPicture.single('profileIcon'), function (req,res) {
fs.readFile(req.file.path, function (err, data) {
if (err) res.end('UNRESOLVABLE ERROR');
sharp(data).resize(200, 200).toFile('./photos/pic.jpg', function (err, info) {
//DELETE THE TEMPORAL FILE
fs.unlink(req.file.path, function (error) {
if (error) res.end('UNRESOLVABLE ERROR'); //CODE 3 ALARM
res.end('success');
});
}
I'm making a node/express app with models for users and activities. I've set up an activities.js controller and restful view-pages with placeholder text. When I try to load any of the view pages I'm getting Cannot get error messages (eg "Cannot GET /activities/edit"). The following is an example of how part of the controller is laid out:
var Activity = require('../models/Activity');
function activitiesIndex(req, res){
Activity.find({}, function(err, activities){
if(err) return console.error(err);
else{
res.render('/activities/index', {
activities: activities});
}
});
}
function activitiesIndex(req, res){
Activity.findById(req.params.id,
function(err, activity){
res.render('/activities/show', {activity: activity});
});
}
Console is showing a server 404 error, which I'm confused by as I've set up views. Does anyone have any suggestions as to where I might be going wrong here?
Thanks very much
I am learning node.js at the moment and I am creating a little application where I can upload images and display them in a gallery.
Currently I have a form which uploads the image to the server via POST
extends ../layout
block content
.col-sm-6.col-sm-offset-3
h1 control panel
form(action="/upload", method="POST",
enctype="multipart/form- data")
input(type="file", name='image')
input(type="submit", value="Upload Image")
The file is then inserted to a mongodb using mongoose
exports.upload = function (req, res) {
fs.readFile(req.files.image.path, function (err, data) {
var imageName = req.files.image.name;
if(!imageName){
console.log("seems to be an
error this file has not got a name");
res.redirect("/");
res.end();
}else{
var newimage = new Image();
newimage.img.data = fs.readFileSync(req.files.image.path);
newimage.img.name = imageName;
newimage.save(function (err, a) {
if (err){
console.log("There was an error saving the image")
res.redirect("/");
res.end();
}
res.redirect("/gallery");
});
}
});
}
In my gallery controller I query the database for all the images and pass them to front-end.
exports.gallery = function (req, res) {
Image.find({}, function(err, image){
if (err)
res.send(err);
else
res.render("site/gallery", {images: image });
});
}
And then in my gallery I try create a new image tag for each of the images
extends ../layout
block content
h1 Gallery
each image in images
img(src='#{image.img.data}')
My problem is that I keep getting a 404 error because the browser cannot find the image.
But I have a feeling that I might be going about this the wrong way. I have seen GridFS but I feel that it is not suitable for this app as the amount of images in the gallery will be less than 20 max. Am I going about the right way to do this or should I be storing the images on the server and retrieving them that way?
You would typically upload the images to your server's machine filesystem or to a static assets cloud hosting service like AWS S3, and store only the URLs of the images in your database.
You could also use a solution like Cloudinary.