Benny Sutton is 4 hire - just click here

Using JavaScript FormData to upload an image to MVC

How to overwrite an image using FormData and MVC.

You don't need to post an entire form to just change an image associated with a database record. Like when you want a user to be able to change their avatar. Just use FormData to upload an image.

The FormData interface provides a way to easily construct a form object with javascript - allowing a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

First add a file upload HTML field (id = UploadedFile) and a button (id = btnUpload). Then add this javaScript in a script block.

             
         $(document).ready(function () {
            $('#btnUpload').click(function () { // event listener for the upload button
                // Checking whether FormData is available in browser - all modern browsers do support it!
                if (window.FormData !== undefined) {

                    var fileUpload = $("#UploadedFile").get(0);
                    var files = fileUpload.files;

                    // Create FormData object
                    var fileData = new FormData();

                    // Looping over all files and add it to FormData object
                    // redundant in our case as only one image per record - but here's how you would do it if you want more
                    for (var i = 0; i < files.length; i++) {
                        fileData.append(files[i].name, files[i]);
                    }

                    // if you do need to add another key to FormData object, do it like this...
                    // fileData.append('name', ‘Ben’);

                    $.ajax({
                        url: '/Images/OverwriteImage/' + $("#imageId").val(), // my MVC controller - change to your needs
                        type: "POST",
                        contentType: false, // Not to set any content header
                        processData: false, // Not to process data
                        data: fileData,
                        success: function (result) {
                            alert(result); 
                            // this will pop up an alert on the client browser when Json is returned
                        },
                        error: function (err) {
                            alert(err.statusText);
                        }
                    });
                } else {
                    alert("FormData is not supported.");
                }
            });
        });
       
    

MVC You do need to write a new action in your MVC controller which contains all the logic to figure out the filename and where to save it but that's included here too. Oh, and that also provides the authorisation check too.

             
        [HttpPost]
        [Authorize(Roles = "Admin")]
        public ActionResult OverwriteImage(int? id)
        {
            // you can open a db table if you need to like this...
            Image image = db.Images.Find(id);

            if (Request.Files.Count > 0)
            {
                try
                {


            
                     // place you logic here i.e. filename and path to save to



                    // change any record fields you need to here like this... 
                    // image.SourceFilename = fName;
                    db.SaveChanges();
                    // returning Json pops up an alert on the client - like magic!
                    //see JavaScript function (result)
                    return Json("File Replaced Successfully! Refresh page to see changes");
                }
                catch (Exception ex)
                {
                    return Json("Error occurred. Error details: " + ex.Message);
                }
            }
            else
            {
                return Json("No files selected.");
            }
        }