Блог

Я следил за одним из руководств по React js, когда появился этот вопрос. Я использую Cloudinary React SDK (реагирует на загрузку изображений и видео). Я использую их виджет загрузки. Но когда я нажимаю кнопку, чтобы открыть виджет, он выдает мне эту ошибку — 'TypeError: Cannot read property 'createUploadWidget' of undefined'
Вот сценарий src — <script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript" ></script>

Вот код App.js

 import React, { useState } from "react";
import "./App.css";

export default function App() {
  const [imageUrl, setimageUrl] = useState(null);
  const [imageAlt, setimageAlt] = useState(null);

  const handleImageUpload = () => {
    const { files } = document.querySelector('input[type="file"]');

    const imageFile = document.querySelector('input[type="file"]');
    // destructure the files array from the resulting object
    const filesa = imageFile.files;
    // log the result to the console
    console.log("Image file", filesa[0]);

    const formData = new FormData();
    formData.append("file", files[0]);
    // replace this with your upload preset name
    formData.append("upload_preset", "xxxxxxx");
    const options = {
      method: "POST",
      body: formData,
    };

    // replace cloudname with your Cloudinary cloud_name
    return fetch(
      "https://api.Cloudinary.com/v1_1/xxxxxx/image/upload",
      options
    )
      .then((res) => res.json())
      .then((res) => {
        setimageUrl(res.secure_url);
        setimageAlt(`An image of ${res.original_filename}`);
      })
      .catch((err) => console.log(err));
  };

  const openWidget = () => {
    // create the widget
    const widget = window.Cloudinary.createUploadWidget(
      {
        cloudName: "xxxxxx",
        uploadPreset: "xxxxx",
      },
      (error, result) => {
        if (result.event === "success") {
          setimageUrl(result.info.secure_url);
          setimageAlt(`An image of ${result.info.original_filename}`);
        }
      }
    );
    widget.open(); // open up the widget after creation
  };

  return (
    <div className="app">
      <section className="left-side">
        <form>
          <div className="form-group">
            <input type="file" />
          </div>

          <button type="button" className="btn" onClick={handleImageUpload}>
            Submit
          </button>
          <button type="button" className="btn widget-btn" onClick={openWidget}>
            Upload Via Widget
          </button>
        </form>
      </section>
      <section className="right-side">
        <p>The resulting image will be displayed here</p>
        {imageUrl amp;amp; (
          <img src={imageUrl} alt={imageAlt} className="displayed-image" />
        )}
      </section>
    </div>
  );
}
 

Любая помощь приветствуется!

Ссылка на Cloudinary должна быть в нижнем регистре —

 ...
const widget = window.cloudinary.createUploadWidget(
...