Click here to Skip to main content
15,390,997 members
Please Sign up or sign in to vote.
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
Updated 14-Jun-22 3:56am
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

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.
   
Comments
Ramon Ortega Jr 14-Jun-22 16:24pm
   
Thank you very much sir this it works !!!!! Thank you!!

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900