Option to add more options for image upload

[HamzaHaseeb01]

Is there a way to stop default upload window popup and add one more button with select an image one to add more functionality similar to choose from existing images.

image: { // @ts-ignore class: MyImageTool, config: { uploader: { uploadByFile(uploadedFile: File) { return handleAttachUpload(uploadedFile); }, }, }, },

        class MyImageTool extends ImageTool {
        save() {
            const { caption } = this.ui.nodes;

            this._data.caption = caption.innerHTML;

            return Object.assign(this.data);
        }

        handleAlign(aligning: string) {
            this.data.file.align = aligning;
            const currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
            const currentBlockId = this.api.blocks.getBlockByIndex(currentBlockIndex).id;
            const blockTag = document.querySelector(`[data-id="${currentBlockId}"]`);

            const myElement = blockTag?.getElementsByTagName("img")[0];
            const container = myElement?.closest(".ce-block__content");
            if (myElement) {
                // @ts-ignore
                container.style.display = "flex";
                // @ts-ignore
                container.style.justifyContent = aligning;
            }
        }

        handleResize(size: number) {
            this.data.file.size = size;

            const currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
            const currentBlockId = this.api.blocks.getBlockByIndex(currentBlockIndex).id;
            const blockTag = document.querySelector(`[data-id="${currentBlockId}"]`);

            const myElement = blockTag?.getElementsByTagName("img")[0];
            // @ts-ignore
            const width = this.data.file.width * this.data.file.size;
            // @ts-ignore
            myElement.style.width = `${width}px`;
        }

        renderSettings() {
            return [
                {
                    icon: renderToString(<MdOutlineFormatAlignLeft size={16} />),
                    label: "Left",
                    toggle: "aligning",
                    isActive: this.data.file.align === "left",
                    onActivate: () => {
                        this.handleAlign("left");
                    },
                },
                {
                    icon: renderToString(<MdFormatAlignCenter size={16} />),
                    label: "Center",
                    toggle: "aligning",
                    isActive: this.data.file.align === "center",
                    onActivate: () => {
                        this.handleAlign("center");
                    },
                },
                {
                    icon: renderToString(<MdFormatAlignRight size={16} />),
                    label: "Right",
                    toggle: "aligning",
                    isActive: this.data.file.align === "right",
                    onActivate: () => {
                        this.handleAlign("right");
                    },
                },
                {
                    icon: renderToString(<MdPhotoSizeSelectSmall size={16} />),
                    label: "Small",
                    toggle: "size",
                    isActive: this.data.file.size === 0.3,
                    onActivate: () => {
                        this.handleResize(0.3);
                    },
                },
                {
                    icon: renderToString(<MdOutlinePhotoSizeSelectLarge size={16} />),
                    label: "Medium",
                    toggle: "size",
                    isActive: this.data.file.size === 0.6,
                    onActivate: () => {
                        this.handleResize(0.6);
                    },
                },
                {
                    icon: renderToString(<MdPhotoSizeSelectActual size={16} />),
                    label: "Large",
                    toggle: "size",
                    isActive: this.data.file.size === 0.1,
                    onActivate: () => {
                        this.handleResize(1);
                    },
                },
            ];
        }

        render() {
            if (data) {
                const myElement = this.ui.render(this.data).querySelector(`[src="${this._data.file.url}"]`);
                if (myElement) {
                    const width = this.data.file.width * this.data.file.size;
                    myElement.style.width = `${width}px`;
                }
                const wrapper = document.createElement("div");
                wrapper.append(this.ui.render(this.data));

                wrapper.style.display = "flex";
                wrapper.style.justifyContent = this.data.file.align;

                return wrapper;
            }
            return this.ui.render(this.data);
        }

        removed() {
            const dataImage = this._data.file;
            if (media.length > 0) {
                const newMedia = media.filter((file) => file !== dataImage.id);
                setMedia(newMedia);
            }
        }
    }