diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index e558478cb0..d141d98945 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -78,6 +78,7 @@
                       v-model="answer.answer"
                       class="editor"
                       :mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
+                      :imageProcessor="EditorImageProcessor"
                       @update="updateAnswerText($event, answerIdx)"
                       @minimize="emitClose"
                       @open-editor="emitOpen(answerIdx)"
@@ -127,6 +128,7 @@
   import { AssessmentItemTypes } from 'shared/constants';
   import { swapElements } from 'shared/utils/helpers';
   import Checkbox from 'shared/views/form/Checkbox';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
@@ -169,6 +171,7 @@
     },
     data() {
       return {
+        EditorImageProcessor, // Make it available in the template
         correctAnswersIndices: getCorrectAnswersIndices(this.questionKind, this.answers),
         numericRule: val => floatOrIntRegex.test(val) || this.$tr('numberFieldErrorLabel'),
       };
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index bfb2c9ed19..7f978c4d67 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -1,124 +1,119 @@
 <template>
 
-  <Uploader
-    ref="uploader"
-    :presetID="imagePreset"
-  >
-    <template #default="{ handleFiles }">
-      <VLayout>
-        <DropdownWrapper
-          component="VFlex"
-          xs7
-          lg5
-        >
-          <template #default="{ attach, menuProps }">
-            <VSelect
-              :key="kindSelectKey"
-              :items="kindSelectItems"
-              :value="kind"
-              :label="$tr('questionTypeLabel')"
-              data-test="kindSelect"
-              :menu-props="menuProps"
-              :attach="attach"
-              box
-              @input="onKindUpdate"
-            />
-          </template>
-        </DropdownWrapper>
-      </VLayout>
-
-      <VLayout>
-        <VFlex>
-          <ErrorList
-            :errors="questionErrorMessages"
-            data-test="questionErrors"
+  <div>
+    <VLayout>
+      <DropdownWrapper
+        component="VFlex"
+        xs7
+        lg5
+      >
+        <template #default="{ attach, menuProps }">
+          <VSelect
+            :key="kindSelectKey"
+            :items="kindSelectItems"
+            :value="kind"
+            :label="$tr('questionTypeLabel')"
+            data-test="kindSelect"
+            :menu-props="menuProps"
+            :attach="attach"
+            box
+            @input="onKindUpdate"
           />
+        </template>
+      </DropdownWrapper>
+    </VLayout>
+
+    <VLayout>
+      <VFlex>
+        <ErrorList
+          :errors="questionErrorMessages"
+          data-test="questionErrors"
+        />
+
+        <div class="grey--text mb-1 text--darken-2">
+          {{ $tr('questionLabel') }}
+        </div>
+
+        <transition name="fade">
+          <keep-alive include="TipTapEditor">
+            <!--analyticsLabel="Question"-->
+            <TipTapEditor
+              v-if="isQuestionOpen"
+              v-model="question"
+              mode="edit"
+              :imageProcessor="EditorImageProcessor"
+              @update="onQuestionUpdate"
+              @minimize="closeQuestion"
+            />
 
-          <div class="grey--text mb-1 text--darken-2">
-            {{ $tr('questionLabel') }}
-          </div>
-
-          <transition name="fade">
-            <keep-alive include="TipTapEditor">
-              <!--analyticsLabel="Question"-->
-              <TipTapEditor
-                v-if="isQuestionOpen"
-                v-model="question"
-                mode="edit"
-                @update="onQuestionUpdate"
-                @minimize="closeQuestion"
-              />
-
-              <div
-                v-else
-                class="pb-3 pl-2 pr-2 pt-3 question-text"
-                data-test="questionText"
-                @click="openQuestion"
+            <div
+              v-else
+              class="pb-3 pl-2 pr-2 pt-3 question-text"
+              data-test="questionText"
+              @click="openQuestion"
+            >
+              <VLayout
+                align-start
+                justify-space-between
               >
-                <VLayout
-                  align-start
-                  justify-space-between
-                >
-                  <VFlex grow>
-                    <TipTapEditor
-                      v-model="question"
-                      mode="view"
-                      tabindex="-1"
+                <VFlex grow>
+                  <TipTapEditor
+                    v-model="question"
+                    mode="view"
+                    tabindex="-1"
+                  />
+                </VFlex>
+
+                <VFlex shrink>
+                  <button
+                    class="v-btn v-btn--flat v-btn--icon v-size--default"
+                    data-test="editQuestionButton"
+                    @click.stop="openQuestion"
+                  >
+                    <Icon
+                      :color="$themePalette.grey.v_800"
+                      icon="edit"
+                      class="mr-2"
                     />
-                  </VFlex>
-
-                  <VFlex shrink>
-                    <button
-                      class="v-btn v-btn--flat v-btn--icon v-size--default"
-                      data-test="editQuestionButton"
-                      @click.stop="openQuestion"
-                    >
-                      <Icon
-                        :color="$themePalette.grey.v_800"
-                        icon="edit"
-                        class="mr-2"
-                      />
-                    </button>
-                  </VFlex>
-                </VLayout>
-              </div>
-            </keep-alive>
-          </transition>
-        </VFlex>
-      </VLayout>
-
-      <VLayout
-        v-if="kind !== AssessmentItemTypes.FREE_RESPONSE"
-        mt-4
-      >
-        <VFlex>
-          <ErrorList
-            :errors="answersErrorMessages"
-            data-test="answersErrors"
-          />
-
-          <AnswersEditor
-            :questionKind="kind"
-            :answers="answers"
-            :openAnswerIdx="openAnswerIdx"
-            @update="onAnswersUpdate"
-            @open="openAnswer"
-            @close="closeAnswer"
-          />
-
-          <HintsEditor
-            class="mt-4"
-            :hints="hints"
-            :openHintIdx="openHintIdx"
-            :handleFileUpload="handleFiles"
-            @update="onHintsUpdate"
-            @open="openHint"
-            @close="closeHint"
-          />
-        </VFlex>
-      </VLayout>
-    </template>
-  </Uploader>
+                  </button>
+                </VFlex>
+              </VLayout>
+            </div>
+          </keep-alive>
+        </transition>
+      </VFlex>
+    </VLayout>
+
+    <VLayout
+      v-if="kind !== AssessmentItemTypes.FREE_RESPONSE"
+      mt-4
+    >
+      <VFlex>
+        <ErrorList
+          :errors="answersErrorMessages"
+          data-test="answersErrors"
+        />
+
+        <AnswersEditor
+          :questionKind="kind"
+          :answers="answers"
+          :openAnswerIdx="openAnswerIdx"
+          @update="onAnswersUpdate"
+          @open="openAnswer"
+          @close="closeAnswer"
+        />
+
+        <HintsEditor
+          class="mt-4"
+          :hints="hints"
+          :openHintIdx="openHintIdx"
+          @update="onHintsUpdate"
+          @open="openHint"
+          @close="closeHint"
+        />
+      </VFlex>
+    </VLayout>
+  </div>
 
 </template>
 
@@ -139,10 +134,9 @@
     FeatureFlagKeys,
   } from 'shared/constants';
   import ErrorList from 'shared/views/ErrorList/ErrorList';
