Signature

[Rakesh]

<div class="signature-container">
    <p>Add a Signature to your existing PDF files.</p>

    <!-- Toggle buttons -->
    <div class="mb-2">
        <label>
            <input type="radio" name="signatureOption" value="draw" checked /> Draw Signature
        </label>
        <label class="ml-3">
            <input type="radio" name="signatureOption" value="upload" /> Upload Image
        </label>
    </div>

    <!-- Kendo Signature -->
    <div id="drawSignatureWrapper">
        <div class="signature-wrapper">
            @(Html.Kendo().Signature()
                                            .Name("signature")
                                            .Maximizable(false)
                                            .Color("#4040b7")
                                            .Smooth(true)
                                            .HideLine(true)
                                            )
        </div>
        <div class="notes">
            Add your Signature and Export the PDF File
        </div>
    </div>

    <!-- File upload -->
    <div id="uploadWrapper" style="display:none;">
        @(Html.Kendo().Upload()
                                    .Name("signatureUpload")
                                    .Async(a => a
                                    .Save("Async_Save", "SigningPdf")
                                    .Remove("Async_Remove", "SigningPdf")
                                    .AutoUpload(false)
                                    )
                                    .Multiple(false)
                                    .HtmlAttributes(new { accept = ".jpg,.jpeg,.png" })
                                    .Validation(val => val.AllowedExtensions(new string[] { ".jpg", ".jpeg", ".png" }))
                                    )


    </div>

    <div id="bottomtoolbar"></div>
</div>

 

///

 $("#bottomtoolbar").kendoToolBar({
     items: [
         {
             type: "button",
             text: "Place Your Signature",
             primary: true,
             icon: "save",
             click: exportToPdf
         }
     ]
 });

////

function exportToPdf(e) {
    toggleKendoLoader("show");

    const option = $("input[name='signatureOption']:checked").val();

    if (option === "draw") {
        const signature = $("#signature").getKendoSignature();
        kendo.drawing.drawDOM(".k-signature-canvas > canvas")
            .then(group => kendo.drawing.exportPDF(group))
            .done(refreshPdfViewer);
    }
    else if (option === "upload") {
        // ✅ Access file directly from upload input
        const fileInput = $("#signatureUpload").closest(".k-upload").find("input[type=file]")[0];
        if (!fileInput || !fileInput.files.length) {
            toggleKendoLoader("hide");
            alert("Please select an image first.");
            return;
        }

        const file = fileInput.files[0];
        //console.log("Selected file:", file);

        const reader = new FileReader();

        reader.onload = function (evt) {
            //console.log("Reader loaded:", evt);
            const img = new Image();
            img.src = evt.target.result;

            img.onload = function () {
                //console.log("Image loaded:", img);
                const canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);

                kendo.drawing.drawDOM(canvas)
                    .then(group => kendo.drawing.exportPDF(group))
                    .done(refreshPdfViewer);
            };
        };

        reader.onerror = err => {
            toggleKendoLoader("hide");
            console.error("FileReader error:", err);
        };

        reader.readAsDataURL(file);
    }
}

///

public string PreparePdf(string pdfData)
{
    byte[] resultingBytes = null;
    byte[] finalBytes = null;

    PdfFormatProvider provider = new PdfFormatProvider();
    byte[] renderedBytes = Convert.FromBase64String(pdfData);

    RadFixedDocument document1 = null;
    RadFixedDocument document2 = provider.Import(renderedBytes, new TimeSpan(0, 1, 0));  //signature selected

    string[] pathPartsArr = new string[] { "wwwroot", "Uploads", "TemporaryFiles", "F7.pdf" };
    string filePath = Path.Combine(pathPartsArr);

    using (FileStream input = new FileStream(filePath, FileMode.Open, FileAccess.Read))
    {
        document1 = provider.Import(input, new TimeSpan(0, 1, 0));
    }

    using (MemoryStream ms = new MemoryStream())
    {
        provider.Export(document1, ms, new TimeSpan(0, 1, 0));
        resultingBytes = ms.ToArray();
    }

    finalBytes = AppendContent(resultingBytes, document2);
    string result = Convert.ToBase64String(finalBytes);

    return result;
}

private byte[] AppendContent(byte[] resultingBytes, RadFixedDocument document2)
{
    RadFixedPage foregroundContentOwner = document2.Pages[0];

    MemoryStream ms = new MemoryStream();
    byte[] renderedBytes = null;
    using (MemoryStream stream = new MemoryStream(resultingBytes))
    {
        using (PdfFileSource fileSource = new PdfFileSource(stream))
        {
            using (PdfStreamWriter fileWriter = new PdfStreamWriter(ms, true))
            {
                foreach (PdfPageSource pageSource in fileSource.Pages)
                {
                    using (PdfPageStreamWriter pageWriter = fileWriter.BeginPage(pageSource.Size, pageSource.Rotation))
                    {
                        pageWriter.WriteContent(pageSource);

                        using (pageWriter.SaveContentPosition())
                        {
                            double xCenteringTranslation = (pageSource.Size.Width - foregroundContentOwner.Size.Width) - 320;
                            double yCenteringTranslation = (pageSource.Size.Height - foregroundContentOwner.Size.Height) - 110;
                            pageWriter.ContentPosition.Translate(xCenteringTranslation, yCenteringTranslation);
                            pageWriter.WriteContent(foregroundContentOwner);
                        }
                    }
                }
            }
        }
    }
    renderedBytes = ms.ToArray();
    return renderedBytes;
}

 

Question & help needed :

I have implemented signature model using existing signature modal its working fine.

When i try upload upload a file and then try to patch that sign in pdf its not working. I am not uploading file fully just selecting file and after click on <Place Your Signature> calling exportpdf.

       

[Ivaylo]

Hello Rakesh,

Thank you for the details provided.

To better understand and troubleshoot the issue you're experiencing, could you please provide an isolated, runnable project where the problem can be reproduced?

Having a reproducible example will help us dive deeper and offer a more accurate and effective solution.

Looking forward to your reply.

Kind Regards,
Ivaylo
Progress Telerik