Skip to content

Instantly share code, notes, and snippets.

@10xdevian

10xdevian/gist:a3cb441c4b172d76c4ed6d0caea362c1

Created June 19, 2024 20:07
Show Gist options
  • Save 10xdevian/a3cb441c4b172d76c4ed6d0caea362c1 to your computer and use it in GitHub Desktop.
Save 10xdevian/a3cb441c4b172d76c4ed6d0caea362c1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. 10xdevian created this gist Jun 19, 2024.
    64 changes: 64 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    "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;