Save image from browser memory to server

Question

I followed solution from this question Preview an image before it is uploaded to show preview of images users want to submit to my website.

I have this code that shows image preview on page

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

and form with some additional data.

My question is, how to save image to a /uploads/ folder of my webapp when user click on submit form button? I don't need to save image in database, but on web server in folder.

Answer 1

In the POST action of your controller, you may access the InputStream in the Request object and then copy the InputStream of the Posted File to a File Stream. Here's a sample code.

foreach (string item in Request.Files)
{
    HttpPostedFileBase file = Request.Files[item];
    string imagePath = Path.Combine(Server.MapPath("~/Uploads"), file.FileName);
    using(FileStream fs = File.Create(imagePath)
    {
        file.InputStream.CopyTo(fs);
    }
}