-  import Uploader from 'shared/views/files/Uploader';
-  import { FormatPresetsNames } from 'shared/leUtils/FormatPresets';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
   export default {
     name: 'AssessmentItemEditor',
@@ -151,7 +145,6 @@
       ErrorList,
       AnswersEditor,
       HintsEditor,
-      Uploader,
       TipTapEditor,
     },
     model: {
@@ -212,6 +205,7 @@
         openAnswerIdx: null,
         kindSelectKey: 0,
         AssessmentItemTypes,
+        EditorImageProcessor,
       };
     },
     computed: {
@@ -224,9 +218,6 @@
 
         return this.item.question;
       },
-      imagePreset() {
-        return FormatPresetsNames.EXERCISE_IMAGE;
-      },
       modality() {
         return this.getContentNode(this.nodeId)?.extra_fields?.options?.modality;
       },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
index 523451a055..6be4253ed5 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
@@ -38,6 +38,7 @@
                     <TipTapEditor
                       v-model="hint.hint"
                       :mode="isHintOpen(hintIdx) ? 'edit' : 'view'"
+                      :image-processor="EditorImageProcessor"
                       @update="updateHintText($event, hintIdx)"
                       @minimize="emitClose"
                       @open-editor="emitOpen(answerIdx)"
@@ -82,6 +83,7 @@
   import AssessmentItemToolbar from '../AssessmentItemToolbar';
   import { AssessmentItemToolbarActions } from '../../constants';
   import { swapElements } from 'shared/utils/helpers';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
