WANT TO UPLOAD IMAGE ON FIREBASE FROM RICHTEXTEDITOR

[Farrukh Ehsan]

HI I am trying to upload image on firebase from richtext editor and have no success till now can u help with this I want to upload image on firebase and use its url in src of img tag . Hope you understood my issue

[Vinitha Jeyakumar]

Hi Farrukh,

By using the insertImageSettings property, you can specify the server handler to upload the selected image. Then you can bind the imageUploadSuccess event, to receive the modified file name from the server and update it in the Rich Text Editor’s insert image dialog.

Documentation: https://ej2.syncfusion.com/react/documentation/rich-text-editor/how-to/rename-images-in-server/

Please find the below general blogs to upload images to the Firebase for your reference.

https://dev.to/itnext/how-to-do-image-upload-with-firebase-in-react-cpj

https://firebase.google.com/docs/storage/web/upload-files

https://www.geeksforgeeks.org/how-to-upload-files-in-firebase-storage-using-reactjs/

Regards,
Vinitha

[Farrukh Ehsan]

Hi How can I upload files using my own function which is below. and use return url inside rich text editor Hope you got me Thanks 

const handleUpload = async (e) => {

    try {

     // console.log("start of upload 2", e)

      // async magic goes here...

      //let promise = $.Deferred();

      showLoader(true)

      const uploadTask = dynamicstorage('link').ref(`/images/${e.name}`).put(e)

      // const urlLink = (await uploadTask).ref.getDownloadURL();

      //hideLoader();

      uploadTask.on(

        "state_changed",

        (snapshot) => {

          //takes a snap shot of the process as it is happening

          const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100)

          //setProgress(progress)

        },

        (err) => {

          //catches the errors

          console.log("Hi=", err)

        },

        () => {

          // gets the functions from storage refences the image storage in firebase by the children

          // gets the download url then sets the image from firebase as the value for the imgUrl key:

          dynamicstorage('link')

            .ref("images")

            .child(e.name)

            .getDownloadURL()

            .then((fireBaseUrl) => {

              //handleUpdateCompanyInfo(fireBaseUrl,key);

              // console.log(fireBaseUrl)

              //setCImage(fireBaseUrl)

              setPath(()=>fireBaseUrl)

              hideLoader()

            })

        }

      )

    } catch (error) {

      console.log("Hi==", error)

    }

  }

[Vinitha Jeyakumar]

Hi Farrukh,

You can use the executeCommand method the Rich Text Editor to insert the image URL into the Rich Text Editor dynamically

Code snippet:

rteObj.executeCommand('insertImage', { url:'https://ej2.syncfusion.com/javascript/demos/src/rich-text-editor/images/RTEImage-Feather.png', cssClass: 'rte-img'});

Documentation: https://ej2.syncfusion.com/react/documentation/rich-text-editor/exec-command/

Regards,

Vinitha