saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-09-24 04:26:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix add image

Browse Source
This commit is contained in:
Reece Browne 2025-09-23 17:18:39 +01:00
parent d9798badae
commit fc2f34ee15
1 changed files with 30 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/components/tools/sign/SignSettings.tsx
View File

@ -18,7 +18,6 @@ const SignSettings = ({ parameters, onParameterChange, disabled = false, onActiv
const { t } = useTranslation(); const { t } = useTranslation();
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
const [isDrawing, setIsDrawing] = useState(false); const [isDrawing, setIsDrawing] = useState(false);
const [signatureImage, setSignatureImage] = useState<File | null>(null);
const [canvasSignatureData, setCanvasSignatureData] = useState<string | null>(null); const [canvasSignatureData, setCanvasSignatureData] = useState<string | null>(null);
const [imageSignatureData, setImageSignatureData] = useState<string | null>(null); const [imageSignatureData, setImageSignatureData] = useState<string | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
@ -249,35 +248,35 @@ const SignSettings = ({ parameters, onParameterChange, disabled = false, onActiv
}; };
// Handle signature image upload // Handle signature image upload
const handleSignatureImageChange = (file: File | null) => { const handleSignatureImageChange = async (file: File | null) => {
console.log('Image file selected:', file); console.log('Image file selected:', file);
if (file && !disabled) { if (file && !disabled) {
try {
const result = await new Promise<string>((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
if (e.target?.result) { if (e.target?.result) {
console.log('Image loaded, saving to signatureData, length:', (e.target.result as string).length); resolve(e.target.result as string);
} else {
reject(new Error('Failed to read file'));
}
};
reader.onerror = () => reject(reader.error);
reader.readAsDataURL(file);
});
// Clear any existing canvas signatures when uploading image // Clear any existing canvas signatures when uploading image
setCanvasSignatureData(null); setCanvasSignatureData(null);
// Set the new image as the active signature // Set as active signature immediately
setImageSignatureData(e.target.result as string); setImageSignatureData(result);
// Don't call onParameterChange here - let the useEffect handle it
// Auto-activate placement mode after image upload } catch (error) {
setTimeout(() => { console.error('Error reading file:', error);
if (onActivateSignaturePlacement) {
onActivateSignaturePlacement();
} }
}, 100);
}
};
reader.readAsDataURL(file);
setSignatureImage(file);
} else if (!file) { } else if (!file) {
// Clear image signature when no file is selected // Clear image data when no file is selected
setImageSignatureData(null); setImageSignatureData(null);
// Don't call onParameterChange here - let the useEffect handle it
// Deactivate signature placement when image is removed // Deactivate signature placement when image is removed
if (onDeactivateSignature) { if (onDeactivateSignature) {
onDeactivateSignature(); onDeactivateSignature();
@ -346,6 +345,10 @@ const SignSettings = ({ parameters, onParameterChange, disabled = false, onActiv
} else if (parameters.signatureType === 'image') { } else if (parameters.signatureType === 'image') {
if (imageSignatureData) { if (imageSignatureData) {
onParameterChange('signatureData', imageSignatureData); onParameterChange('signatureData', imageSignatureData);
// Activate signature placement mode when image is ready
if (onActivateSignaturePlacement) {
onActivateSignaturePlacement();
}
} else { } else {
onParameterChange('signatureData', undefined); onParameterChange('signatureData', undefined);
} }
@ -356,7 +359,7 @@ const SignSettings = ({ parameters, onParameterChange, disabled = false, onActiv
// For draw mode, clear signature data // For draw mode, clear signature data
onParameterChange('signatureData', undefined); onParameterChange('signatureData', undefined);
} }
}, [parameters.signatureType, canvasSignatureData, imageSignatureData, onParameterChange]); }, [parameters.signatureType, canvasSignatureData, imageSignatureData]);
// Initialize draw mode on mount // Initialize draw mode on mount
React.useEffect(() => { React.useEffect(() => {
@ -598,11 +601,7 @@ const SignSettings = ({ parameters, onParameterChange, disabled = false, onActiv
label={t('sign.image.label', 'Upload signature image')} label={t('sign.image.label', 'Upload signature image')}
placeholder={t('sign.image.placeholder', 'Select image file')} placeholder={t('sign.image.placeholder', 'Select image file')}
accept="image/*" accept="image/*"
value={signatureImage} onChange={handleSignatureImageChange}
onChange={(file) => {
console.log('FileInput onChange triggered with file:', file);
handleSignatureImageChange(file);
}}
disabled={disabled} disabled={disabled}
/> />
<Text size="sm" c="dimmed"> <Text size="sm" c="dimmed">