How to pass uploaded image path to controller via ajax

Question

When passing uploaded file through ajax to asp.net MVC controller, file property is showing null value in controller.

image file object taken by document.getElementById('fileUpload').files[0] action and convert to JSON.stringify(fileName) but when pass that object to asp.net mvc controller it is showing null value in mvc controller.

please if any one know how to pass that file to ajax to mvc controller, please post your answer

Admin controller

[HttpPost]
        public string AddRetailer(HttpPostedFileBase file, string storeName, string storeUrl, string ecommercePlatform)
        {
            try {
                Bswayed.Admin.Retailer retailer = new Bswayed.Admin.Retailer();
                return JsonConvert.SerializeObject(data);
            } catch (Exception ex) {
                throw ex;
            }
        }

Asp.net upload form

 <input type="file" id="fileUpload" name="fileUpload" onchange="this.parentNode.nextSibling.value = this.value"/>Browse

<input class="input-lg"  
@Html.TextBoxFor(Model => Model.StoreLogo, new { placeholder=@ViewBag.StoreLogo})

Java script(Ajax)

 function AddRetailer()
 {    
     try {  
       var storeName = $("#StoreName").val();
       var storeUrl = $("#StoreURL").val();
       var retailerLogoPath = $("#StoreLogo").val();
       var ecommercePlatform = $("#EcommercePlatform").val();
       var fileName = document.getElementById('fileUpload').files[0]

       $.ajax({         
           url: $("#addRetailer").val(),
           cache: false,
           type: "POST",         
           data: { 
            file:JSON.stringify(fileName), 
            storeName: storeName, 
            storeUrl: storeUrl, 
            ecommercePlatform: ecommercePlatform 
           },
           dataType: "json",
           success: function (data) {                          
           },
           error: function (resp) {
               alert(resp);
           }
       });
     }
     catch (e) {
     }
 }

Did you saw http://stackoverflow.com/questions/20447967/phantomjs-upload-a-file-without-submitting-a-form ? — Serge K., Mar 09 '14 at 09:39

score 0 · Answer 1 · answered Jun 21 '15 at 11:13

You don't need to stringfy uploaded image path. Below code is working in my application. I just used FormData() to get all form. After that added all items in form that i want to send to controller. In this case, you don't need to pass parameter in controller. You can get by Request.Files for image & Request.Form for extra data. I hope, It may helps you. If there is any wrong, then share with me, i will sort it out.

Java Script -

function AddRetailer()
{    
 try {  
   var storeName = $("#StoreName").val();
   var storeUrl = $("#StoreURL").val();
   var retailerLogoPath = $("#StoreLogo").val();
   var ecommercePlatform = $("#EcommercePlatform").val();
   var fileName = document.getElementById('fileUpload')..get(0).files;

   var data = new FormData();
   if (fileName.length > 0) {
        data.append("userUploadedImage", fileName[0]);
        data.append("storeName", storeName);
        data.append("storeUrl", storeUrl);
        data.append("ecommercePlatform", ecommercePlatform);
    }


   $.ajax({         
       url: $("#addRetailer").val(),
       processData: false,
       contentType: false,
       type: "POST",         
       data: data,
       success: function (data) {                          
       },
       error: function (resp) {
           alert(resp);
       }
   });
 }
 catch (e) {
 }}

Controller -

    [HttpPost]
    public string AddRetailer()
    {
     HttpPostedFileBase image =  Request.Files["userUploadedImage"];
     string storeName = Request.Form["storeName"];
     string storeUrl = Request.Form["storeUrl"];
     string ecommercePlatform = Request.Form["ecommercePlatform"];
    }

How to pass uploaded image path to controller via ajax

1 Answers1