Automattic / Automattic/isolated-block-editor

How to Enable Image upload option from our local gallery

Open
#243 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
CSS
Stars
409
Forks
66
PR merge metrics
No merged PRs in 30d

Description

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 (


Editor!


{
console.log("parser: ", parser);
console.log("rawHandler: ", rawHandler);
}}
onSaveContent={(content) => {
console.log("onContentSave", content);
}}
onError={() => {
console.log("error");
}}
>
console.log(container)} />


);
};

export default CustomEditor;

![image](https://github.com/Automattic/isolated-block-editor/assets/148082392/87309207-eae0-4243-8725-59c17257b91f)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the CustomEditor entry point in the issue and inspect how settings.editor.mediaUpload, MediaUpload, and the editor.MediaUpload filter are connected. The issue does not name a repository file or test; done would mean documenting or implementing a working local-gallery upload path for this editor.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, wordpress
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.