@@ -121,6 +123,7 @@
           AssessmentItemToolbarActions.MOVE_ITEM_DOWN,
           AssessmentItemToolbarActions.DELETE_ITEM,
         ],
+        EditorImageProcessor,
       };
     },
     methods: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index 3eea4abe24..b01194cdb9 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -157,6 +157,7 @@
       const { isMobile } = useBreakpoint();
 
       const imageHandler = useImageHandling(editor);
+      provide('imageProcessor', props.imageProcessor);
 
       const sharedEventHandlers = computed(() => ({
         'insert-image': target => imageHandler.openCreateModal({ targetElement: target }),
@@ -294,6 +295,10 @@
         type: [String, Number],
         default: 0,
       },
+      imageProcessor: {
+        type: Object,
+        default: () => ({}),
+      },
     },
     emits: ['update', 'minimize', 'open-editor'],
   });
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
index 99a57f1e52..641d769714 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
@@ -301,6 +301,10 @@ const MESSAGES = {
   },
 
   // Error Messages
+  errorUploadingImage: {
+    message: 'Error uploading image',
+    context: 'Title for the error modal when an image upload fails.',
+  },
   noFileProvided: {
     message: 'No file provided.',
     context: 'Error message when no file is provided for upload',
@@ -321,6 +325,10 @@ const MESSAGES = {
     message: 'Failed to process the image file.',
     context: 'Error message when image processing fails',
   },
+  noEnoughStorageSpace: {
+    message: 'Not enough storage space available. File size exceeds remaining storage.',
+    context: 'Error message when there is insufficient storage space for the file',
+  },
 
   // for MobileFormattingBar
   collapseFormattingBar: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
index 41afb25fe3..ffe1ab452f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
@@ -122,10 +122,19 @@
         if (imageRef.value && imageRef.value.naturalWidth && imageRef.value.naturalHeight) {
           naturalAspectRatio.value = imageRef.value.naturalWidth / imageRef.value.naturalHeight;
 
-          // If no dimensions are set, use natural dimensions
+          // If no dimensions are set, use natural dimensions but constrain to editor width
           if (!width.value && !height.value) {
-            width.value = imageRef.value.naturalWidth;
-            height.value = imageRef.value.naturalHeight;
+            // Get the editor's actual container width
+            const editorContainer = props.editor.view.dom.closest('.editor-container');
+            const editorWidth = editorContainer
+              ? editorContainer.offsetWidth
+              : window.innerWidth * 0.4; // fallback: 40% of viewport width
+
+            const maxWidth = Math.min(imageRef.value.naturalWidth, editorWidth);
+
+            width.value = maxWidth;
+            height.value = Math.round(maxWidth / naturalAspectRatio.value);
+
             saveSize();
           } else if (width.value && !height.value) {
             // If we have width but no height, calculate height
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue
index 211627d4eb..e79d136de1 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue
@@ -137,6 +137,16 @@
         </button>
       </template>
     </footer>
+    <KModal
+      v-if="showErrorModal"
+      :appendToOverlay="true"
+      :title="errorUploadingImage$()"
+    >
+      <template> {{ errorMessage }} </template>
+      <template #actions>
+        <KButton @click="showErrorModal = false"> {{ close$() }} </KButton>
+      </template>
+    </KModal>
   </div>
 
 </template>
@@ -144,8 +154,7 @@
 
 <script>
 
-  import { defineComponent, ref, computed, onMounted } from 'vue';
-  import { processFile, ACCEPTED_MIME_TYPES } from '../../services/imageService';
+  import { defineComponent, ref, computed, onMounted, inject, getCurrentInstance } from 'vue';
   import { useFocusTrap } from '../../composables/useFocusTrap';
   import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
   import ImageDropZone from './ImageDropZone.vue';
@@ -160,6 +169,7 @@
         closeModal$,
         cancelLoading$,
         cancel$,
+        close$,
         replaceFile$,
         selectFile$,
         imagePreview$,
@@ -177,6 +187,7 @@
         insertImage$,
         defaultImageName$,
         multipleFilesDroppedWarning$,
+        errorUploadingImage$,
       } = getTipTapEditorStrings();
 
       const modalRoot = ref(null);
@@ -187,6 +198,8 @@
       const altText = ref('');
       const file = ref(null);
       const uploadWarning = ref('');
+      const showErrorModal = ref(false);
+      const errorMessage = ref('');
       let warningTimer = null;
 
       const isEditMode = computed(() => props.mode === 'edit');
@@ -195,6 +208,13 @@
       );
       const canInsert = computed(() => !!previewSrc.value);
 
+      // Inject the image processor service
+      const imageProcessor = inject('imageProcessor', {});
+      const { processFile, ACCEPTED_MIME_TYPES } = imageProcessor;
+
+      const instance = getCurrentInstance();
+      const store = instance.proxy.$store;
+
       onMounted(() => {
         originalData.value = { ...props.initialData };
         previewSrc.value = props.initialData.src || '';
@@ -215,21 +235,20 @@
           uploadWarning.value = '';
         }, 5000);
       };
