Next.js 13 Full Stack E-commerce App #26 | Upload Multiple Product Images on Cloudinary
Вставка
- Опубліковано 15 тра 2023
- Git Repo Link:
github.com/ghulamabbas2/buyit...
Checkout my In-Depth Next.js Masterclass on Udemy Courses:
www.udemy.com/course/nextjs-b...
Next.js 13 Authentication with Next-Auth:
• Next.js Authentication...
================================================================
⚙️ Gadgets I use for Recording:
💻 Laptop - Macbook PRO M1 - 16/512
amzn.to/4eUqrSe
🎤 MIC - Samson Technologies Q2U USB/XLR Dynamic Microphone
amzn.to/3W9Z4wl
🖱️Mouse - Logitech G402 Gaming Mouse Hyperion Fury USB, Black
amzn.to/3RY4xUy
⌨️ Keyboard - Logitech K380 Multi-Device Bluetooth Keyboard
amzn.to/3RY4Fn0
🖥️ Monitor - UltraSharp 24-Inch Screen Led-Lit Monitor (U2419H)
amzn.to/4bxidN6
================================================================
In this tutorial, we will continue building our full-stack e-commerce application using Next.js 13. Our focus today will be on enabling users to upload multiple product images using Cloudinary, a cloud-based image and video management service.
You'll learn how to add a file upload component to your form, handle multiple image uploads, and display the uploaded images on your product page.
By the end of this tutorial, you'll have a better understanding of how to use Cloudinary in your Next.js app and how to upload and display multiple product images. Don't miss out on this informative video!
LIKE, SHARE & SUBSCRIBE!
Please add a deployment video when u finish this project
Thanks leader for your fantastic project.. ❤️❤️ i hope you'll complete this project very soon...love from Bangladesh ❤️🇧🇩❤️
I appreciate your series i hope you will finish full project
Hello Abbas, hope you are doing well, and thanks for the new series. We have some issues with series #25 and we have left the comments, could you give us some guidance, please
Please check that comment, I have responded there.
Hey man, are you getting any build errors when running 'npm run build'? It's failing for me every time - although the app is working as expected. I'm just checking to see if it's a problem on my end or if it's something that will be resolved later.
@@TerryMitchell yep I got error
Error: Export encountered errors on following paths:
/admin/products/[id]/page: /admin/products/[id]
/admin/products/page: /admin/products
/page: /
/product/[id]/page: /product/[id]
@@TerryMitchell , I am getting error too,
Error: Export encountered errors on following paths ....
@@akhror-oshie thanks for letting me know, we'll need to address this before deployment.
Hi Abbas! Thanks once again, we left some comments in #25 regarding an issue with the code that's preventing us from moving forward with the course - is there any chance you could let us know how to proceed. Many thanks in advance. Terry
Please check that comment, I have responded there.
who has the code for multer that works after deployment?? Abbas, kindly come through
those who are using nextjs13.4 app router and above code below can save your alot of time, to upload multiple images to cloudinary ,
import dbConnect from "@/app/backend/config/dbConnect";
import ProductModel from "@/app/backend/models/product";
import createErrorResponse from "@/app/backend/middlewares/errors";
import { createRouter } from "next-connect";
import { NextResponse } from "next/server";
import fs from "fs";
import path from "path";
import { v4 as uuidv4 } from "uuid";
import os from "os";
import cloudinary from "cloudinary";
cloudinary.config({
cloud_name: process.env.CLOUD_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
});
const router = createRouter();
async function uploadPhotosToCloudinary(newFiles) {
const multiplePhotosPromise = newFiles.map((file) => {
return cloudinary.v2.uploader.upload(file.filepath, {
folder: "buyitnow/products",
});
});
return await Promise.all(multiplePhotosPromise);
}
async function savePhotosToLocal(formData) {
const files = formData.getAll("image");
const multipleBufferPromise = files.map(async (file) => {
const data = await file.arrayBuffer();
const buffer = Buffer.from(data);
const name = uuidv4();
const ext = file.type.split("/")[1];
const tempdir = os.tmpdir();
const uploadDir = path.join(tempdir, `/${name}.${ext}`);
await fs.promises.writeFile(uploadDir, buffer);
return { filepath: uploadDir, filename: file.name };
});
return await Promise.all(multipleBufferPromise);
}
dbConnect();
router.post(async (req, res) => {
try {
const productURL = new URL(req.url);
const pathnameParts = productURL.pathname.split("/");
const productId = pathnameParts[pathnameParts.length - 1];
let product = await ProductModel.findById(productId);
const formData = await req.formData();
const newFiles = await savePhotosToLocal(formData);
const photos = await uploadPhotosToCloudinary(newFiles);
newFiles.map((file) => fs.unlinkSync(file.filepath));
const urls = [];
const imageurl = photos.map((item) => {
const image = {
public_id: item.public_id,
url: item.secure_url,
};
urls.push(image);
});
product = await ProductModel.findByIdAndUpdate(productId, {
images: urls,
},{new:true,});
const response = {
success: true,
message: "product images uploaded successfully",
data: urls,
product,
};
return NextResponse.json(response);
} catch (error) {
return createErrorResponse(error);
}
});
export async function POST(request, ctx) {
return router.run(request, ctx);
} if u need any help you can ask me on my linkedIn id: HimayunKhan
Hello!, you know if this works when the project is deployed?, I'm doing a project with next-js, cloudinary, Mongodb and my code is okay in my local, the images are uploading to cloudinary and i can send the url to mongodb but when my project is in vercel, cant make POST, I've been searching a lot and multipart Form data with vercel must be the problem. Please, can you tell me if you uploadings are okay in your deploy?, thank you in advace!
does this work after deployment??
I am getting a axios error code 505. No such directory exist myproject/public/uploads/dateformat-imagename.png
@coding with abbas please respond me i am stuck in this error since 3 days
Have you created uploads directory in the public folder?
hello @@codingwithabbas , I am also facing the same issues despite creating a "uploads" directory in "public" folder. And to get rid of the multer, I am commenting "uploadmiddleware" and enabling "bodyparser config" to upload images without multer I found "req.files is undefined". I'll be very grateful if you reach me out here to help me about these issues!