Query on implementing Image upload Widget & Media Editor Widget in React

Options
ShindoSensei
ShindoSensei Member Posts: 1
edited January 2023 in Developer APIs

hey folks.. I'm looking to achieve a React implementation where my Media Editor opens straight to allow the user to edit the pic that's just uploaded via Upload widget (i.e. following the e.g. in https://codesandbox.io/s/uw-mew-forked-dudee6?file=/src/index.js)

. When I try running mediaEditorWidgetRef.getConfig() it returns undefined and if I try running mediaEditorWidgetRef.show() it returns error "Cannot read properties of undefined (reading 'id')" . Anyone has any idea?


My code is as per below,

//Context

import { AuthContext } from "../../context/AuthContext"

import { useContext } from "react"


import Button from 'react-bootstrap/Button';

import { useEffect, useRef } from 'react'


export default function PhotoUpload() {

const { user, firestoreUser } = useContext(AuthContext)

const cloudinaryRef = useRef()

const uploadImageWidgetRef = useRef()

const mediaEditorWidgetRef = useRef()


const upload = () => {

console.log("Opening image uploader!")

uploadImageWidgetRef.current.open()

}

useEffect(() => {

//Setup the createUploadWidget

cloudinaryRef.current = window.cloudinary

const cloudName = process.env.REACT_APP_CLOUDINARY_CLOUD_NAME

const uploadPreset = process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET

mediaEditorWidgetRef.current = cloudinaryRef.current.mediaEditor()

uploadImageWidgetRef.current = cloudinaryRef.current.createUploadWidget({

cloudName,

uploadPreset,

sources: ['local'],

multiple: false,

folder: `${user.uid}/public_photo`,

tags: ['private_photo'],

maxImageFileSize: 5000000, //5mb

croppingAspectRatio: 1, //square

croppingDefaultSelectionRatio: 0.5,

resourceType: 'image',

cropping: true,

}, (error, result) => {

//This callback is entered upon clicking Crop or Skip on the image uploader

if(!error && result && result.event === "success"){

console.log("Initial image upload to Cloudinary successful!")

console.log(result.info.public_id)

console.log("Cloudname is: ", cloudName)

console.log("mediaEditorWidgetRef is:")

console.log(mediaEditorWidgetRef.current)

mediaEditorWidgetRef.current.update({

publicIds: [result.info.public_id],

cloudName: cloudName,

image:{

steps: ["imageOverlay"]

}

})


console.log(mediaEditorWidgetRef.current.getVersion())

uploadImageWidgetRef.current.close(true)

mediaEditorWidgetRef.current.show()

}

if(error){

console.log("error in creating image upload widget with error:")

console.log(error)

}

})

console.log("Assigning media Editor")

}, [])

return (

<div>

<div>This is PhotoUpload page</div>

<Button className="ms-2" variant="danger " size="sm" onClick={upload}>Upload</Button>

</div>

)

}

Tagged:

Answers

  • SreeCloudinary
    SreeCloudinary Member, Cloudinary Staff Posts: 29
    edited January 2023
    Options

    Hi @ShindoSensei ,

    Thanks for your post.

    Can you please send us the codesandbox of your code?

    Also,

    Meanwhile, Can you please what is this line returning?

    mediaEditorWidgetRef.current = cloudinaryRef.current.mediaEditor()

    Based on the error, it looks like the response is empty and you are trying to access something which doesn't exists.

    Best Regards,

    Sree