How to pass pdf file to Controller that requires IFormFile

Question

I've been working on this the whole day and did my research already, I can't seem to find a solution anywhere. I have this function that calls a List in my controller, the List needs a IFormFile parameter, here's my javascript method

function fileUploader_uploaded(e) {
        const file = e.file;
        const fileReader = new FileReader();
        fileReader.onload = function () {
            toggleDropZoneActive($("#dropzone-external")[0], false);
            $("#dropzone-item")[0].data = fileReader.result;
        }
        fileReader.readAsDataURL(file);
        const _fileReader = new FileReader();
        var r = _fileReader.readAsBinaryString(file);

        $("#dropzone-text")[0].style.display = "none";
         $.ajax({
             url: '@Url.Action("_Index", "FileUploader")',
             data: { CFile: r},  // I'm trying to pass the pdf file here
            cache: false,
            success: function (data) {
                console.log(data);
            }
        });
    }

and this is my List in controller

 public object _Index(IFormFile CFile)
            {
                if (CFile != null)
                {
                    try
                    {
                        string documentText = "";
                        using PdfDocumentProcessor documentProcessor = new PdfDocumentProcessor();
                        documentProcessor.LoadDocument(CFile.OpenReadStream());
                        documentText = documentProcessor.Text;
                        string word = @"([0-9]+.[0-9]+-[0-9]+)";
                        Regex regex = new Regex(word);
                        foreach (Match match in regex.Matches(documentText))
                        {
                            sectionsList.Add(match.Value.ToString());
                        }
                    }
                    catch
                    {
                        Response.StatusCode = 400;
                    }              
                }
                else
                {
                    _logger.LogInformation("empty");
    
                }
    
                return sectionsList;
            }

the CFile is always empty i tried different ways already like passing

data: { CFile: e.file}

Does anyone else have idea?

Answer 1

From this code data: { CFile: e.file}, you post it as the string, so it can not be recognized as a file. You need to use FormData and change the contentType.

function fileUploader_uploaded(e) {
    const file = e.file;
    const fileReader = new FileReader();
    fileReader.onload = function () {
        toggleDropZoneActive($("#dropzone-external")[0], false);
        $("#dropzone-item")[0].data = fileReader.result;
    }
    fileReader.readAsDataURL(file);
    const _fileReader = new FileReader();
    var r = _fileReader.readAsBinaryString(file);

    $("#dropzone-text")[0].style.display = "none";

     //----------edit here---------
     var form = new FormData()
        form.append('CFile', file)
        $.ajax({
            url: '@Url.Action("_Index", "FileUploader")',
            method:'post',
            data: form,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                
            }
        });
}

The bakend should add [FromForm].

 [HttpPost]
 public object _Index([FromForm]IFormFile CFile)