Breaking News: Grepper is joining You.com. Read the official announcement!

cloudinary upload widget react component next.js

irasanchez answered on August 29, 2022 Popularity 3/10 Helpfulness 7/10

answer cloudinary upload widget react component next.js

cloudinary upload widget react component next.js

Comment

// irasanchez.com
import React from "react";
import { useRef } from "react";
import Script from "next/script";

export default function ComponentName() {
  // OPTIONAL: you need this is you want to use the images' data after uploading
  const [images, setImages] = useState([]);
  const imagesRef = useRef([]);

  useEffect(() => {
    imagesRef.current = images;
  }, [images]);

  // REQUIRED: this function runs every time an image is added to the widget
  const cloudinaryCallback = (v) => {
    console.log(v);
    setImages([...imagesRef.current, v.url]);
  };

  // this is styled with Tailwind CSS, but that's not required. 
  // do make note of the absolute positioning on the button
  return (
    <div className="m-8">
      <h1 className="text-4xl">Add the illustrations</h1>
      <CloudinaryUploadWidget callback={(e) => cloudinaryCallback(e)}>
        {({ open }) => (
          <button
            onClick={open}
            className="absolute w-full h-full rounded-md bg-gray-200 z-10 flex flex-col justify-center items-center opacity-0 hover:opacity-100 transition-all ease-linear duration-200"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="100"
              height="100"
              viewBox="0 0 24 24"
            >
              <path d="M16 16h-3v5h-2v-5h-3l4-4 4 4zm3.479-5.908c-.212-3.951-3.473-7.092-7.479-7.092s-7.267 3.141-7.479 7.092c-2.57.463-4.521 2.706-4.521 5.408 0 3.037 2.463 5.5 5.5 5.5h3.5v-2h-3.5c-1.93 0-3.5-1.57-3.5-3.5 0-2.797 2.479-3.833 4.433-3.72-.167-4.218 2.208-6.78 5.567-6.78 3.453 0 5.891 2.797 5.567 6.78 1.745-.046 4.433.751 4.433 3.72 0 1.93-1.57 3.5-3.5 3.5h-3.5v2h3.5c3.037 0 5.5-2.463 5.5-5.5 0-2.702-1.951-4.945-4.521-5.408z" />
            </svg>
            <p>Upload another image</p>
          </button>
        )}
      </CloudinaryUploadWidget>
    </div>
  );
}

const CloudinaryUploadWidget = ({ callback, children }) => {
  const cloudinary = useRef();

  function showWidget() {
    const widget = cloudinary.current?.createUploadWidget(
      {
        cloudName: "ADD NAME HERE",
        uploadPreset: "ADD UPLOAD PRESET HERE",
        // more parametes can be found here: 
        // https://cloudinary.com/documentation/upload_widget_reference#parameters
      },
      (error, result) => {
        if (!error && result && result.event === "success") {
          callback(result.info);
        }
      }
    );

    widget && widget.open();
  }

  function open(e) {
    e.preventDefault();
    showWidget();
  }

  function handleOnLoad() {
    cloudinary.current = window.cloudinary;
    // this/the useEffect may require some fiddling 
    // if it's not popping up as expected
  }

  return (
    <>
      {children({ open })}
      <Script
        id="cloudinary"
        src="https://widget.cloudinary.com/v2.0/global/all.js"
        onLoad={handleOnLoad}
      />
    </>
  );
};

Popularity 3/10 Helpfulness 7/10 Language javascript

Source: github.com

Tags: cloudinary javascript next.js react-component upload widget

Link to this answer
Share Copy Link

Contributed on Aug 29 2022

irasanchez

0 Answers Avg Quality 2/10

cloudinary upload widget react component next.js

Contents

More Related Answers

cloudinary upload widget react component next.js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.