Question about using the React media editor and image upload widget
hi
I'm trying to create React so that my Media Editor opens right away to let the user edit the picture that was just uploaded using the Upload widget.
I try to run mediaEditorWidgetRef.getConfig(), but it always returns undefined, and when I try to run mediaEditorWidgetRef.show(), it always gives the error "Cannot read properties of undefined (reading 'id')". Anybody know the answer?
here is my code:
//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>
)
}
Comments
-
thank you so much its work fine thanks
0
