hey Can anybody help me how should i upload image from my local machine gallery right now i can upload via Image URL but i want to upload the image from gallery please help me to figure it out and if possible share me the code

here is my code :

import React from "react";
import IsolatedBlockEditor, { EditorLoaded } from "@automattic/isolated-block-editor";
import reducer from "@wordpress/preferences/build-module/store/reducer";
import * as selectors from "@wordpress/preferences/build-module/store/selectors";
import * as actions from "@wordpress/preferences/build-module/store/actions";
import "./custom.css";
import "@automattic/isolated-block-editor/build-browser/core.css";
import { addFilter } from "@wordpress/hooks";
import { MediaUpload } from "@wordpress/media-utils";
import { mediaUpload } from "@wordpress/editor";

const CustomEditor = () => {
  const settings = {
    iso: {
      moreMenu: false,
      customStores: [
        {
          name: "core/preferences",
          config: {
            reducer: reducer,
            selectors: selectors,
            actions: actions,
          },
        },
      ],
    },
  };

  settings.editor.mediaUpload = mediaUpload;

  if (settings?.editor?.hasUploadPermissions) {
    // Connect the media uploader if it's enabled
    settings.editor.mediaUpload = mediaUpload;
    addFilter(
      "editor.MediaUpload",
      "blocks-everywhere/media-upload",
      () => MediaUpload
    );
  } else {
    settings.editor.mediaUpload = null;
  }

  return (
    <div>
      <h1>Editor!</h1>
      <IsolatedBlockEditor
        style={{ height: "100%" }}
        settings={settings}
        onLoad={(parser, rawHandler) => {
          console.log("parser: ", parser);
          console.log("rawHandler: ", rawHandler);
        }}
        onSaveContent={(content) => {
          console.log("onContentSave", content);
        }}
        onError={() => {
          console.log("error");
        }}
      >
        <EditorLoaded onLoaded={(container) => console.log(container)} />
      </IsolatedBlockEditor>
    </div>
  );
};

export default CustomEditor;

enter image description here

I try this blocks-everywhere editor also, but i cant figure it out how can i do so please help me to figure it out and if someone provide me example code so it would be grete for me...

0

There are 0 best solutions below