this error when submit form
POST https://api.cloudinary.com/v1_1/dvq5qpz3n/image/upload 400 (Bad Request)
{“error”:{“message”:”Upload preset must be whitelisted for unsigned uploads”}}
form.jsx
const uploadImageToCloudinary = async (imageFile) => {
const formData = new FormData();
formData.append("file", imageFile);
formData.append("upload_preset", process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET);
const response = await fetch(
`https://api.cloudinary.com/v1_1/dvq5qpz3n/image/upload`,
{
method: "POST",
body: formData,
}
);
const data = await response.json();
return data.secure_url;
};
const handleSubmit = async (e) => {
e.preventDefault();
if (image) {
try {
const uploadedImageUrl = await uploadImageToCloudinary(image);
const newBlog = {
title,
description,
image: uploadedImageUrl,
};
await createBlog (newBlog).unwrap();
setTitle("");
setDescription("");
setImage("");
} catch (error) {
console.log(error);
}
} else {
console.log("Please select an image.");
}
};
/* CONFIGURATION */
dotenv.config();
const app = express();
app.use(express.json());
app.use(helmet());
app.use(helmet.crossOriginResourcePolicy({ policy: "cross-origin" }));
app.use(morgan("common"));
app.use(bodyParser.json());
app.use(cors());
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ extended: true, limit: '50mb' }));
app.use('/blog', BlogRoutes);
/* ROUTES */
app.use("/client", clientRoutes);
app.use("/general", generalRoutes);
app.use("/management", managementRoutes);
app.use("/sales", salesRoutes);
cloudinary.config({
cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
});
mongoose.set('strictQuery',false);
// CONFIGURATION
const PORT = process.env.PORT || 9000;
mongoose
.connect(process.env.MONGO_URL, {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => {
app.listen(PORT, () => console.log(`Server Port: ${PORT}`));
// User.insertMany(dataUser);
// Product.insertMany(dataProduct);
// ProductStat.insertMany(dataProductStat);
// Transaction.insertMany(dataTransaction);
// Blog.insertMany(dataBlog);
})
.catch((error) => console.log(`${error} did not connect`));
i need to build CRUD dashboard now i can create new property to mongodb but not have field of image
i already setting cloudinary to unsigned