-
       const handleFileChange = async selectedFile => {
         if (!selectedFile) return;
         modalState.value = 'loading';
         try {
-          const { src, file: processedFile } = await processFile(selectedFile);
+          const { src, file: processedFile } = await processFile(selectedFile, { $store: store });
           previewSrc.value = src;
           file.value = processedFile;
           modalState.value = 'preview';
         } catch (error) {
-          alert(error.message);
+          errorMessage.value = error.message;
+          showErrorModal.value = true;
           resetToPreview();
         }
       };
-
       const resetToPreview = () => {
         if (props.mode === 'create' && !originalData.value.file) {
           modalState.value = 'initial';
@@ -274,6 +293,8 @@
         handleFileChange,
         uploadWarning,
         showMultiFileWarning,
+        errorMessage,
+        showErrorModal,
 
         // Strings
         editImage$,
@@ -281,6 +302,7 @@
         closeModal$,
         cancelLoading$,
         cancel$,
+        close$,
         replaceFile$,
         selectFile$,
         imagePreview$,
@@ -296,6 +318,7 @@
         save$,
         insert$,
         insertImage$,
+        errorUploadingImage$,
       };
     },
     props: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
index 2577312a80..70a07cccfe 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
@@ -1,85 +1,170 @@
 import { getTipTapEditorStrings } from '../TipTapEditorStrings';
+import { cleanFile } from 'shared/vuex/file/clean';
+import { getHash, extractMetadata, storageUrl } from 'shared/vuex/file/utils';
+import { hexToBase64 } from 'shared/vuex/file/actions';
+import { File } from 'shared/data/resources';
+import client from 'shared/client';
+import { fileErrors } from 'shared/constants';
+import { FormatPresetsNames } from 'shared/leUtils/FormatPresets';
 
-const MAX_FILE_SIZE_MB = 10; // I think I need review on this value, I just picked what seemed reasonable
-export const ACCEPTED_MIME_TYPES = [
-  'image/png',
-  'image/jpeg',
-  'image/jpg',
-  'image/webp',
-  'image/svg+xml',
-];
+const MAX_FILE_SIZE_MB = 10;
+// see: shared/leUtils/FormatPresets.js
+const ACCEPTED_MIME_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/svg+xml'];
 
