diff --git a/client/src/components/common/DragAndDropZone.tsx b/client/src/components/common/DragAndDropZone.tsx
index 34a44b7..9b9bc0b 100644
--- a/client/src/components/common/DragAndDropZone.tsx
+++ b/client/src/components/common/DragAndDropZone.tsx
@@ -2,10 +2,10 @@ import { useDropzone } from 'react-dropzone';
 import type { FileRejection, Accept } from 'react-dropzone';
 import { useEffect, useRef, useState, useCallback } from 'preact/hooks';
 import type { ComponentChildren, RefObject } from 'preact';
+import { formatRejectionReasons } from '@/utils/fileValidation';
 
 type DragAndDropZoneProps = {
   onFileDrop: (file: File) => void | Promise<void>;
-  onFileReject?: (rejectedFiles: FileRejection[]) => void;
   accept?: Accept;
   multiple?: boolean;
   className?: string;
@@ -15,7 +15,6 @@ type DragAndDropZoneProps = {
 
 const DragAndDropZone = ({
   onFileDrop,
-  onFileReject,
   accept,
   multiple = false,
   className = '',
@@ -47,6 +46,8 @@ const DragAndDropZone = ({
     });
   }, [overlayTargetRef]);
 
+  const [localError, setLocalError] = useState<string | undefined>();
+
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept,
     multiple,
@@ -54,6 +55,7 @@ const DragAndDropZone = ({
     maxFiles: multiple ? undefined : 1,
     onDropAccepted: async (files) => {
       try {
+        setLocalError(undefined);
         if (multiple) {
           for (const file of files) {
             await onFileDrop(file);
@@ -67,14 +69,13 @@ const DragAndDropZone = ({
       }
     },
     onDropRejected: (rejectedFiles) => {
-      if (!onFileReject) return;
-      try {
-        onFileReject(rejectedFiles);
-      } catch (error) {
-        console.error('Error handling rejected files:', error);
-      }
+      if (rejectedFiles.length === 0) return;
+      setLocalError(`Rejected: ${formatRejectionReasons(rejectedFiles)}`);
+    },
+    onDragEnter: () => {
+      setLocalError(undefined);
+      updateOverlayRect();
     },
-    onDragEnter: () => updateOverlayRect(),
   });
 
   // react-dropzone returns props typed for React — we cast them for Preact
@@ -148,6 +149,12 @@ const DragAndDropZone = ({
           className="bg-orange-100/60 border-2 border-orange-400 rounded-md pointer-events-none"
         />
       )}
+
+      {localError && (
+        <div className="absolute bottom-2 left-2 right-2 text-xs text-red-600 bg-red-50 p-2 rounded border border-red-200 z-20">
+          {localError}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/client/src/components/images/ImageConverter.tsx b/client/src/components/images/ImageConverter.tsx
index 1a6a499..4d7d432 100644
--- a/client/src/components/images/ImageConverter.tsx
+++ b/client/src/components/images/ImageConverter.tsx
@@ -1,301 +1,61 @@
-import { useState, useRef, useEffect } from 'preact/hooks';
-import { TargetedEvent } from 'preact/compat';
-import type { Accept, FileRejection } from 'react-dropzone';
+import { useState, useRef } from 'preact/hooks';
 
 import { useWasm } from '@/hooks/useWasm';
-import ImageJSRootPreview from './ImageJSRootPreview';
-import {
-  clip_pixels_with_percentiles,
-  median_blur_image,
-  load_image,
-  gaussian_blur_image,
-  apply_linear_function,
-  Image,
-} from '@/wasm';
-import AlgorithmsContainer from '@/components/algorithms/AlgorithmsContainer';
-import {
-  ConversionAlgorithm,
-  ConversionAlgorithmType,
-  getAlgorithmName,
-} from '@/models/algorithms';
-import DragAndDropZone from '@/components/common/DragAndDropZone';
+import { useFileUpload } from '@/hooks/useFileUpload';
+import { useImageProcessing } from '@/hooks/useImageProcessing';
+import { ACCEPTED_FILE_TYPES } from '@/utils/fileValidation';
+import { ConversionAlgorithm } from '@/models/algorithms';
 
-type ImageState = {
-  rawBytes: Uint8Array | null;
-  uploadedImage: Image | null;
-  rawPixels: Uint8Array | Uint16Array | null;
-  imageToConvert: Image | null;
-  convertedPixels: Uint8Array | Uint16Array | null;
-};
+import ImagePreview from './ImageJSRootPreview';
+import AlgorithmsContainer from '../algorithms/AlgorithmsContainer';
+import DragAndDropZone from '../common/DragAndDropZone';
 
 const ImageConverter = () => {
   const { wasmReady } = useWasm();
   const [algorithms, setAlgorithms] = useState<ConversionAlgorithm[]>([]);
-
-  const [imageState, setImageState] = useState<ImageState>({
-    rawBytes: null,
-    uploadedImage: null,
-    rawPixels: null,
-    imageToConvert: null,
-    convertedPixels: null,
-  });
-
-  const [errorMessage, setErrorMessage] = useState<string | undefined>();
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [processingProgress, setProcessingProgress] = useState(0);
-  const [currentAlgorithm, setCurrentAlgorithm] = useState<string>('');
   const [units, setUnits] = useState<'px' | 'mm'>('px');
   const [mmPerPx, setMmPerPx] = useState(16 / 10);
-  const [previewsAspectRatios, setPreviewsAspectRatios] = useState<number>(1);
+  const [previewsAspectRatios, setPreviewsAspectRatios] = useState(1);
   const overlayTargetRef = useRef<HTMLDivElement | null>(null);
 
-  const prevSrcUrlRef = useRef<string | null>(null);
-  const prevResultUrlRef = useRef<string | null>(null);
-  const YIELD_DELAY_MS = 10;
-  const FINAL_DISPLAY_DELAY_MS = 500;
+  const {
+    imageState,
+    setImageState,
+    errorMessage,
+    setErrorMessage,
+    processFile,
+  } = useFileUpload(wasmReady);
 
-  const acceptedFileTypes: Accept = {
-    'image/tiff': ['.tiff', '.tif'],
-    'image/png': ['.png'],
-    'image/jpeg': ['.jpeg', '.jpg'],
-  };
+  const { isProcessing, processingProgress, currentAlgorithm, handleRun } =
+    useImageProcessing(imageState, setImageState, setErrorMessage);
 
-  const handleFileReject = (rejectedFiles: FileRejection[]) => {
-    if (rejectedFiles.length === 0) return;
-    const reasons = rejectedFiles
-      .map((rejection) => {
-        const errors = rejection.errors
-          .map((err) => {
-            if (err.code === 'file-invalid-type') {
-              return `${rejection.file.name}: unsupported type`;
-            }
-            return `${rejection.file.name}: ${err.message}`;
-          })
-          .join(', ');
-        return errors;
-      })
-      .join('; ');
-
-    setErrorMessage(`Rejected files: ${reasons}`);
-  };
-
-  const cleanupBlobUrls = () => {
-    if (prevSrcUrlRef.current) {
-      URL.revokeObjectURL(prevSrcUrlRef.current);
-      prevSrcUrlRef.current = null;
-    }
-    if (prevResultUrlRef.current) {
-      URL.revokeObjectURL(prevResultUrlRef.current);
-      prevResultUrlRef.current = null;
-    }
-  };
-
-  useEffect(() => {
-    return () => {
-      cleanupBlobUrls();
-    };
-  }, []);
-
-  const processFile = async (file: File) => {
-    if (!wasmReady) {
-      setErrorMessage('WASM engine not ready — try again in a moment');
-      return;
-    }
-    const allowedTypes = ['image/tiff', 'image/png', 'image/jpeg'];
-    if (!allowedTypes.includes(file.type)) {
-      setErrorMessage('Unsupported image type. Supported: [png, jpeg, tiff]');
-      return;
-    }
-    const bytes = new Uint8Array(await file.arrayBuffer());
-    setErrorMessage(undefined);
-    try {
-      const img = load_image(bytes);
-      const pixels =
-        img.bits_per_sample === 16
-          ? img.pixels_u16()
-          : img.bits_per_sample === 8
-            ? img.pixels_u8()
-            : null;
-      if (!pixels) {
-        setErrorMessage('Failed to extract pixel data from image');
-        return;
-      }
-      setImageState({
-        rawBytes: bytes,
-        uploadedImage: img,
-        rawPixels: pixels,
-        imageToConvert: img,
-        convertedPixels: null,
-      });
-    } catch (err) {
-      setErrorMessage(`Upload error: ${err}`);
-    }
-  };
-
-  const handleUpload = async (e: TargetedEvent<HTMLInputElement, Event>) => {
-    const file = e.currentTarget.files?.[0];
+  const handleUpload = async (e: Event) => {
+    const file = (e.currentTarget as HTMLInputElement).files?.[0];
     if (file) await processFile(file);
   };
 
-  const handleRun = async () => {
-    const enabledAlgorithms = algorithms.filter((a) => a.enabled);
-    if (!imageState.rawBytes || !wasmReady) return;
-    if (enabledAlgorithms.length === 0) {
-      setErrorMessage('No algorithms selected');
-      return;
-    }
-    if (!imageState.imageToConvert) {
-      const imageToConvert = load_image(imageState.rawBytes);
-      setImageState((prevState) => ({
-        ...prevState,
-        imageToConvert,
-      }));
-      return;
-    }
-
-    setErrorMessage(undefined);
-    setIsProcessing(true);
-    setProcessingProgress(0);
-    setCurrentAlgorithm('');
-
-    try {
-      for (let i = 0; i < enabledAlgorithms.length; i++) {
-        const algorithm = enabledAlgorithms[i];
-
-        setCurrentAlgorithm(getAlgorithmName(algorithm.type));
-        setProcessingProgress(Math.round((i / enabledAlgorithms.length) * 100));
-
-        try {
-          convert(imageState.imageToConvert, algorithm, setErrorMessage);
-        } catch (error) {
-          console.error(
-            `Error occurred while processing algorithm ${algorithm.type}:`,
-            error
-          );
-          return;
-        }
-        await new Promise((resolve) => setTimeout(resolve, YIELD_DELAY_MS));
-      }
-
-      const finalImage = imageState.imageToConvert;
-      let converted: Uint8Array | Uint16Array | null = null;
-      if (finalImage) {
-        if (finalImage.bits_per_sample === 16) {
-          converted = finalImage.pixels_u16() ?? null;
-        } else if (finalImage.bits_per_sample === 8) {
-          converted = finalImage.pixels_u8() ?? null;
-        }
-      }
-
-      setImageState((prev) => ({
-        ...prev,
-        convertedPixels: converted,
-      }));
-
-      setProcessingProgress(100);
-      setCurrentAlgorithm('Complete');
-
-      if (prevResultUrlRef.current) {
-        URL.revokeObjectURL(prevResultUrlRef.current);
-      }
-
-      setErrorMessage(undefined);
-
-      await new Promise((resolve) =>
-        setTimeout(resolve, FINAL_DISPLAY_DELAY_MS)
-      );
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : JSON.stringify(error);
-      setErrorMessage(`Processing error: ${errorMessage}`);
-    } finally {
-      setIsProcessing(false);
-      setProcessingProgress(0);
-      setCurrentAlgorithm('');
-    }
-  };
-
-  const convert = (
-    image: Image,
-    algorithm: ConversionAlgorithm,
-    setErrorMessage: (msg: string) => void
-  ): Uint8Array<ArrayBufferLike> | undefined => {
-    switch (algorithm.type) {
-      case ConversionAlgorithmType.HotPixelRemoval:
-        clip_pixels_with_percentiles(
-          image,
-          algorithm.lowPercentile,
-          algorithm.highPercentile
-        );
-        return;
-      case ConversionAlgorithmType.MedianBlur:
-        try {
-          median_blur_image(image, algorithm.kernelRadius);
-          return;
-        } catch (err) {
-          setErrorMessage(`Conversion error: ${err}`);
-          return;
-        }
-      case ConversionAlgorithmType.GaussianBlur:
-        try {
-          gaussian_blur_image(image, algorithm.sigma);
-          return;
-        } catch (err) {
-          setErrorMessage(`Conversion error: ${err}`);
-          return;
-        }
-      case ConversionAlgorithmType.LinearTransform: {
-        const a = Number(algorithm.a);
-        const b = Number(algorithm.b);
-        if (!Number.isFinite(a) || !Number.isFinite(b)) {
-          setErrorMessage('Linear transform requires numeric a and b');
-          return;
-        }
-        try {
-          // This mutates the Image in-place (same pattern as gaussian_blur_image)
-          apply_linear_function(image, a, b);
-          return;
-        } catch (err) {
-          setErrorMessage(`Conversion error: ${err}`);
-          return;
-        }
-      }
-      default:
-        // fallback for unsupported algorithms
-        // This should ideally never happen if the algorithm list is properly managed
-        // That is why we use `as any` to avoid TypeScript errors
-        setErrorMessage(`Unsupported algorithm: ${(algorithm as any).type}`);
-        return;
-    }
-  };
-
   return (
     <div
       className={`flex items-center h-full w-full p-1 bg-white ${
         wasmReady ? '' : 'opacity-50'
       }`}
     >
+      {/* Left panel: previews */}
       <div className="flex w-3/4 h-full rounded-md bg-orange-100 mr-1 mt-2">
+        {/* Original image */}
         <div className="w-full flex items-start justify-center mt-10 rounded-md">
           <DragAndDropZone
-            accept={acceptedFileTypes}
+            accept={ACCEPTED_FILE_TYPES}
             overlayTargetRef={overlayTargetRef}
             onFileDrop={processFile}
-            onFileReject={handleFileReject}
             className="w-full"
           >
-            <ImageJSRootPreview
+            <ImagePreview
               pixels={imageState.rawPixels}
               HorizontalLength={
-                imageState.uploadedImage
-                  ? imageState.uploadedImage.horizontal_length
-                  : null
-              }
-              VerticalLength={
-                imageState.uploadedImage
-                  ? imageState.uploadedImage.vertical_length
-                  : null
+                imageState.uploadedImage?.horizontal_length ?? null
               }
+              VerticalLength={imageState.uploadedImage?.vertical_length ?? null}
               header="Original Image"
               aspectRatio={previewsAspectRatios}
               setAspectRatio={setPreviewsAspectRatios}
@@ -307,27 +67,22 @@ const ImageConverter = () => {
             />
           </DragAndDropZone>
         </div>
+
+        {/* Converted image */}
         <div className="w-full flex items-start justify-center mt-10 rounded-md relative">
-          <ImageJSRootPreview
+          <ImagePreview
             pixels={imageState.convertedPixels}
             HorizontalLength={
-              imageState.imageToConvert
-                ? imageState.imageToConvert.horizontal_length
-                : null
-            }
-            VerticalLength={
-              imageState.imageToConvert
-                ? imageState.imageToConvert.vertical_length
-                : null
+              imageState.imageToConvert?.horizontal_length ?? null
             }
-            header={'Converted Image'}
+            VerticalLength={imageState.imageToConvert?.vertical_length ?? null}
+            header="Converted Image"
             aspectRatio={previewsAspectRatios}
             setAspectRatio={setPreviewsAspectRatios}
             units={units}
             mmPerPx={mmPerPx}
           />
 
-          {/* Progress Indicator */}
           {isProcessing && (
             <div className="absolute top-16 left-1/2 transform -translate-x-1/2 bg-white rounded-lg px-4 py-2 shadow-md z-10">
               <div className="text-center">
@@ -338,7 +93,7 @@ const ImageConverter = () => {
                   <div
                     className="bg-green-500 h-1 rounded-full transition-all duration-300"
                     style={{ width: `${processingProgress}%` }}
-                  ></div>
+                  />
                 </div>
                 <div className="text-xs text-gray-500 mt-1">
                   {processingProgress}%
@@ -348,6 +103,8 @@ const ImageConverter = () => {
           )}
         </div>
       </div>
+
+      {/* Right panel: controls */}
       <div className="w-1/4 flex-col h-full bg-gray-50 mt-2 ml-1 rounded-md p-3 shadow-md">
         <div className="flex justify-evenly space-around w-full mb-4">
           <label
@@ -359,7 +116,7 @@ const ImageConverter = () => {
           <input
             id="image-upload"
             type="file"
-            accept="image/*"
+            accept=".png,.jpg,.jpeg,.tiff,.tif,image/png,image/jpeg,image/tiff"
             onChange={handleUpload}
             className="hidden"
           />
@@ -370,7 +127,7 @@ const ImageConverter = () => {
                 ? 'bg-gray-400 cursor-not-allowed'
                 : 'bg-green-600 hover:bg-green-700'
             }`}
-            onClick={handleRun}
+            onClick={() => handleRun(algorithms, wasmReady)}
             disabled={isProcessing}
           >
             {isProcessing ? 'Processing...' : 'Run'}
@@ -379,7 +136,6 @@ const ImageConverter = () => {
 
         <div className="mb-4 p-3 rounded-md border border-gray-200 bg-white">
           <div className="text-sm font-semibold mb-2">Units</div>
-
           <div className="flex items-center gap-4 mb-2 flex-nowrap">
             <label className="inline-flex items-center gap-2 cursor-pointer shrink-0">
               <input
@@ -391,7 +147,6 @@ const ImageConverter = () => {
               />
               <span>Pixels</span>
             </label>
-
             <label className="inline-flex items-center gap-2 cursor-pointer shrink-0">
               <input
                 type="radio"
@@ -402,13 +157,12 @@ const ImageConverter = () => {
               />
               <span>Millimeters</span>
             </label>
-
             {units === 'mm' && (
               <div className="flex-1 flex justify-center min-w-0">
                 <input
                   type="text"
                   inputMode="decimal"
-                  autoComplete={'off'}
+                  autoComplete="off"
                   className="w-20 flex-none rounded-md border border-gray-300 px-2 py-1 text-right"
                   value={mmPerPx}
                   onInput={(e) => {
diff --git a/client/src/components/images/ImageJSRootPreview.tsx b/client/src/components/images/ImageJSRootPreview.tsx
index beea646..d4fda23 100644
--- a/client/src/components/images/ImageJSRootPreview.tsx
+++ b/client/src/components/images/ImageJSRootPreview.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'preact/hooks';
-import { BIT, createHistogram, draw } from 'jsroot';
+import { BIT, createHistogram, draw, cleanup } from 'jsroot';
 import type { RefObject } from 'preact';
 
 type TypedPixels = Uint8Array | Uint16Array | Float32Array;
@@ -112,7 +112,10 @@ const ImagePreview = ({
 
     // Cleanup on unmount/re-render
     return () => {
-      if (host) host.innerHTML = '';
+      if (containerRef.current) {
+        cleanup(containerRef.current);
+        containerRef.current.innerHTML = '';
+      }
     };
   }, [
     pixels,
diff --git a/client/src/hooks/useFileUpload.ts b/client/src/hooks/useFileUpload.ts
new file mode 100644
index 0000000..091d699
--- /dev/null
+++ b/client/src/hooks/useFileUpload.ts
@@ -0,0 +1,70 @@
+import { useState, useCallback } from 'preact/hooks';
+import { load_image, Image } from '@/wasm';
+import { isAllowedFileType } from '@/utils/fileValidation';
+import { extractPixels } from '@/utils/imageConversion';
+
+export type ImageState = {
+    rawBytes: Uint8Array | null;
+    uploadedImage: Image | null;
+    rawPixels: Uint8Array | Uint16Array | null;
+    imageToConvert: Image | null;
+    convertedPixels: Uint8Array | Uint16Array | null;
+}
+
+const INITIAL_STATE: ImageState = {
+    rawBytes: null,
+    uploadedImage: null,
+    rawPixels: null,
+    imageToConvert: null,
+    convertedPixels: null,
+};
+
+export function useFileUpload(wasmReady: boolean) {
+    const [imageState, setImageState] = useState<ImageState>(INITIAL_STATE);
+    const [errorMessage, setErrorMessage] = useState<string | undefined>();
+
+    const processFile = useCallback(
+        async (file: File) => {
+            if (!wasmReady) {
+                setErrorMessage('WASM engine is not ready - try again in a moment');
+                return;
+            }
+            if (!isAllowedFileType(file)){
+                setErrorMessage('Unsupported image type. Supported types are: PNG, TIFF, JPEG');
+                return;
+            }
+
+            const bytes = new Uint8Array(await file.arrayBuffer());
+            setErrorMessage(undefined);
+
+            try {
+                const img = load_image(bytes);
+                const pixels = extractPixels(img);
+
+                if (!pixels) {
+                    setErrorMessage('Failed to extract pixel data from the image');
+                    return;
+                }
+
+                setImageState({
+                    rawBytes: bytes,
+                    uploadedImage: img,
+                    rawPixels: pixels,
+                    imageToConvert: img,
+                    convertedPixels: null,
+                });
+            } catch (err) {
+                setErrorMessage(`Upload error: ${err}`);
+            }
+        },
+        [wasmReady]
+    );
+
+    return {
+        imageState,
+        setImageState,
+        errorMessage,
+        setErrorMessage,
+        processFile,
+    }
+}
\ No newline at end of file
diff --git a/client/src/hooks/useImageProcessing.ts b/client/src/hooks/useImageProcessing.ts
new file mode 100644
index 0000000..1ab6d9c
--- /dev/null
+++ b/client/src/hooks/useImageProcessing.ts
@@ -0,0 +1,80 @@
+import {useState, useCallback } from 'preact/hooks';
+import { load_image } from '@/wasm';
+import { ConversionAlgorithm, getAlgorithmName } from '@/models/algorithms';
+import { applyAlgorithm, extractPixels } from '@/utils/imageConversion';
+import type { ImageState } from './useFileUpload';
+
+
+// the delays are used to draw progress bar (may be deleted in the future or adjusted somehow to not cause too much delay for user)
+const YIELD_DELAY_MS = 10;
+const FINAL_DISPLAY_DELAY_MS = 500;
+
+export function useImageProcessing(
+    imageState: ImageState,
+    setImageState: (fn: (prev: ImageState) => ImageState) => void,
+    setErrorMessage: (msg: string | undefined) => void
+){
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [processingProgress, setProcessingProgress] = useState(0);
+    const [currentAlgorithm, setCurrentAlgorithm] = useState('');
+
+    const handleRun = useCallback(
+        async (algorithms: ConversionAlgorithm[], wasmReady: boolean) => {
+            const enabledAlgorithms = algorithms.filter((a) => a.enabled);
+            if (!imageState.rawBytes || !wasmReady) return;
+
+            if (enabledAlgorithms.length === 0){
+                setErrorMessage('No algorithms selected');
+                return;
+            }
+
+// this will interrupt the processing and user would have to re-run the conversion (maybe it should be changed or at least a warning should be added in UI)
+            if(!imageState.imageToConvert){
+                const imageToConvert = load_image(imageState.rawBytes);
+                setImageState((prev) => ({...prev, imageToConvert }));
+                return;
+            }
+
+            setErrorMessage(undefined);
+            setIsProcessing(true);
+            setProcessingProgress(0);
+            setCurrentAlgorithm('');
+
+            try{
+                for (let i=0;i<enabledAlgorithms.length;i++){
+                    const algorithm = enabledAlgorithms[i];
+                    setCurrentAlgorithm(getAlgorithmName(algorithm.type));
+                    setProcessingProgress(Math.round((i / enabledAlgorithms.length) * 100));
+
+                    const result = applyAlgorithm(imageState.imageToConvert, algorithm);
+                    if(!result.success){
+                        setErrorMessage(result.error);
+                        return;
+                    }
+
+                    await new Promise((resolve) => setTimeout(resolve,YIELD_DELAY_MS));
+            }
+
+            const converted = extractPixels(imageState.imageToConvert);
+
+            setImageState((prev) => ({ ...prev, convertedPixels: converted }));
+
+            setProcessingProgress(100);
+            setCurrentAlgorithm('Complete');
+            setErrorMessage(undefined);
+
+            await new Promise((resolve) => setTimeout(resolve, FINAL_DISPLAY_DELAY_MS));
+        } catch (error) {
+            const msg = error instanceof Error ? error.message : JSON.stringify(error);
+            setErrorMessage(`Processing error: ${msg}`);
+        } finally {
+            setIsProcessing(false);
+            setProcessingProgress(0);
+            setCurrentAlgorithm('');
+        }
+    },
+    [imageState, setImageState, setErrorMessage]
+    );
+
+    return { isProcessing, processingProgress, currentAlgorithm, handleRun };
+}
\ No newline at end of file
diff --git a/client/src/utils/fileValidation.ts b/client/src/utils/fileValidation.ts
new file mode 100644
index 0000000..3727f72
--- /dev/null
+++ b/client/src/utils/fileValidation.ts
@@ -0,0 +1,28 @@
+import type {Accept, FileRejection} from 'react-dropzone';
+
+export const ACCEPTED_FILE_TYPES: Accept = {
+    'image/tiff': ['.tiff', '.tif'],
+    'image/png': ['.png'],
+    'image/jpeg': ['.jpeg', '.jpg'],
+};
+
+export const ALLOWED_MIME_TYPES = ['image/tiff', 'image/png', 'image/jpeg'];
+
+export function isAllowedFileType(file: File): boolean {
+    return ALLOWED_MIME_TYPES.includes(file.type);
+}
+
+export function formatRejectionReasons(rejectedFiles: FileRejection[]): string {
+    return rejectedFiles
+        .map((rejection) =>
+            rejection.errors
+                .map((err) => {
+                    if (err.code === 'file-invalid-type') {
+                        return `${rejection.file.name}: unsupported type`;
+                }
+                return `${rejection.file.name}: ${err.message}`;
+            })
+            .join(', ')
+        )
+        .join('; ');
+}
\ No newline at end of file
diff --git a/client/src/utils/imageConversion.ts b/client/src/utils/imageConversion.ts
new file mode 100644
index 0000000..4db0877
--- /dev/null
+++ b/client/src/utils/imageConversion.ts
@@ -0,0 +1,61 @@
+import { 
+    clip_pixels_with_percentiles,
+    median_blur_image,
+    gaussian_blur_image,
+    apply_linear_function,
+    Image,
+} from '@/wasm'
+import {
+    ConversionAlgorithm,
+    ConversionAlgorithmType,
+} from '@/models/algorithms'
+
+export type ConversionResult = 
+    | { success: true }
+    | { success: false; error: string }
+
+export function applyAlgorithm(image: Image, algorithm: ConversionAlgorithm): ConversionResult {
+    switch (algorithm.type) {
+        case ConversionAlgorithmType.HotPixelRemoval:
+            try{
+                clip_pixels_with_percentiles(image, algorithm.lowPercentile, algorithm.highPercentile);
+            } catch (err){
+                return { success: false, error: `Hot pixel removal failed: ${err}` };
+            }
+            return { success: true};
+        case ConversionAlgorithmType.MedianBlur:
+            try{
+                median_blur_image(image, algorithm.kernelRadius);
+                return { success: true};
+            } catch (err){
+                return { success: false, error: `Median blur failed: ${err}` };
+            }
+        case ConversionAlgorithmType.GaussianBlur:
+            try{
+                gaussian_blur_image(image, algorithm.sigma);
+                return { success: true};
+            } catch (err){
+                return { success: false, error: `Gaussian blur failed: ${err}` };
+            }
+        case ConversionAlgorithmType.LinearTransform:
+            const a = Number(algorithm.a);
+            const b = Number(algorithm.b);
+            if(!Number.isFinite(a) || !Number.isFinite(b)){
+                return { success: false, error: `Linear transform requires numeric a and b` };
+            }
+            try{
+                apply_linear_function(image, a, b);
+                return { success: true};
+            } catch (err){
+                return { success: false, error: `Linear transform failed: ${err}` };
+            }
+        default:
+            return { success: false, error: `Unsupported algorithm: ${(algorithm as any).type}` };
+}
+}
+
+export function extractPixels(image: Image): Uint8Array | Uint16Array | null {
+    if(image.bits_per_sample === 16) return image.pixels_u16() ?? null;
+    if(image.bits_per_sample === 8) return image.pixels_u8() ?? null;
+    return null;
+}