CODEWITHSUNDEEP
reactjsfirebaseckeditorfirebase-storageckeditor4.x
Munkhsukh Jigjid
Munkhsukh Jigjid

Reputation: 83

Upload image with Reactjs, Ckeditor4, Firebase?

I'm a beginner in front-end /no idea for back-end/. I just want to create blogs for fun. Reactjs, Ckeditor4, and Firebase are working fine but only problem is that I can't upload image to my ckeditor4-react. And no idea what problem will be next. Ckeditor4-react is working fine except image upload. Please help me.

import Ckeditor4React from "ckeditor4-react";

const Ckeditor = (props) => {
  return (
    <div className="container">
      <Ckeditor4React
        data="<p>It is CKEditor</p>"
        config={{
          uiColor: "#AADC6E",
          extraPlugins: "uploadimage",
          uploadUrl: "/uploader/upload",
          filebrowserUploadMethod: "form",
          filebrowserBrowseUrl: "1",
          filebrowserUploadUrl: "2",
          filebrowserImageBrowseUrl: "3",
        }}
      />
      <button className="btn btn-primary">Submit</button>
    </div>
  );
};

My App.js

function App() {
  return (
    <BrowserRouter>
      <Router history={history}>
        <div className="App">
          <Switch>
            <Route path="/" exact component={HomePage} />
            <Route path="/ckeditor" exact component={Ckeditor} />
            <Route path="/uploader/upload" exact component={CkeDragdrop} />
          </Switch>
        </div>
      </Router>
    </BrowserRouter>
  );
}

upload.js

import React, { useEffect } from "react";
import axios from "axios";

const CkeDragdrop = () => {
  useEffect(() => {
    console.log("testing1");

    axios
      .post("https://reqres.in/api/register", {
        email: "[email protected]",
        password: "pistol",
      })
      .then((response) => {
        console.log("testing2");
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return <div>testing3</div>;
};

export default CkeDragdrop;

Upvotes: 0

Views: 1319

Answers (1)

Muhammad Bilal
Muhammad Bilal

Reputation: 25

<CKEditor
    data="<p>Hello from CKEditor 4!</p>"
    config={{   
        filebrowserUploadMethod  : "form",
        uiColor: "#AADC6E",
        extraPlugins: "uploadimage",
        filebrowserUploadMethod: "form",
        filebrowserUploadUrl :("/uploader/upload"),      
    }}
/>

Upvotes: 1

Related Questions