-const { noFileProvided$, invalidFileType$, fileTooLarge$, fileSizeUnit$, failedToProcessImage$ } =
-  getTipTapEditorStrings();
+const {
+  noFileProvided$,
+  invalidFileType$,
+  fileTooLarge$,
+  fileSizeUnit$,
+  failedToProcessImage$,
+  noEnoughStorageSpace$,
+} = getTipTapEditorStrings();
 
 /**
- * Validates a file based on type and size.
+ * Validates a file based on type, size, and available storage.
  * @param {File} file - The file to validate.
+ * @param {number} availableSpace - Available storage space in bytes.
  * @returns {{isValid: boolean, error?: string}}
  */
-export function validateFile(file) {
+function validateFile(file, availableSpace = null) {
   if (!file) {
-    return { isValid: false, error: noFileProvided$ };
+    return { isValid: false, error: noFileProvided$() };
   }
+
   if (!ACCEPTED_MIME_TYPES.includes(file.type)) {
     return {
       isValid: false,
-      error: invalidFileType$ + ACCEPTED_MIME_TYPES.join(', '),
+      error: invalidFileType$() + ACCEPTED_MIME_TYPES.join(', '),
     };
   }
+
   if (file.size > MAX_FILE_SIZE_MB * 1024 * 1024) {
     return {
       isValid: false,
-      error: fileTooLarge$ + MAX_FILE_SIZE_MB + fileSizeUnit$,
+      error: fileTooLarge$() + MAX_FILE_SIZE_MB + fileSizeUnit$(),
+    };
+  }
+
+  if (availableSpace !== null && file.size > availableSpace) {
+    return {
+      isValid: false,
+      error: noEnoughStorageSpace$(),
     };
   }
+
   return { isValid: true };
 }
 
 /**
- * Reads a file and returns it as a Data URL.
- * @param {File} file - The image file.
- * @returns {Promise<string>} A promise that resolves with the Data URL.
+ * Uploads file to storage (adapted from actions.js).
+ * @param {Object} params - Upload parameters.
+ * @returns {Promise}
  */
-function readFileAsDataURL(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = error => reject(error);
-    reader.readAsDataURL(file);
-  });
+function uploadFileToStorage({ file_format, mightSkip, checksum, file, url, contentType }) {
+  return (mightSkip ? client.head(storageUrl(checksum, file_format)) : Promise.reject())
+    .then(() => {
+      // File already exists, complete immediately
+    })
+    .catch(() => {
+      return client.put(url, file, {
+        headers: {
+          'Content-Type': contentType,
+          'Content-MD5': hexToBase64(checksum),
+        },
+      });
+    });
 }
 
 /**
- * Gets the natural dimensions of an image from its source.
- * @param {string} src - The image source (e.g., a Data URL).
- * @returns {Promise<{width: number, height: number}>}
+ * Main file processing function that uploads to server.
+ * Adapted from uploadFile action but simplified for image-specific use.
+ * @param {File} file - The image file to process.
+ * @param {Object} context - Vue component context with $store access.
+ * @returns {Promise<{src: string, width: number, height: number, file: File, id: string}>}
  */
