Design and Developing Application in Cloud (CT071-3-3-DDAC) Upload file in ASP .

Net Core

Lab 6: Upload file in ASP .Net Core

This topic demonstrate how to upload files in ASP .Net Core.

Prerequisites

Visual Studio 2019 with the following workloads:

 ASP.NET and web development

 .NET Core cross-platform development

.NET Core 3.1 SDK or later

Open the previous Lab 5 project, and continue to steps in Lab 6.

Level 3 Asia Pacific University of Technology & Innovation Page 1 of 11

Design and Developing Application in Cloud (CT071-3-3-DDAC) Upload file in ASP .Net Core

a. Add a FileUpload page

 Estimation time for this section B: 25 Minutes

1. Continue from the Lab 5 exercise.

2. Open the Lab 5 project (MVCFlowerShop) again and continue the steps in this Lab
6.
3. Right click the Views folder. Select Add > New Folder. Name the folder as
FileUpload.

4. Right click the FileUpload folder. Select Add > View. Name the Razor Page as
index.cshtml.

Level 3 Asia Pacific University of Technology & Innovation Page 2 of 11

Design and Developing Application in Cloud (CT071-3-3-DDAC) Upload file in ASP .Net Core

Level 3 Asia Pacific University of Technology & Innovation Page 3 of 11

Design and Developing Application in Cloud (CT071-3-3-DDAC) Upload file in ASP .Net Core

5. Design the index.cshtml through the below code.

<h2>Upload</h2>

<div class="row">
<section>
<form method="post" enctype="multipart/form-data"
asp-controller="UploadFiles" asp-action="Index">
<div class="form-group">
<div class="col-md-10">
<p>Upload one or more files using this form:</p>
<input type="file" name="files" multiple />
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input type="submit" value="Upload" />
</div>
</div>
</form>
</section>
</div>

6. Right click the Controller folder. Select Add > Controller. Choose MVC
Controller-Empty.

Level 3 Asia Pacific University of Technology & Innovation Page 4 of 11

Design and Developing Application in Cloud (CT071-3-3-DDAC) Upload file in ASP .Net Core

7. Name the controller as FileUploadController.cs.

Level 3 Asia Pacific University of Technology & Innovation Page 5 of 11

Design and Developing Application in Cloud (CT071-3-3-DDAC) Upload file in ASP .Net Core

8. Select Views > Shared > _LoginPartial.cshtml. Add the below <li></li> sentences
into the page.

<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="FileUpload" asp-
action="Index">File Upload</a>
</li>

Level 3 Asia Pacific University of Technology & Innovation Page 6 of 11

Design and Developing Application in Cloud (CT071-3-3-DDAC) Upload file in ASP .Net Core

b. Modify FileUploadController.cs to upload files.

 Estimation time for this section C: 25 Minutes

1. Add the below lines to the top of the page.

using Microsoft.AspNetCore.Http;
using System.IO;
using System.Text;

2. Add the below line inside the public class FileUploadController : Controller{}.
[HttpPost("UploadFiles")]
public async Task<IActionResult> Post(List<IFormFile> files)
{
return RedirectToAction("Index");
}

Level 3 Asia Pacific University of Technology & Innovation Page 7 of 11

Design and Developing Application in Cloud (CT071-3-3-DDAC) Upload file in ASP .Net Core

3. To receive multiple files, modify the post() method by following the below code.
[HttpPost("UploadFiles")]
public async Task<IActionResult> Post(List<IFormFile> files)
{
long size = files.Sum(f => f.Length);
var filePath = ""; string fileContents = null;
int i = 1;
foreach (var formFile in files)
{
if (formFile.ContentType.ToLower() != "text/plain") //not text file..
{
return BadRequest("The " + formFile.FileName + " unable to upload
because uploaded file must be a text file");
}
if (formFile.Length == 0)
{
return BadRequest("The " + formFile.FileName + "file is empty content!");
}
else if (formFile.Length > 1048576)
{
return BadRequest("The " + formFile.FileName + "file is exceed 1 MB !");
}
else
{
if (formFile.Length > 0)
{
filePath = "C:\\Users\\mienmay\\Desktop\\Testupload"+ i +".txt";
using (var stream = new FileStream(filePath, FileMode.Create))
{
await formFile.CopyToAsync(stream);
}
}
using (var reader = new StreamReader(formFile.OpenReadStream(),
new UTF8Encoding(encoderShouldEmitUTF8Identifier: false,
throwOnInvalidBytes: true), detectEncodingFromByteOrderMarks: true))
{
fileContents = fileContents + await reader.ReadToEndAsync();
}
}
i++;
}
return RedirectToAction("Index", "FileUpload", new { @contents = fileContents });
}

Level 3 Asia Pacific University of Technology & Innovation Page 8 of 11

Design and Developing Application in Cloud (CT071-3-3-DDAC) Upload file in ASP .Net Core

4. Now, to show the file contents in a message box, you can modify the Index()
method.
public IActionResult Index(string contents)
{
ViewBag.content = contents;
return View();
}

5. Then, modify the Index.cshtml by adding the below code.

@if (ViewBag.content != null)

{
<script>alert("@ViewBag.content");</script>
}

Level 3 Asia Pacific University of Technology & Innovation Page 9 of 11

Design and Developing Application in Cloud (CT071-3-3-DDAC) Upload file in ASP .Net Core

Level 3 Asia Pacific University of Technology & Innovation Page 10 of 11

Design and Developing Application in Cloud (CT071-3-3-DDAC) Upload file in ASP .Net Core

Summary:
In this tutorial, we learned how to build an upload file page in the system. Besides, we also
learnt how to read the contents from a file and upload the file to the specific folder.

Level 3 Asia Pacific University of Technology & Innovation Page 11 of 11