Hi! I am a student and started to use ASP.NET Core MVC in creating a web-application for my project in school. My project has a feature of uploading pdf and docs files in the system and be able to display the uploaded files in the view page. I am really
stuck on this part and my project must be out very soon. Please help me to solve this problem.
I have watched several video tutorials and even read some articles related to file uploading but can't apply it to my project because it doesn't provide displaying the uploaded file in the view page. I'm also confused on where to store the files whether
it would be on the database or in the www.root.
As a reference, I've used this solution that I got from tutorials and tried to apply it in my project.
FileController:
// Uploading a file to add a new document
public IActionResult MultipleFiles(IEnumerable<IFormFile> files)
{
int i = 0;
foreach (var file in files)
{
using (var fileStream = new FileStream(Path.Combine(_dir, $"file{i++}.pdf"), FileMode.Create, FileAccess.Write))
{
file.CopyTo(fileStream);
}
}
return RedirectToAction("Index");
}
The codes that I provided above doesn't work and I don't know what's the problem. I also don't have any codes for displaying the uploaded files to the view page.
Please, Please help me on how to do it.
Thank you for whatever help you may extend on this thread. :)
There's no error, its just that when you click the submit button it will not return to the index page. Also you can't see the uploaded file in the solution explorer.
However, I just find out that I miss putting a asp-controller and
asp-action to my <form></form> tag. Now, it seems that the uploading of files is working. Just don't know how could I display it in the view page. This is my code where I placed the asp-controller
and asp-action.
public IActionResult SingleFile(IFormFile file)
{
using (var fileStream = new FileStream(Path.Combine(_dir, "sample.pdf"), FileMode.Create, FileAccess.Write))
{
file.CopyTo(fileStream);
}
return RedirectToAction("Index");
}
Please help me on how could I display it in the view page. And also, please advice me or tell me if I'm correct in placing the files on the file stream, or do I have any option where I could store the uploaded files? Thank you very much!
There's no error, its just that when you click the submit button it will not return to the index page. Also you can't see the uploaded file in the solution explorer.
The ASP.NET core documentation explains how static files are handled in ASP.NET Core and how to list files from a directory.
private readonly WebApplication4Context _context;
private IHostingEnvironment _env;
public UsersController(WebApplication4Context context, IHostingEnvironment env)
{
_context = context;
_env = env;
}
public async Task<IActionResult> Index()
{
return View(await _context.Users.ToListAsync());
}
public IActionResult Create()
{
return View();
}
[HttpPost]
public async Task<IActionResult> Create(IFormFile file, User user)
{
var fileName = System.IO.Path.GetFileName(file.FileName);
var filePath = System.IO.Path.Combine(_env.WebRootPath, "file", fileName);
if (file.Length > 0)
{
using (var stream = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(stream);
}
user.FileName = fileName;
}
_context.Users.Add(user);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
[HttpGet]
public ActionResult GetPdf(string fileName)
{
string filePath = "~/file/" + fileName;
Response.Headers.Add("Content-Disposition", "inline; filename=" + fileName);
return File(filePath, "application/pdf");
}
Best Regards,
Rena
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Thanks for your help, I can now display the uploaded file to the view page. I appreciate that you have just solve my problem :)
But there's another thing, how could the user download the displayed file for them to open and read the file? Sorry, just needed help on this. Thank you very much!
When I click the displayed file in the view page, here's the error:
Thislocalhostpage can’t be found
No webpage was found for the web address:https://localhost:44333/Users/GetPdf?fileName=sample.pdf
I am not clear your meaning.You said you have diplayed the file on the view page.But this url(https://localhost:44333/Users/GetPdf?fileName=sample.pdf)
is used to display the file.If you display the file successfully,you would not make error.Did you use my entire code?
For you want to download the displayed file,you could see download button in the upper right corner of view by default when you use google broswer(Microsoft Edge also works):
Best Regards,
Rena
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
I use your entire code. I get the displayed file in the index page, but when you click the pdf file in the index page, it will return to the error page like this https://localhost:44333/Users/GetPdf?fileName=sample.pdf
I have not modify code in Startup.cs or program.cs. Be sure that your controller named UsersController.And I suggest that you could share your code that could reproduce your issue.
Best Regards,
Rena
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
5 Posts
How to upload files (pdf & docs files) and display it in the view page
Sep 02, 2019 01:38 PM|John Lester|LINK
Hi! I am a student and started to use ASP.NET Core MVC in creating a web-application for my project in school. My project has a feature of uploading pdf and docs files in the system and be able to display the uploaded files in the view page. I am really stuck on this part and my project must be out very soon. Please help me to solve this problem.
I have watched several video tutorials and even read some articles related to file uploading but can't apply it to my project because it doesn't provide displaying the uploaded file in the view page. I'm also confused on where to store the files whether it would be on the database or in the www.root.
As a reference, I've used this solution that I got from tutorials and tried to apply it in my project.
FileController:
// Uploading a file to add a new document public IActionResult MultipleFiles(IEnumerable<IFormFile> files) { int i = 0; foreach (var file in files) { using (var fileStream = new FileStream(Path.Combine(_dir, $"file{i++}.pdf"), FileMode.Create, FileAccess.Write)) { file.CopyTo(fileStream); } } return RedirectToAction("Index"); }Create.cshtml
<div> <p> Upload files here </p> <form asp-controller="Home" asp-action="MultipleFiles" enctype="multipart/form-data" method="post"> <input type="file" multiple name="files" /> <button type="submit">Submit</button> </form> </div>The codes that I provided above doesn't work and I don't know what's the problem. I also don't have any codes for displaying the uploaded files to the view page.
Please, Please help me on how to do it.
Thank you for whatever help you may extend on this thread. :)
All-Star
120113 Points
27971 Posts
Moderator
MVP
Re: How to upload files (pdf & docs files) and display it in the view page
Sep 02, 2019 03:11 PM|ignatandrei|LINK
How do you know that does not work ? Did you encounter any error ?
None
0 Points
5 Posts
Re: How to upload files (pdf & docs files) and display it in the view page
Sep 03, 2019 01:17 PM|John Lester|LINK
There's no error, its just that when you click the submit button it will not return to the index page. Also you can't see the uploaded file in the solution explorer.
However, I just find out that I miss putting a asp-controller and asp-action to my <form></form> tag. Now, it seems that the uploading of files is working. Just don't know how could I display it in the view page. This is my code where I placed the asp-controller and asp-action.
Create.cshtml
<div> <p> Upload files here... </p> <form asp-controller="Document" asp-action="SingleFile" enctype="multipart/form-data" method="post"> <input type="file" multiple name="file" /> <div class="submit-holder"><input type="submit" value="Create" class="submit-edit" /></div> <div> <a asp-action="Index">Back to List</a> </div> </form> </div>DocumentController
public IActionResult SingleFile(IFormFile file) { using (var fileStream = new FileStream(Path.Combine(_dir, "sample.pdf"), FileMode.Create, FileAccess.Write)) { file.CopyTo(fileStream); } return RedirectToAction("Index"); }Please help me on how could I display it in the view page. And also, please advice me or tell me if I'm correct in placing the files on the file stream, or do I have any option where I could store the uploaded files? Thank you very much!
All-Star
47471 Points
20838 Posts
Re: How to upload files (pdf & docs files) and display it in the view page
Sep 03, 2019 02:56 PM|mgebhard|LINK
The ASP.NET core documentation explains how static files are handled in ASP.NET Core and how to list files from a directory.
https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-2.2
Participant
1970 Points
657 Posts
Re: How to upload files (pdf & docs files) and display it in the view page
Sep 04, 2019 01:54 PM|Rena Ni|LINK
Hi John,
Here is a workaround as follow:
1.You need to create a folder named 'file' in wwwroot.
2.Create a model:
public class User { public int Id { get; set; } public string FileName { get; set; } }3.Create.cshtml is used to upload pdf file and make sure that the name of file should be ASCII(i.e. aaa.pdf) when you upload a file:
@model User <div class="row"> <div class="col-md-4"> <form asp-action="Create" enctype="multipart/form-data"> <div asp-validation-summary="ModelOnly" class="text-danger"></div> <div class="form-group"> <label asp-for="FileName" class="control-label"></label> <input asp-for="FileName" type="file" name="file" id="file" class="form-control" /> <span asp-validation-for="FileName" class="text-danger"></span> </div> <div class="form-group"> <input type="submit" value="Create" class="btn btn-default" /> </div> </form> </div> </div>4.Index.cshtml is used to display the file:
@model IEnumerable<WebApplication4.Models.User> <p> <a asp-action="Create">Create New</a> </p> <table class="table"> <thead> <tr> <th> @Html.DisplayNameFor(model => model.FileName) </th> <th></th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td> <p>@Html.ActionLink(item.FileName, "GetPdf", "Users", new { fileName = item.FileName }, null)</p> </td> <td> <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> | <a asp-action="Details" asp-route-id="@item.Id">Details</a> | <a asp-action="Delete" asp-route-id="@item.Id">Delete</a> </td> </tr> } </tbody> </table>4.Controller:
private readonly WebApplication4Context _context; private IHostingEnvironment _env; public UsersController(WebApplication4Context context, IHostingEnvironment env) { _context = context; _env = env; } public async Task<IActionResult> Index() { return View(await _context.Users.ToListAsync()); } public IActionResult Create() { return View(); } [HttpPost] public async Task<IActionResult> Create(IFormFile file, User user) { var fileName = System.IO.Path.GetFileName(file.FileName); var filePath = System.IO.Path.Combine(_env.WebRootPath, "file", fileName); if (file.Length > 0) { using (var stream = new FileStream(filePath, FileMode.Create)) { await file.CopyToAsync(stream); } user.FileName = fileName; } _context.Users.Add(user); await _context.SaveChangesAsync(); return RedirectToAction(nameof(Index)); } [HttpGet] public ActionResult GetPdf(string fileName) { string filePath = "~/file/" + fileName; Response.Headers.Add("Content-Disposition", "inline; filename=" + fileName); return File(filePath, "application/pdf"); }Best Regards,
Rena
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
5 Posts
Re: How to upload files (pdf & docs files) and display it in the view page
Sep 04, 2019 02:53 PM|John Lester|LINK
Hi rena :)
Thanks for your help, I can now display the uploaded file to the view page. I appreciate that you have just solve my problem :)
But there's another thing, how could the user download the displayed file for them to open and read the file? Sorry, just needed help on this. Thank you very much!
When I click the displayed file in the view page, here's the error:
This localhost page can’t be found
No webpage was found for the web address: https://localhost:44333/Users/GetPdf?fileName=sample.pdf
<div id="error-information-popup-container" jstcache="0"> <div id="error-information-popup" jstcache="0"> <div id="error-information-popup-box" jstcache="0"> <div id="error-information-popup-content" jstcache="0"> <div class="error-code" jscontent="errorCode" jstcache="18">HTTP ERROR 404</div> </div> </div> </div> </div>Participant
1970 Points
657 Posts
Re: How to upload files (pdf & docs files) and display it in the view page
Sep 05, 2019 05:32 AM|Rena Ni|LINK
Hi John,
I am not clear your meaning.You said you have diplayed the file on the view page.But this url(https://localhost:44333/Users/GetPdf?fileName=sample.pdf) is used to display the file.If you display the file successfully,you would not make error.Did you use my entire code?
For you want to download the displayed file,you could see download button in the upper right corner of view by default when you use google broswer(Microsoft Edge also works):
Best Regards,
Rena
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
5 Posts
Re: How to upload files (pdf & docs files) and display it in the view page
Sep 07, 2019 04:58 AM|John Lester|LINK
Hi Rena Ni,
I use your entire code. I get the displayed file in the index page, but when you click the pdf file in the index page, it will return to the error page like this https://localhost:44333/Users/GetPdf?fileName=sample.pdf
None
0 Points
5 Posts
Re: How to upload files (pdf & docs files) and display it in the view page
Sep 07, 2019 05:07 AM|John Lester|LINK
Have you configure or add some codes in startup.cs or program.cs file?
Participant
1970 Points
657 Posts
Re: How to upload files (pdf & docs files) and display it in the view page
Sep 09, 2019 01:38 AM|Rena Ni|LINK
Hi John,
I have not modify code in Startup.cs or program.cs. Be sure that your controller named UsersController.And I suggest that you could share your code that could reproduce your issue.
Best Regards,
Rena
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.