-export function getImageDimensions(src) {
-  return new Promise((resolve, reject) => {
-    const img = new window.Image();
-    img.onload = () => resolve({ width: img.width, height: img.height });
-    img.onerror = error => reject(error);
-    img.src = src;
-  });
-}
+async function processFile(file, context = null) {
+  let availableSpace = null;
 
-/**
- * Fully processes a file: validates, reads, and gets dimensions.
- * @param {File} file - The file to process.
- * @returns {Promise<{src: string, width: number, height: number, file: File}>}
- */
-export async function processFile(file) {
-  const validation = validateFile(file);
+  // Get available space if context is provided
+  if (context && context.$store) {
+    await context.$store.dispatch('fetchUserStorage');
+    availableSpace = context.$store.getters.availableSpace;
+  }
+
+  const validation = validateFile(file, availableSpace);
   if (!validation.isValid) {
     throw new Error(validation.error);
   }
 
   try {
-    const src = await readFileAsDataURL(file);
-    const { width, height } = await getImageDimensions(src);
-    return { src, width, height, file };
+    const file_format = file.name.split('.').pop().toLowerCase();
+    const cleanedFile = await cleanFile(file, FormatPresetsNames.EXERCISE_IMAGE);
+
+    // Get file hash and metadata
+    const [checksum, metadata] = await Promise.all([
+      getHash(cleanedFile).catch(() => Promise.reject(fileErrors.CHECKSUM_HASH_FAILED)),
+      extractMetadata(cleanedFile, FormatPresetsNames.EXERCISE_IMAGE),
+    ]);
+
+    // Get upload URL from server
+    const uploadData = await File.uploadUrl({
+      checksum,
+      size: cleanedFile.size,
+      type: cleanedFile.type,
+      name: cleanedFile.name,
+      file_format,
+      ...metadata,
+    }).catch(error => {
+      let errorType = fileErrors.UPLOAD_FAILED;
+      if (error.response && error.response.status === 412) {
+        errorType = fileErrors.NO_STORAGE;
+      }
+      throw errorType;
+    });
+
+    const fileObject = {
+      ...uploadData.file,
+      metadata,
+    };
+
+    // Upload file to storage
+    await uploadFileToStorage({
+      id: fileObject.id,
+      checksum,
+      file: cleanedFile,
+      file_format,
+      url: uploadData.uploadURL,
+      contentType: uploadData.mimetype,
+      mightSkip: uploadData.might_skip,
+    });
+
+    // Return data in expected format for ImageUploadModal
+    return {
+      src: storageUrl(checksum, file_format),
+      width: metadata.width || null,
+      height: metadata.height || null,
+      file: file,
+      id: fileObject.id,
+      checksum,
+      fileObject, // Include full file object for additional data
+    };
   } catch (error) {
-    throw new Error(failedToProcessImage$);
+    // Handle specific error types
+    if (error === fileErrors.NO_STORAGE) {
+      throw new Error('Not enough storage space available');
+    } else if (error === fileErrors.CHECKSUM_HASH_FAILED) {
+      throw new Error('Failed to process file checksum');
+    } else if (Object.values(fileErrors).includes(error)) {
+      throw new Error(failedToProcessImage$() + ': ' + error);
+    } else {
+      throw new Error(failedToProcessImage$() + ': ' + error.message);
+    }
   }
 }
+
+const EditorImageProcessor = {
+  ACCEPTED_MIME_TYPES,
+  processFile,
+};
+
+export default EditorImageProcessor;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js
index 9fa6ff9a58..26a1bd5c71 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js
@@ -6,8 +6,6 @@ import { storageUrl } from '../../../../vuex/file/utils';
 // --- Image Translation ---
 export const IMAGE_PLACEHOLDER = '${☣ CONTENTSTORAGE}';
 export const IMAGE_REGEX = /!\[([^\]]*)\]\(([^/]+\/[^\s=)]+)(?:\s*=\s*([0-9.]+)x([0-9.]+))?\)/g;
