Sending PDF from jsPDF to controller via ajax

Question

Guys how can I send the jsPDF file to the controller while also including the model. I believe I have to change the ajax data: piece, This however is eluding me. Any help would be appreciated.

Model:

public class PartialReportModel
{
    public List<ShiftReportDetail> ReportDetails { get; set; }
    public ShiftReport Report { get; set; }
    public byte[] testingImg { get; set; }
    public IFormFile pdf { get; set; }
    public List<UserListsForSignatures> ListOfNames { get; set; }
    public List<ProductCodes> ProductsList { get; set; }
    public List<EquipList> Equipment { get; set; }
    public List<CodeTable> CodeList { get; set; }
}

Controller:

    [HttpPost]
    public async Task<IActionResult> EditReport(PartialReportModel model,IFormFile Test)
    {
        // do something else here with pdf and model
        return Json(1);
    }

JS:

$(document).on("click", "#SubmitReportEdits", function () {
var pdf;
html2canvas(document.querySelector("#mod1")).then(canvas => {
    var imgData = canvas.toDataURL(
        'image/png');
    var doc = new jsPDF('p', 'mm', 'a4', true);
    var width = doc.internal.pageSize.width;
    var height = doc.internal.pageSize.height;
    doc.addImage(imgData, 'PNG', 10, 10, width - 20, height - 10);
    pdf = doc.output('blob');
    //doc.save('test.pdf');
});
// ajax the thing
$.ajax({
    type: "POST",
    url: $("#EditReportForm").attr("action"),
    data: $("#EditReportForm").serialize() + "&Test="+pdf,
    success: function () {
        // close the modal
        // reload the table
        $('#ReviewReport').modal('toggle');
        $('#NotificationDiv').append( // change
            "<div class='alert alert-success alert-dismissible fade show' role='alert'> 
        " + "Report has been edited. Thank you." +
            "<button type='button' class='close' data-dismiss='alert' aria- 
        label='Close'>" + "<span aria-hidden='true'>&times;</span>" + "</button>" + " 
        </div>"
        );
     }
  });
});

Currently I can see my model stuff but the pdf side is null.

Answer 1

Because we all have deadlines:/, I am going to use this method to work this for now until a better answer comes along.

First is to convert the file to a base64 string, Then set that to a value inside the form. Have a hidden input to receive the value. This case string pdf. Then pass it along the ajax. We now see the value in the controller side. Also have to use jpeg as PNG was too large a file and was getting 413 server errors. Code_debt++

model:

public string pdf { get; set; }

HTML5:

<input asp-for="pdf" hidden/>

Javascript:

$(document).on("click", "#SubmitReportEdits", function () {
html2canvas(document.querySelector("#mod1")).then(canvas => {
    var imgData = canvas.toDataURL(
        'image/jpeg');
    var doc = new jsPDF('p', 'mm', 'a4', true);
    var width = doc.internal.pageSize.width;
    var height = doc.internal.pageSize.height;
    doc.addImage(imgData, 'jpeg', 10, 10, width - 20, height - 10);
    var pdf = doc.output('datauristring').slice(28); // wipe first28chars
    //saving the base64
    $('#pdf').val((pdf));
    // ajax the  thing
    $.ajax({
        type: "POST",
        url: $("#EditReportForm").attr("action"),
        data: $("#EditReportForm").serialize(),
        success: function () {
            // close the modal
            // reload the table
            $('#ReviewReport').modal('toggle');
            $('#NotificationDiv').append( // change
                "<div class='alert alert-success alert-dismissible fade show' role='alert'> " + "Report has been edited. Thank you." +
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>" + "<span aria-hidden='true'>&times;</span>" + "</button>" + "</div>"
            );
        }
    });
  });
 });

Controller Side: