Option to add more options for image upload

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(),
label: "Left",
toggle: "aligning",
isActive: this.data.file.align === "left",
onActivate: () => {
this.handleAlign("left");
},
},
{
icon: renderToString(),
label: "Center",
toggle: "aligning",
isActive: this.data.file.align === "center",
onActivate: () => {
this.handleAlign("center");
},
},
{
icon: renderToString(),
label: "Right",
toggle: "aligning",
isActive: this.data.file.align === "right",
onActivate: () => {
this.handleAlign("right");
},
},
{
icon: renderToString(),
label: "Small",
toggle: "size",
isActive: this.data.file.size === 0.3,
onActivate: () => {
this.handleResize(0.3);
},
},
{
icon: renderToString(),
label: "Medium",
toggle: "size",
isActive: this.data.file.size === 0.6,
onActivate: () => {
this.handleResize(0.6);
},
},
{
icon: renderToString(),
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);
}
}
}