You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hello everyone I am a beginner to React. I am trying to modifiy the add image command. I want a Modal to appear on screen when I click the command, so that I can use the modal to upload the image to a server, then insert the url to the editor, as is shown below:
But I don't know what's the proper way to achieve this goal. Currently I use a parent component to manage an Editor and a Modal:
import*asReactfrom"react";importUploadfrom"rc-upload";import{Button,Image,Modal,ProgressBar}from"react-bootstrap";exportdefaultfunctionUploadModal(props){const[showUploader,setShowUploader]=React.useState(true);const[showImage,setShowImage]=React.useState(false);const[showProcess,setShowProcess]=React.useState(false);const[process,setProcess]=React.useState(0);const[url,setUrl]=React.useState(null);consthandleClose=()=>{setShowUploader(true);setShowImage(false);setUrl(null);setProcess(0);setShowProcess(false);props.onExit();};consthandleSubmit=()=>{handleClose();props.onSubmit(url);};constuploaderProps={action: "/upload",multiple: true,beforeUpload(file){},onStart: (file)=>{setShowProcess(true);},onSuccess(result){setUrl(result.url);setShowImage(true);setShowUploader(false);setShowProcess(false);},onProgress(step){setProcess(step.percent);},onError(err){console.log("onError",err);},};return(<Modalshow={true}onHide={handleClose}><Modal.HeadercloseButton><Modal.Title>Upload Image</Modal.Title></Modal.Header><Modal.BodyclassName="d-flex justify-content-center">{showUploader ? (<Upload{...uploaderProps}className={"w-100 border border-3 border-secondary rounded bg-light"}component={"div"}><br/><br/><pclassName="text-secondary text-center">
Click or drag the image here to upload.
</p><br/><br/></Upload>) : null}{showImage ? (<Imagesrc={url}thumbnail="true"className="w-50"/>) : null}{showProcess ? <ProgressBarnow={process}/> : null}</Modal.Body><Modal.Footer><Buttonvariant="secondary"onClick={handleClose}>
Close
</Button><Buttonvariant="primary"onClick={handleSubmit}>
OK
</Button></Modal.Footer></Modal>);}
These code can achieve exactly what I want. But I think they are very bad. It seems that the parent component needs to get the api of the editor, and I don't know how to do it.
Does anyone know how to do it properly?
The text was updated successfully, but these errors were encountered:
Hello everyone I am a beginner to React. I am trying to modifiy the
add image
command. I want aModal
to appear on screen when I click the command, so that I can use the modal to upload the image to a server, then insert the url to the editor, as is shown below:But I don't know what's the proper way to achieve this goal. Currently I use a parent component to manage an
Editor
and aModal
:Here is the modal component:
These code can achieve exactly what I want. But I think they are very bad. It seems that the parent component needs to get the
api
of the editor, and I don't know how to do it.Does anyone know how to do it properly?
The text was updated successfully, but these errors were encountered: