Query on implementing Image upload Widget & Media Editor Widget in React
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>
)
}
Answers
-
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
0
