b695e3900e
# Description of Changes <!-- 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) ### 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. --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: James Brunton <james@stirlingpdf.com> Co-authored-by: Claude <noreply@anthropic.com>
55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { FileInput, Text, Stack } from '@mantine/core';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface ImageUploaderProps {
|
|
onImageChange: (file: File | null) => void;
|
|
disabled?: boolean;
|
|
label?: string;
|
|
placeholder?: string;
|
|
hint?: string;
|
|
}
|
|
|
|
export const ImageUploader: React.FC<ImageUploaderProps> = ({
|
|
onImageChange,
|
|
disabled = false,
|
|
label,
|
|
placeholder,
|
|
hint
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
|
|
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');
|
|
return;
|
|
}
|
|
|
|
onImageChange(file);
|
|
} catch (error) {
|
|
console.error('Error processing image file:', error);
|
|
}
|
|
} else if (!file) {
|
|
// Clear image data when no file is selected
|
|
onImageChange(null);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Stack gap="sm">
|
|
<FileInput
|
|
label={label || t('sign.image.label', 'Upload signature image')}
|
|
placeholder={placeholder || t('sign.image.placeholder', 'Select image file')}
|
|
accept="image/*"
|
|
onChange={handleImageChange}
|
|
disabled={disabled}
|
|
/>
|
|
<Text size="sm" c="dimmed">
|
|
{hint || t('sign.image.hint', 'Upload an image of your signature')}
|
|
</Text>
|
|
</Stack>
|
|
);
|
|
}; |