Cloudenry Setup

gistfile1.txt

"use client";
import React from "react";
import { useForm } from "react-hook-form";

const Upload = () => {
  const { register, handleSubmit } = useForm();

  async function onSumbithandler(data) {
    const image = data.profile[0];
    // console.log(image);

    // Create an instance of FormData
    const formData = new FormData();
    // Append the image to FormData
    formData.append("file", image);
    formData.append("upload_preset", "uploadtry");
    formData.append("api_key", "649719796848989");

    // Make an API request to Cloudinary upload endpoint
    const uploadResponse = await fetch("https://api.cloudinary.com/v1_1/vibhuGupta/image/upload", {
      method: "POST",
      body: formData,
    });

    const uploadedImageData = await uploadResponse.json();
    const imageUrl = uploadedImageData.secure_url;
    console.log(imageUrl);
  }

  return (
    <div>
      <div className="w-full h-full min-h-screen flex flex-col mt-[15rem]">
        <div className="flex flex-col justify-center items-center">
          <form onSubmit={handleSubmit(onSumbithandler)} className="max-w-lg mx-auto">
            <label
              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
              htmlFor="profile"
            >
              Upload file
            </label>
            <input
              {...register("profile", { required: true })}
              className="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
              aria-describedby="user_avatar_help"
              id="profile"
              type="file"
            />
            <div
              className="mt-1 text-sm text-gray-500 dark:text-gray-300"
              id="user_avatar_help"
            >
              Upload your file here!!
            </div>
            <button className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900">
              Purple
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Upload;