From 34fd3284440f3713e27a84e1b0f87a37473dd635 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Sz=C3=BCcs?=
 <127139797+balazs-szucs@users.noreply.github.com>
Date: Mon, 22 Dec 2025 16:46:26 +0100
Subject: [PATCH] [V2] feat(sign): add SVG support for signature image uploads
 (#5279)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Description of Changes


This pull request updates the `ImageUploader` component to improve SVG
file support. The main changes ensure that SVG files can be uploaded and
are properly validated, even if their MIME type is not set as an image.

**SVG File Support Improvements:**

* Updated the file type validation in the `handleImageChange` function
to allow files ending with `.svg`, even if their MIME type is not
`image/*`.
* Modified the `accept` attribute in the `FileInput` component to
explicitly include `.svg` files, making SVG selection possible in the
file picker.

### Sign with SVG pics

<img width="1920" height="998" alt="image"
src="https://github.com/user-attachments/assets/9e24d83e-304c-4c7b-85b3-82798616ac5a"
/>


<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>
---
 .../core/components/annotation/shared/ImageUploader.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/core/components/annotation/shared/ImageUploader.tsx b/frontend/src/core/components/annotation/shared/ImageUploader.tsx
index 9b4945100..b031b3ce2 100644
--- a/frontend/src/core/components/annotation/shared/ImageUploader.tsx
+++ b/frontend/src/core/components/annotation/shared/ImageUploader.tsx
@@ -23,9 +23,9 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
   const handleImageChange = async (file: File | null) => {
     if (file && !disabled) {
       try {
-        // Validate that it's actually an image file
-        if (!file.type.startsWith('image/')) {
-          console.error('Selected file is not an image');
+        // Validate that it's actually an image file or SVG
+        if (!file.type.startsWith('image/') && !file.name.toLowerCase().endsWith('.svg')) {
+          console.error('Selected file is not an image or SVG');
           return;
         }
 
@@ -45,7 +45,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
         <FileInput
           label={label}
           placeholder={placeholder || t('sign.image.placeholder', 'Select image file')}
-          accept="image/*"
+          accept="image/*,.svg"
           onChange={handleImageChange}
           disabled={disabled}
         />