Upload File Outside of wwwroot Asp.Net Core MVC 8 in C#.Net

In today's article I will show you a simple tutorial with example to upload the file in asp.net core mvc using c#.net outside wwwroot folder with model class property IFormFile . Here I have used input file control to browse the file and will capture the uploaded file in controller in IFormFile interface at controller on submit. Here we will not upload file in wwwroot folder, instead we will create a folder in project in asp.net core mvc application.

Folder in Project Asp.Net Core MVC C#.Net

I have already shown you to upload the file in wwwroot folder in asp.net core 8 mvc but in this article I will show you how you can upload a file in folder which is outside the wwwroot folder. Here in this article also I am going to use asp.net core 8 mvc with c#.net.

Now for this article first we will create a new asp.net core mvc application and add a model class file in the model folder.

public class FileModel
{      
    public IFormFile File { get; set; }
    public string FileName { get; set; }
}

In above model class file named as file model I have added two property first is of IFormFile type and second is of string type. We will store the file name in this and display in view. Now let's create a controller file name as HomeController. In this we will add a HttpGet method.

[HttpGet]
public IActionResult Index()
{
    FileModel fileModel = new FileModel();
    return View(fileModel);
}

In above HttpGet method I have created the object of FileModel and pass it to view. Now let's create the view and add the below code in the view.

@model FileModel
@{
    ViewData["Title"] = "Home Page";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @enctype = "multipart/form-data" }))
{
    <div style="color:red">@ViewBag.Message </div>
    <div style="font-weight:bold;">Select File:</div>
    <div>
        <input type="file" class="form-control" name="file" />
    </div>
    <br />
    <div><input type="submit" value="Upload File" /></div>
    <b>UPLOADED FILE NAME</b>
    <div style="color:brown">@Model.FileName</div>
}

In above code I have added the model class named as FileModel. after that I have used Html.BeginForm to add the form tag. In this we need to add form tag propertieed like controller name, action name FormMethod and its attribute. In this I have added "@enctype = "multipart/form-data". This is the most important piece of the view code. If we don't add this attribute on click on submit button, we will not get the uploaded file detail at controller end. Here enctype describe the encode type of the form data when user post the data to server. ViewBag have been used to display the message to user.

In next step I have added the input control of file type to get the fileupload control and input of submit type to get submit button control. At last, I have displayed the uploaded file name. Now let's create the HttpPost method and add the below code.

[HttpPost]
public IActionResult Index(FileModel fileModel)
{
    if (fileModel.File != null)
    {
        try
        {
            string parentPath = @"Demofolder\";
            string uploadfilepath = Path.Combine(Directory.GetCurrentDirectory(), parentPath, fileModel.File.FileName);
            var filestream = new FileStream(uploadfilepath, FileMode.Create);
            fileModel.File.CopyToAsync(filestream);
            string dbSaveUploadPath = string.Format("{0}{1}", @"\Demofolder\", fileModel.File.FileName);
            fileModel.FileName = fileModel.File.FileName;
            ViewBag.Message = "File uploaded successfully.";
        }
        catch (Exception ex)
        {
            ViewBag.Message = ex.Message;
        }
    }
    else
    {
        ViewBag.Message = "Please select file to upload.";
    }
    return View(fileModel);
}

In above HttpPost method I have passed the model class FileModel as a parameter. After that to avoid the error, I have added a validation the is user have not selected the file he will get and error message. In next step I have defined the folder where we want to upload the file, and which is p[resent in project not in wwwroot.

Warning! Give the upload folder path as give in code "@"Demofolder\"". If you have subfolder you need to define as "@"Demofolder\subfolder1"."

Here I have used Path.Combine to prepare the upload file path. After that I have taken FileStream to prepare the upload file stream instance. in file stream object i have passed the upload file path and the FileMode as Create. This will create the instance of the file on the given path. At the end CopyToAsync to copy the file to the directory. To provide the saved path for file in database. In end user view message have been stored in the ViewBag to display on page to user. Now we have done let's run the code to check the output.