Question 69946 in Ajax Question posted in
You can find the official documentation here.

How to send the file name and a file from Ajax to my controller in one ajax request? – Jquery ajax

There is an input(text) in my page so users can insert the name of the file and upload the file itself, then press on Upload button.

I want to send the selected file and its name from input(text) to my controller in one ajax request.

How does it work ?

Here is the HTML Code:

<!--This is my upload section-->
<div class="custom-file col-md-4">
    <input type="file" class="custom-file-input" id="theFile" required="">
    <label class="custom-file-label" for="theFile"></label>
</div>

<!--This is my input section-->
<div class="col-sm-3">
    <div class="form-group">
        <label for="fileName">Enter the file name: </label>
        <input type="text" class="form-control" id="fileName" placeholder="">
    </div>
</div>

Here is what I tried for Ajax Code which doesn’t work:

    var formData = new FormData();
    formData.append('upload', $('#questionFile')[0].files[0]);

    $.ajax({      
         url:'the url of my controller is here',
         type: 'POST',
         data: {
                'file' : formData,
                'fileName' : $("#fileName").val()
               },
         cache: false,
         processData: false,
         contentType: false
     })

Here is my method in my controller:

    [HttpPost("getFile")]
    [AllowAnonymous]
    public IActionResult getFile(IFormFile file,string fileName)
    {

        //This is a method in my service project which uploads file
        SaveQuestionFile(file, fileName);


        return Ok("Uploaded");
    }
Tags:

2

Answers


  1. 0

    In Jquery pass the file using FormData

    var fileData = new FormData();
var fileUpload = $("#fileId").get(0).files;
fileData.append("FILE", fileUpload[0]);
$.ajax({
    type: "POST",
    contentType: false,
    processData: false,
    url: "url here",
    data: fileData,
    success: function (result) {
    },
    error: function (data) {
    },
    complete: function () {
    }
});

    In C# get file from request and data which is appended

    public IActionResult getFile()
{
   List<IFormFile> files = (List<IFormFile>)Request.Form.Files;
   //if multiple
   foreach (IFormFile file in files)
   {
     string fileName = file.FileName;
   }
}
    Login or Signup to reply.
  2. 0

    You need to add a file which name is file,and add a FileName which name is fileName to formData,so that you can get the file and filename in action:

     var formData = new FormData();
 formData.append('file', $('#theFile').get(0).files[0]);
 formData.append('fileName', $("#fileName").val());
 $.ajax({
     type: "POST",
     url: "the url of my controller is here",
     data: formData,
     processData: false,
     contentType: false,
     success: function (data) {
     }

 });

    result:
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search