-export const DATA_URL_IMAGE_REGEX =
-  /!\[([^\]]*)\]\(((?:data:|blob:).+?)(?:\s*=\s*([0-9.]+)x([0-9.]+))?\)/g;
 
 export const imageMdToParams = markdown => {
   // Reset regex state before executing to ensure it works on all matches
@@ -32,16 +30,6 @@ export const imageMdToParams = markdown => {
 export const paramsToImageMd = ({ src, alt, width, height, permanentSrc }) => {
   const sourceToSave = permanentSrc || src;
 
-  // As a safety net, if the source is still a data/blob URL, we should not
-  // try to create a placeholder format. This should not happen with our new logic,
-  // but it makes the function more robust.
-  if (sourceToSave.startsWith('data:') || sourceToSave.startsWith('blob:')) {
-    if (width && height) {
-      return `![${alt || ''}](${sourceToSave} =${width}x${height})`;
-    }
-    return `![${alt || ''}](${sourceToSave})`;
-  }
-
   const fileName = sourceToSave.split('/').pop();
   if (Number.isFinite(+width) && Number.isFinite(+height)) {
     return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName} =${width}x${height})`;
@@ -74,16 +62,6 @@ export function preprocessMarkdown(markdown) {
 
   let processedMarkdown = markdown;
 
-  // First, handle data URLs and blob URLs for images.
-  processedMarkdown = processedMarkdown.replace(
-    DATA_URL_IMAGE_REGEX,
-    (match, alt, src, width, height) => {
-      const widthAttr = width ? ` width="${width}"` : '';
-      const heightAttr = height ? ` height="${height}"` : '';
-      return `<img src="${src}" alt="${alt || ''}"${widthAttr}${heightAttr} />`;
-    },
-  );
-
   // Then, handle our standard content-storage images.
   processedMarkdown = processedMarkdown.replace(IMAGE_REGEX, match => {
     const params = imageMdToParams(match);
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdown.spec.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdown.spec.js
index 520e056666..5c5944e86e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdown.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdown.spec.js
@@ -55,16 +55,6 @@ describe('preprocessMarkdown', () => {
     });
   });
 
-  // 2: Data URL / Blob URL Images
-  describe('Data URL Image Handling', () => {
-    it('should convert a data URL image with dimensions into an <img> tag', () => {
-      const dataUrlMd = '![Data](data:image/png;base64,iVBORw0KGgo= =300x400)';
-      const expectedHtml =
-        '<img src="data:image/png;base64,iVBORw0KGgo=" alt="Data" width="300" height="400" />';
-      expect(preprocessMarkdown(dataUrlMd)).toBe(expectedHtml);
-    });
-  });
-
   // 3: Math Formulas
   describe('Math Formula Handling', () => {
     it('should convert a simple math formula into a <span> tag', () => {
@@ -93,11 +83,10 @@ describe('preprocessMarkdown', () => {
 
   // 5: Mixed Content
   describe('Mixed Content Handling', () => {
-    it('should correctly process a string with legacy images, data URLs, math, and standard markdown', () => {
-      const mixedMd =
-        'Legacy: ![](${CONTENTSTORAGE}/file.png =10x10)\nData: ![alt](data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=)\nFormula: $$E=mc^2$$';
+    it('should correctly process a string with legacy images, math, and standard markdown', () => {
+      const mixedMd = 'Legacy: ![](${CONTENTSTORAGE}/file.png =10x10)\nFormula: $$E=mc^2$$';
       const expectedHtml =
-        'Legacy: <img src="/content/storage/file.png" permanentSrc="file.png" alt="" width="10" height="10" />\nData: <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="alt" />\nFormula: <span data-latex="E=mc^2"></span>';
+        'Legacy: <img src="/content/storage/file.png" permanentSrc="file.png" alt="" width="10" height="10" />\nFormula: <span data-latex="E=mc^2"></span>';
 
       const result = preprocessMarkdown(mixedMd);
       expect(result).toBe(expectedHtml);
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdownSerializer.spec.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdownSerializer.spec.js
index 6c5354639e..ddc365e1ce 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdownSerializer.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdownSerializer.spec.js
@@ -92,27 +92,6 @@ describe('createCustomMarkdownSerializer', () => {
       expect(getMarkdown()).toBe(expectedMd);
     });
 
-    it('should serialize a new, unsaved data: URL image', () => {
-      const dataUrl = 'data:image/png;base64,iVBORw0KGgo=';
-      const docContent = [
-        {
-          type: 'image',
-          attrs: {
-            src: dataUrl,
-            permanentSrc: null, // No permanent source yet
-            alt: 'New Cat',
-            width: '80',
-            height: '60',
-          },
-        },
-      ];
-      const mockEditor = createMockEditor(docContent);
-      const getMarkdown = createCustomMarkdownSerializer(mockEditor);
-
-      const expectedMd = `![New Cat](${dataUrl} =80x60)`;
-      expect(getMarkdown()).toBe(expectedMd);
-    });
-
     it('should serialize a <small> node correctly', () => {
       const docContent = [
         {
diff --git a/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js b/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
index ea1c38008c..5fe322c8aa 100644
--- a/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
+++ b/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
@@ -110,7 +110,7 @@ export function deleteFile(context, file) {
   });
 }
 
-function hexToBase64(str) {
+export function hexToBase64(str) {
   return btoa(
     String.fromCharCode.apply(
       null,