How to upload image in folder using AJAX in ASP.NET CORE?

Question

1.00/5 (1 vote)

See more:

Hi guys how can i upload an image to my folder using AJAX in MVC

This is my View:

ASP.NET

<pre lang="ASP.NET"><pre>   <div class="pb-2 shadow" style="background-color: gray;  height: 150px; width: 150px ; position:relative; align-self:center" id="employee-pic-preview">
                            <img src="#" alt="Employee Pic" style="height:inherit;width:inherit" id="employeepic" />
                        </div>

And this is my ModulesController:

ASP.NET

<pre>  [HttpPost]
        public ActionResult UploadFiles(HttpPostedFileBase employeepic)
        {
            if (employeepic != null)
            {
             
                string path = @"\\13.10.12.67\AQSImages\IdPictures\";
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }
                employeepic.SaveAs(path + Path.GetFileName(employeepic.FileName));
            }
            return View();
        }

and this is my AJAX code:

JavaScript

EmployeeManager.UploadFiles = function () {
    var fileUpload = $("#employeepic");
    var files = fileUpload.files;

    // Create  a FormData object
    var fileData = new FormData();
    fileData.append(files[i].name, files[i]);
    $.ajax({
        url: '/Modules/UploadFiles', //URL to upload files 
        type: "POST", //as we will be posting files and other method POST is used
        processData: false, //remember to set processData and ContentType to false, otherwise you may get an error
        contentType: false,
        data: fileData,
        success: function (result) {
            alert(result);
        },
        error: function (err) {
            alert(err.statusText);
        }
    });
}

What I have tried:

https://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681

Posted 13-Jun-22 11:55am

Ramon Ortega Jr

Updated 14-Jun-22 3:56am

Add a Solution

Comments

Graeme_Grant 13-Jun-22 18:47pm

We can not see from your question above what is happening, nor can we see your screen from here.

You need to update your question with what happens - Was there an error? Is the Controller being called from the Ajax code? Does the Ajax code send anything?

A quick look at the SO answer and your code, you are not explicitly following what is said. I would be setting a breakpoint there and see exactly what is happening.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2022-06-14T03:56:00

Quote:

JavaScript

fileData.append(files[i].name, files[i]);

You are using an undeclared variable i. Unless you've declared that somewhere else, it will be undefined, so you will get a reference error. And if you have declared it somewhere else, it almost certainly doesn't contain the value you expect it to contain.

Also, fileUpload is a jQuery object, which doesn't contain a files property. So that won't work either.

And based on your markup, employeepic is an <img>, not an <input type="file">.

Start by fixing your code:

HTML

<input type="file" id="employeepic" name="employeepic">

JavaScript

const fileUpload = document.getElementById("employeepic");
const files = fileUpload.files;

// Create  a FormData object
const fileData = new FormData();
fileData.append(fileUpload.name, files[0]);

If it still doesn't work, then check your browser's developer console for errors. If there are none, check the network requests tab to examine precisely what you are sending to the server.

How to upload image in folder using AJAX in ASP.NET CORE?

1 solution

Solution 1

Add your solution here

Preview 0

How to upload image in folder using AJAX in ASP.NET CORE?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us