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.