diff --git a/webapp/src/components/content/contentRegistry.tsx b/webapp/src/components/content/contentRegistry.tsx
index 872462a24..966f9e99e 100644
--- a/webapp/src/components/content/contentRegistry.tsx
+++ b/webapp/src/components/content/contentRegistry.tsx
@@ -11,7 +11,7 @@ type ContentHandler = {
     type: BlockTypes,
     getDisplayText: (intl: IntlShape) => string,
     getIcon: () => JSX.Element,
-    createBlock: () => MutableContentBlock,
+    createBlock: () => Promise<MutableContentBlock>,
     addBlock(card: Card, contents: readonly IContentBlock[], index: number, intl: IntlShape): void,
     createComponent: (block: IContentBlock, intl: IntlShape, readonly: boolean) => JSX.Element,
 }
diff --git a/webapp/src/components/content/dividerElement.tsx b/webapp/src/components/content/dividerElement.tsx
index aad167019..39f1d3d91 100644
--- a/webapp/src/components/content/dividerElement.tsx
+++ b/webapp/src/components/content/dividerElement.tsx
@@ -19,7 +19,7 @@ contentRegistry.registerContentType({
     type: 'divider',
     getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.divider', defaultMessage: 'divider'}),
     getIcon: () => <DividerIcon/>,
-    createBlock: () => {
+    createBlock: async () => {
         return new MutableDividerBlock()
     },
     addBlock: (card, contents, index, intl) => {
diff --git a/webapp/src/components/content/imageElement.tsx b/webapp/src/components/content/imageElement.tsx
index 2bd98e0ef..aad032b3b 100644
--- a/webapp/src/components/content/imageElement.tsx
+++ b/webapp/src/components/content/imageElement.tsx
@@ -56,8 +56,21 @@ contentRegistry.registerContentType({
     type: 'image',
     getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.image', defaultMessage: 'image'}),
     getIcon: () => <ImageIcon/>,
-    createBlock: () => {
-        return new MutableImageBlock()
+    createBlock: async () => {
+        return new Promise<MutableImageBlock>(
+            (resolve) => {
+                Utils.selectLocalFile(async (file) => {
+                    const fileId = await octoClient.uploadFile(file)
+
+                    const block = new MutableImageBlock()
+                    block.fileId = fileId || ''
+                    resolve(block)
+                },
+                '.jpg,.jpeg,.png')
+            },
+        )
+
+        // return new MutableImageBlock()
     },
     addBlock: (card, contents, index, intl) => {
         Utils.selectLocalFile((file) => {
diff --git a/webapp/src/components/content/textElement.tsx b/webapp/src/components/content/textElement.tsx
index ce6261095..ace1ce314 100644
--- a/webapp/src/components/content/textElement.tsx
+++ b/webapp/src/components/content/textElement.tsx
@@ -52,7 +52,7 @@ contentRegistry.registerContentType({
     type: 'text',
     getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.text', defaultMessage: 'text'}),
     getIcon: () => <TextIcon/>,
-    createBlock: () => {
+    createBlock: async () => {
         return new MutableTextBlock()
     },
     addBlock: (card, contents, index, intl) => {
diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx
index fb2046747..d40154667 100644
--- a/webapp/src/components/contentBlock.tsx
+++ b/webapp/src/components/contentBlock.tsx
@@ -112,8 +112,19 @@ class ContentBlock extends React.PureComponent<Props> {
                 id={type}
                 name={handler.getDisplayText(intl)}
                 icon={handler.getIcon()}
-                onClick={() => {
-                    handler.addBlock(card, contents, index, intl)
+                onClick={async () => {
+                    const newBlock = await handler.createBlock()
+                    newBlock.parentId = card.id
+                    newBlock.rootId = card.rootId
+
+                    const contentOrder = contents.map((o) => o.id)
+                    contentOrder.splice(index, 0, newBlock.id)
+                    const typeName = handler.getDisplayText(intl)
+                    const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: typeName})
+                    mutator.performAsUndoGroup(async () => {
+                        await mutator.insertBlock(newBlock, description)
+                        await mutator.changeCardContentOrder(card, contentOrder, description)
+                    })
                 }}
             />
         )