I am using cloudinary to upload photos on my webpage. I have added a new function to the webpage ( facebook login) and now the cloudinary throw an error when I try to upload a photo like before.
"/home/ubuntu/workspace/YelpCamp/node_modules/cloudinary/lib/utils.js:982 throw "Must supply api_key"; ^ Must supply api_key"
The API_KEY, API_SECRET and the CLOUD_NAME are saved in a .env file, and these are correct.
var express = require("express");
var router = express.Router();
var Campground = require("../models/campground");
var middleware = require('../middleware') ; //because of the index.js default name
var geocoder = require('geocoder');
///////////////////////////////////////
// MULTER
var multer = require('multer');
var storage = multer.diskStorage({
filename: function(req, file, callback) {
callback(null, Date.now() + file.originalname);
}
});
var imageFilter = function (req, file, cb) {
// accept image files only
if (!file.originalname.match(/\.(jpg|jpeg|png|gif)$/i)) {
return cb(new Error('Only image files are allowed!'), false);
}
cb(null, true);
};
var upload = multer({ storage: storage, fileFilter: imageFilter});
///////////////////////////////////////
//CLOUDINARY
var cloudinary = require('cloudinary');
cloudinary.config({
cloud_name: process.env.CLOUD_NAME,
api_key: process.env.CLOUD_KEY,
api_secret: process.env.CLOUD_SECRET
});
router.post('/', middleware.isLoggedIn, upload.single('image'), function(req, res) {
console.log(req.user);
//GEOCODER
geocoder.geocode(req.body.location, function (err, data) {
//CLOUDINARY UPLOAD
cloudinary.uploader.upload(req.file.path, function(result) {
var image = {
path: result.secure_url,
id: result.public_id
};
var name = req.body.name;
var price = req.body.price;
var description = req.body.description;
if(req.user.facebook.username) {
var username = req.user.facebook.username;
} else {
username = req.user.local.username;
}
var author = {
id: req.user._id,
username: username
};
if(!data.results[0]) {
var lat = 90;
var lng = 0;
var location = "North Pole";
} else {
lat = data.results[0].geometry.location.lat;
lng = data.results[0].geometry.location.lng;
location = data.results[0].formatted_address;
}
var newCampground = {name: name, price: price, image: image, description: description, author: author, location: location, lat: lat, lng: lng};
//create
Campground.create(newCampground, function(err, result) {
if(err) {
console.log(err);
} else {
console.log(result);
res.redirect('/campgrounds');
}
});
});
});
});<% include ../partials/header %>
<div class="row">
<h1 style="text-align: center;">Create a New CampGround</h1>
<div style='width: 30%; margin: 30px auto;'>
<form action='/campgrounds' method='POST' enctype="multipart/form-data">
<div class='form-group'>
<label for="name">Name</label>
<input class="form-control" id="name" type='text' name='name' placeholder='Name'>
</div>
<div class='form-group'>
<label for="price">Price</label>
<input class="form-control" id="price" type='number' name='price' placeholder='price' min="0.01" step="0.01">
</div>
<div class='form-group'>
<label for="image">Image</label>
<input type="file" id="image" name="image" accept="image/*" required>
</div>
<div class='form-group'>
<label for="description">Description</label>
<input class="form-control" id="description" type='text' name='description' placeholder='Write description'>
</div>
<div class="form-group">
<label for="location">Location</label>
<input class="form-control" type="text" name="location" id="location" placeholder="Yosemite National Park, CA">
</div>
<div class='form-group'>
<button class="btn btn-lg btn-default btn-primary btn-block">Submit!</button>
</div>
</form>
<a href="/campgrounds"> Go Back </a>
</div>
</div>
<% include ../partials/footer %>
CLOUD_KEY&CLOUD_SECRETor is that a typo? – palaѕн