How to Upload And Display File wwwroot Folder in .net core MVC

In this article, We will learn How to Upload your file in your .net core application root folder(wwwroot).

Write below code in your create.cshtml page.

<input type="file" id="fileInput" name="postedFile1" />
<input type="button" id="fileButton" value="Upload Files" />

Please check your jquery script included in _Layout.cshtml file.

<script src="~/lib/jquery/dist/jquery.js"></script>

Add below script in your create.cshtml page.

<script type="text/javascript">
    $(document).ready(function ()
    {
        UploadImages();
    });
    function UploadImages()
    {
        $("#uploadImg").hide();
        $("#fileButton").click(function () {
            var formData = new FormData();
            formData.append("postedFile1", $("#fileInput")[0].files[0]);
            $.ajax({
                type: "POST",
                url: "/Student/UploadFiles",
                dataType: "json",
                contentType: false,
                processData: false,
                data: formData,
                success: function (result, status, xhr) {
                    var iPhotoUrl = "/Upload/" + $("#fileInput")[0].files[0].name;
                    if ($('#uploadUpdateImage').attr('src') != undefined) {
                        $("#uploadUpdateImage").show();
                        $("#uploadUpdateImage").attr('src', iPhotoUrl);
                    }
                    else
                    {
                        $("#uploadUpdateImage").hide();
                        $('#uploadImg').attr('src', iPhotoUrl);
                        $("#uploadImg").show();
                    }
                },
                error: function (xhr, status, error) {
                }
            });
        });
    }
</script>

Write below code in your StudentController.cs

[HttpPost]
public JsonResult UploadFiles(IFormFile postedFile1)
{
            string wwwPath = this.webHostEnvironment.WebRootPath;
            string contentPath = this.webHostEnvironment.ContentRootPath;

            string pathPhoto = Path.Combine(this.webHostEnvironment.WebRootPath, "Upload");
            if (!Directory.Exists(pathPhoto))
            {
                Directory.CreateDirectory(pathPhoto);
            }
            string photoName = Path.GetFileName(postedFile1.FileName);
            using (FileStream stream = new FileStream(Path.Combine(pathPhoto, photoName), FileMode.Create))
            {
                postedFile1.CopyTo(stream);
            }
            return Json(new { Status = "success"});
}

Now, write below code in your create.cshtml file to display Image.

<input type="file" id="fileInput" name="postedFile1" />
<input type="button" id="fileButton" value="Upload Files" /><br />
@if (@Model.Photo != null)
{
       var iPhotoUrl = "/Upload/" + @Model.Photo;
       <img src="@iPhotoUrl" id="uploadUpdateImage" />
}
else
{
       <img src="/Upload/default-image.png" id="uploadImg" />
}