Question Posting base64 from Url.Action to Controller

[ns1777771]

Hello

I am trying to pass a base64 string or byte array from a URL action to a controller. Im unsure if I'm going about this the right way so ill explain what I am trying to achieve.

The application will have an option to allow users to preview a file in the file system. I am using a plug in called GroupDocs.Conversion which will flatten any file format to a pdf. I am then using this PDF to populate an Iframe.

Originally I was using a URL action to populate the iframe by passing in the file name and returning the FileResult.All of this was working fine but depending on the file size and type it can take a while to load the preview so I wanted to have a loading spinner.

To do this I started a spinner and then passed the file name with Ajax to the controller to flatten the pfd and return bytes/base64. During this process, the spinner would be loading as this is what can take a while. On return, it would use a URL action to populate the iframe with the returned data.

My issue is whenever I try to call the URL action it says it cannot find the controller/action.

$('.loader').show()

$.ajax({
    type: "POST",
    url: "/Home/DownloadDocument/",
    data: '{"caseNumber":"' + casenum + '","fileName":"' + name + '"}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        alert(encodeURIComponent(response.file))
        $('#previewFrame').attr('src', '@Html.Raw(@Url.Action("ViewDocument","Home"))?documentBase=' +encodeURIComponent(response.file) + '&fileName=' + name);

        $('.loader').hide();
    }
});

[HttpPost]
public JsonResult DownloadDocument(string caseNumber, string fileName)
{
    var bytes = _file.CreatePDFPreview(_helper.FilePath(caseNumber, fileName));
    string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);

    return Json(new { file = base64String });
}

[HttpGet]
public FileResult ViewDocument(string documentBase, string fileName)
{
    //Stream stream = new MemoryStream(documentBase);

    return File(documentBase, fileName, "application/pdf");
}

 

[jmcilhinney]

I have used appropriate tags to format your code snippets. Please format all code snippets appropriately for readability.

 

[jmcilhinney]

Moved to the ASP.NET General forum, as this issue has nothing particularly to do with the .NET Framework.

 

[Skydiver]

Why is there a trailing slash at the end of the URL on line 5?

 

[ns1777771]

Why is there a trailing slash at the end of the URL on line 5?

that is a typo however the ajax is hitting that action fine

 

[jmcilhinney]

That success function is getting executed on the client, so Razor code is not going to be executed, so your attempts to execute Html.Raw and Url.Action will never happen. You need to provide a literal URL there.

 

[ns1777771]

That success function is getting executed on the client, so Razor code is not going to be executed, so your attempts to execute Html.Raw and Url.Action will never happen. You need to provide a literal URL there.

Thank you for your reply.

I have changed the code to the following and is working now

        [HttpPost]
        public JsonResult DownloadDocument(string caseNumber, string fileName)
        {

            var bytes = _file.CreatePDFPreview(_helper.FilePath(_helper.CaseNameDash(caseNumber), fileName));
            string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
            return Json(new { file = "data:application/pdf;base64," + base64String });

        }

       $('.loader').show()

                 $.ajax({
                     type: "POST",
                     url: "/Home/DownloadDocument",
                     data: '{"caseNumber":"' + casenum + '","fileName":"' + name + '"}',
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     success: function (response) {

                         document.getElementById('previewFrame').src = response.file;

                         $('.loader').hide();
                     }
                 });