Multiple file upload in asp.net core using ajax on selection

Question

Am new to asp.net core, I want to upload multiple files on user file selection with ajax in asp.net core. I use razor page with input file tag.

I follow each step of this article https://codepedia.info/ajax-file-upload-aspnet-core-razor-pages

I am able to call file selection event, but jquery ajax function not getting call, no debug on server side code hence no file upload. not single file upload. my code is not go in debug mode.

CODE

   $("#fileUpload").on('change', function () {

                var files = $('#fileUpload').prop("files");                
                var url = "/Index?handler=MyUploader";
                formData = new FormData();
                formData.append("MyUploader", files);              
               
                jQuery.ajax({
                    type: 'POST',
                    url: url,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    success: function (repo) {
                        if (repo.status == "success") {
                            alert("File : " + repo.filename + " is uploaded successfully");
                        }
                    },
                    error: function (data) {

                        console.log(data);
                    }
                });
            });

ERROR SCREENSHOT

 public IActionResult OnPostMyUploader(IFormFile MyUploader)
        {
            if (MyUploader != null)
            {
                string uploadsFolder = Path.Combine(webHostEnvironment.WebRootPath, "mediaUpload");
                string filePath = Path.Combine(uploadsFolder, MyUploader.FileName);
                using (var fileStream = new FileStream(filePath, FileMode.Create))
                {
                    MyUploader.CopyTo(fileStream);
                }
                return new ObjectResult(new { status = "success" });
            }
            return new ObjectResult(new { status = "fail" });
    
        }

your function gets called and the returned code 400 means something wrong with the request data. You should update the question with your page handler MyUploader detail. — Hopeless
– Hopeless, Commented Dec 22, 2020 at 9:27
this kind of error can have its detail reported fairly well in the debugging console (the Output window). You should have a look in that window first. I doubt that the XSRF-TOKEN is not the right header for your antiforgery token. As in my recent project, I use RequestVerificationToken instead. Looks like it changes through different versions of asp.net core — Hopeless
– Hopeless, Commented Dec 22, 2020 at 9:34
@sabsudo Did you set services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN"); in ConfigureServices. — mj1313
– mj1313, Commented Dec 22, 2020 at 9:36
am using aspnet core 3.1 version, you want me to use RequestVerificationToken instead of XSRF-TOKEN — sabsudo
– sabsudo, Commented Dec 22, 2020 at 9:37

mj1313 · Accepted Answer · 2020-12-25 02:14:50Z

1

The AntiForgeryToken is a hidden input auto-generated by a post form tag. At first, I have a form in the page, so I didn't add @Html.AntiForgeryToken() and it also worked. If there is no form in the page, then you should add @Html.AntiForgeryToken() to generate it.

answered Dec 25, 2020 at 2:14

mj1313

8,5172 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

letie · Accepted Answer · 2022-12-19 12:47:20Z

0

As it is said in the comments. If you do not have a form tag in your page, for security reasons you need to protect from CSRF attacks, so you need to implement AddAntiforgery in your files.

There are three key things you need to add:

public void ConfigureServices(IServiceCollection services)
{
    services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");  //---> this line in Startup.cs class
    ...
}

The following beforeSend method inside the ajax call:

...
beforeSend: function (xhr) {
   xhr.setRequestHeader("XSRF-TOKEN",
       $('input:hidden[name="__RequestVerificationToken"]').val());
},
...

And the following at the top of your razor page:

@Html.AntiForgeryToken()

answered Dec 19, 2022 at 12:47

letie

8922 gold badges11 silver badges25 bronze badges

Collectives™ on Stack Overflow

Multiple file upload in asp.net core using ajax on selection

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related