How can I connect the frontend inputs with the WebViewer when uploading a PFX file and entering the password to display a secure, verified digital signature?
I am specifically referring to digital signatures using a DSC (USB-based). Additionally, how can the other details, such as location, reason, and contact information, be displayed when clicking on the digital signature?
I have created a sidebar in my React.js frontend that includes options to:
- Upload a PDF
- Upload a digital ID (PFX file)
- Input the password
- Provide additional details such as location, reason, and contact information for digital signing using a DSC (USB-based).
Could you guide me on how to integrate these inputs with PDFTron WebViewer to ensure the signature is securely applied and verified?
and for your reference i uploaded the video please check it out and i want to achieve this functionality in my code and i also created the side panel for that but i am not getting how i can interact with and here are my functions and code so you can see it .
useEffect(() => {
if (instance) {
loadPdfFromStorage();
}
}, [instance, loadPdfFromStorage]);
// Function to handle file upload
const handleFileUpload = (event) => {
const file = event.target.files[0];
if (file && instance) {
const reader = new FileReader();
reader.onload = function (e) {
const pdfData = arrayBufferToBase64(e.target.result);
localStorage.setItem(“uploadedPDF”, pdfData); // Save as Base64
const pdfBlob = base64ToBlob(pdfData, “application/pdf”);
const fileUrl = URL.createObjectURL(pdfBlob);
instance.UI.loadDocument(fileUrl, { filename: file.name });
};
reader.readAsArrayBuffer(file);
}
};
const fileInputRef = useRef(null);
const handleDigitalIdUpload = (event) => {
const file = event.target.files[0];
if (file) {
console.log(“File Details:”, {
name: file.name,
size: file.size,
type: file.type,
lastModified: new Date(file.lastModified).toLocaleString(),
});
}
};
const handleButtonClick = () => {
fileInputRef.current.click();
};
// Function to convert ArrayBuffer to Base64
const arrayBufferToBase64 = (buffer) => {
let binary = “”;
const bytes = new Uint8Array(buffer);
bytes.forEach((b) => (binary += String.fromCharCode(b)));
return btoa(binary);
};
// Function to convert Base64 to Blob
const base64ToBlob = (base64, mimeType) => {
const byteCharacters = atob(base64);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
return new Blob([byteArray], { type: mimeType });
};
const handleInputChange = (event) => {
const { name, value } = event.target;
setSignatureInfo((prev) => ({ …prev, [name]: value }));
};
const handleApplySignature = () => {
console.log(“Digital ID File:”, digitalIDFile);
console.log(“Password:”, digitalIDPassword);
console.log(“Signature Info:”, signatureInfo);
};
I also upload the video sample what i want, also upload the screen shot of my code output and the above is the UI code of mine so you will get better idea please help sir i am very worried about that kindly help me .
