at this moment I am uploading any file and saving it. What I want is to generate an error message if the user does not select any file and press the upload button, but at this moment the only thing it does is redirect to another view whether or not it has selected files. I would like to know if there is another better way to generate the upload of these files
this is my controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public void Upload(HttpPostedFileBase file)
{
string file = (file.FileName).ToLower();
try
{
file.SaveAs(Server.MapPath("~/Uploads/" + file));
}
catch (Exception e)
{
ViewBag.UploadError = "Upload file error";
}
}
}
this is the view:
#{
ViewBag.Title = "Home";
}
#using (Html.BeginForm("Transformation", "Xml", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="col-md-12 offset-md-5">
<div class="custom-file col col-lg-2">
<input type="file" name="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
<div class="col-5">
<button class="btn btn-success col-md-4 mt-2" type="submit">Upload file</button>
</div>
</div>
//Message Error
<div class="alert alert-danger" role="alert">
<p class="text-danger">
#ViewBag.UploadError
</p>
</div>
}
#Thomas Caycedo Martinez, I believe you can simply modify your controller method like below.
If error, return to the same view with an error message.
Your view remains unchanged.
[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
if (file != null)
{
string fileName = (file.FileName).ToLower();
try
{
file.SaveAs(Server.MapPath("~/Uploads/" + fileName));
}
catch (Exception e)
{
ViewBag.UploadError = "Upload file error";
return View("Index");
}
}
else {
ViewBag.UploadError = "Upload file error";
return View("Index");
}
return View();
}
write the action and controller correctly
#using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
and check file in action
[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
if( file != null && file.Length > 0)
{
string file = (file.FileName).ToLower();
try
{
file.SaveAs(Server.MapPath("~/Uploads/" + file));
}
catch (Exception e)
{
ViewBag.UploadError = "Upload file error";
}
return View("Index");
}
else
{
//do something
return View("Index");
}
}
You can use JavaScript/JQuery to check for the same..
$(function(){
$("#btnSubmit").on("click",function(){
if($("#inputGroupFile01").val()==""){
alert("Please select a file")
return false;
}
})
})
where btnSubmit is the id for the submit button
Related
I use asp.net core razor pages to create my application, in my create page, I have two file controls, one for upload icon image and the other for uploading detail images. But when I click edit button, all of the fields were initialized, except the two file controls. Please check my code. Anyone can help?
In my razor page:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label asp-for="Product.Icon" class="control-label"></label>
<input asp-for="#Model.Icon" type="file" />
<span asp-validation-for="Product.Icon" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label”>Detail Images（support multi-uploading）：</label>
<input type="file" id="fUpload" name="files" multiple />
</div>
</div>
</div>
In my page model:
public async Task<IActionResult> OnGetAsync(int? id)
{
if (id == null)
{
return NotFound();
}
Product = await _context.Products
.Include(p => p.Shop).SingleOrDefaultAsync(m => m.ID == id);
if (Product == null)
{
return NotFound();
}
ViewData["Shop"] = new SelectList(_context.Shops, "ID", "Name");
return Page();
}
public async Task<IActionResult> OnPostAsync(List<IFormFile> files)
{
if (!ModelState.IsValid)
{
return Page();
}
var uploads = Path.Combine(hostingEnvironment.WebRootPath, "uploads");
if (!Directory.Exists(uploads))
{
Directory.CreateDirectory(uploads);
}
if (this.Icon != null)
{
var fileName = GetUniqueName(this.Icon.FileName);
var filePath = Path.Combine(uploads, fileName);
this.Icon.CopyTo(new FileStream(filePath, FileMode.Create));
this.Product.Icon = fileName;
}
if (files != null && files.Count > 0)
{
foreach (IFormFile item in files)
{
if (item.Length > 0)
{
var fn = GetUniqueName(item.FileName);
var fp = Path.Combine(uploads, fn);
item.CopyTo(new FileStream(fp, FileMode.Create));
this.Product.ProductImages = this.Product.ProductImages + fn + "^";
}
}
}
_context.Attach(Product).State = EntityState.Modified;
try
{
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!ProductExists(Product.ID))
{
return NotFound();
}
else
{
throw;
}
}
return RedirectToPage("./Index");
}
The most important part of your page is missing from the code you provided - the <form> tag. For file uploading to work, you must specify that the method is post and you must also provide an enctype attribute with its value set to multipart/form-data:
<form method="post" enctype="multipart/form-data">
...
Ref: https://www.learnrazorpages.com/razor-pages/forms/file-upload
I am attempting to upload a file. The code below works on my local machine or running on a remote server running the dll from a command line, but when I try and publish to my test environment and run under iis it fails.
<form method="post" asp-action="Upload" asp-controller="Prebook" enctype="multipart/form-data">
<div class="form-inline">
<div class="col-md-2">
<div class="form-group">
<input type="file" name="files" data-input= "false" multiple class="filestyle" data-buttonName="btn-primary">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input type="submit" value="Upload File" class="btn btn-primary" />
</div>
</div>
</div>
</form>
Controller logic
[HttpPost]
public async Task<IActionResult> Upload(ICollection<IFormFile> files)
{
if (await _contextPB.UploadRow.AnyAsync())
{
Danger(string.Format("Please LOAD the existing containers before uploading another file"), true);
return View();
}
int rowCount = 0;
var uploads = Path.Combine(_environment.WebRootPath, "uploads");
var _viewModel = new UploadViewModel();
foreach (var file in files)
{
using (var streamReader = System.IO.File.OpenText(Path.Combine(uploads, file.FileName)))
{
var line = streamReader.ReadLine();
var columnNames = line.Split(new[] { ',' });
if (!ValidateColumnNames(columnNames))
{
Danger(string.Format("Invalid Column Name in Upload file"), true);
return View(_viewModel);
}
while (!streamReader.EndOfStream)
{
var data = line.Split(new[] { ',' });
var uploadRow = new UploadRow();
// validation & assignment logic removed
try
{
_contextPB.Add(uploadRow);
rowCount++;
}
catch (Exception e)
{
Danger(string.Format("<b>{0},{1}</b> database error", uploadRow.Container_Id, e), true);
}
line = streamReader.ReadLine();
}
}
}
}
Try adding a catch block to see what the error is.
I'm assuming a permission issue.
[HttpPost]
public async Task<IActionResult> Upload(ICollection<IFormFile> files)
{
try
{
if (await _contextPB.UploadRow.AnyAsync())
{
Danger(string.Format("Please LOAD the existing containers before uploading another file"), true);
return View();
}
// your code
}
catch (Exception ex)
{
// what is the error?
// add a breakpoint to see
throw;
}
}
This is a part of my view code for Index action of Manage Controller.
<div class="mngimg">
#using (Html.BeginForm("UploadPhoto", "Manage", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="btn btn-default browseimg">
<input type="file" name="file" id="files" onchange="this.form.submit()" />
</div>
<div class="btn btn-default browseimg">
#Html.ActionLink("Remove Photo", "RemovePhoto", "Manage")
</div>
}
</div>
</div>
}
</dd>
<dt>Password:</dt>
<dd>
[
#if (Model.HasPassword) <!-- Here is my error. The Model is null -->
{
#Html.ActionLink("Change your password", "ChangePassword")
}
else
{
#Html.ActionLink("Create", "SetPassword")
}
]
</dd>
Whenever I open this page and click "Remove Photo" I keep getting an error saying that An exception of type 'System.NullReferenceException' occurred in App_Web_ckoryptg.dll but was not handled in user code. I tried debugging, but I am unable to figure out why my Model.HasPassword is becoming null. Here is my RemovePhoto Action from Manage Controller.
[HttpPost]
public async Task<ActionResult> UploadPhoto(HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
{
var user = await GetCurrentUserAsync();
var userId = user.Id;
var fileExt = Path.GetExtension(file.FileName);
var fnm = userId + ".png";
if (fileExt.ToLower().EndsWith(".png") || fileExt.ToLower().EndsWith(".jpg") || fileExt.ToLower().EndsWith(".gif"))// Important for security if saving in webroot
{
var filePath = HostingEnvironment.MapPath("~/Content/Images/") + fnm;
var directory = new DirectoryInfo(HostingEnvironment.MapPath("~/Content/Images/"));
if (directory.Exists == false)
{
directory.Create();
}
ViewBag.FilePath = filePath.ToString();
file.SaveAs(filePath);
return RedirectToAction("Index", new { Message = ManageMessageId.PhotoUploadSuccess });
}
else
{
return RedirectToAction("Index", new { Message = ManageMessageId.FileExtensionError });
}
}
return RedirectToAction("Index", new { Message = ManageMessageId.Error });// PRG
}
private async Task<ApplicationUser> GetCurrentUserAsync()
{
return await UserManager.FindByIdAsync(User.Identity.GetUserId());
}
I opened a default MVC project that comes with visual studio and I added these extra things that I followed from this tutorial ASP.NET upload images. How do I resolve this?
Edit:
This is my RemovePhoto action.
public ActionResult RemovePhoto()
{
string file = "~/Content/Images/" + User.Identity.GetUserId() + ".png";
if(System.IO.File.Exists(Server.MapPath(file)))
System.IO.File.Delete(Server.MapPath(file));
return View("Index");
}
Just Redirect back to your Index action. That way you don't have to instantiate your Index model in your RemovePhoto action. Can read more about this pattern here.
I try to upload a file. But if the user doesnt select a file, the same page has to been seen with a message that you have to upload a file.
I have this:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult UploadFile([Bind(Include = "UploadData,Directories")] /*LibraryUploadModel libraryUpload*/ UploadViewModel uploadViewModel, string designId, string folder, FormLibraryEntry formLibraryEntry, string command)
{
//ActionResultSpecification result = SfsHelpers.GeneralHelper.HandleLibraryOverwrite(formLibraryEntry.Guid, this, command, FormRootPath, customerSchema, LibraryMode.FormLibrary);
try
{
if ((uploadViewModel.UploadData != null) && (uploadViewModel.UploadData.ContentLength > 0) && !string.IsNullOrEmpty(uploadViewModel.UploadData.FileName))
{
var fileName = Path.GetFileName(uploadViewModel.UploadData.FileName);
TemplateLibraryEntry entry = GetTemplateLibraryEntry(designId, customerSchema);
var path = Path.Combine(Server.MapPath("~/"), entry.FilePath, folder.Replace('/', '\\').Trim('\\'), fileName);
uploadViewModel.UploadData.SaveAs(path);
}
else
return Json(new { Message = "Error in saving file, Go back and try again" });
// return RedirectToAction("UploadFile");
//return View(uploadViewModel);
}
catch (Exception)
{
throw;
}
return RedirectToAction("Index");
}
}
But now the json message is shown. The name of the page where you can upload is UploadFile.
I have it now like this:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult UploadFile([Bind(Include = "UploadData,Directories")] /*LibraryUploadModel libraryUpload*/ UploadViewModel uploadViewModel, string designId, string folder, FormLibraryEntry formLibraryEntry, string command)
{
//ActionResultSpecification result = SfsHelpers.GeneralHelper.HandleLibraryOverwrite(formLibraryEntry.Guid, this, command, FormRootPath, customerSchema, LibraryMode.FormLibrary);
try
{
if ((uploadViewModel.UploadData != null) && (uploadViewModel.UploadData.ContentLength > 0) && !string.IsNullOrEmpty(uploadViewModel.UploadData.FileName))
{
var fileName = Path.GetFileName(uploadViewModel.UploadData.FileName);
TemplateLibraryEntry entry = GetTemplateLibraryEntry(designId, customerSchema);
var path = Path.Combine(Server.MapPath("~/"), entry.FilePath, folder.Replace('/', '\\').Trim('\\'), fileName);
uploadViewModel.UploadData.SaveAs(path);
return RedirectToAction("Index");
}
else
{
ModelState.AddModelError("uploadViewModel", "your message");
return View(uploadViewModel);
}
catch (Exception)
{
throw;
}
}
and the view like this:
<div class="col-md-offset-2 col-md-10">
<table>
#for (var i = 0; i < Model.Directories.Count; i++)
{
<tr>
<td>
<fieldset>
<input type="radio" name="folder" value="#Model.Directories[i]" id="folder(#i)">
<label for="folder(#i)">#Model.Directories[i]</label>
</fieldset>
</td>
</tr>
}
</table>
</div>
but the problem is that if you press on Uploaden without an upload file, I get this error:
Line 55: <div class="col-md-offset-2 col-md-10">
Line 56: <table>
Line 57: #for (var i = 0; i < Model.Directories.Count; i++)
Line 58: {
Line 59: <tr>
Source File: b:\Seneca\Producten\FormsServer\Trunk\SenecaFormsServer\Areas\Dashboard\Views\DesignTemplate\UploadFile.cshtml Line: 57
and the directories are null: Model.Directories = null
The problem you have is that you are binding your Directories to your view, but the name attribute of your radio button isn't correctly formed so it won't be posted to the server. Subsequently, when you send the view back with the model that property will be null. Whilst you're at it, use LabelFor as well.
Change it to the following:
#for (var i = 0; i < Model.Directories.Count; i++)
{
<tr>
<td>
<fieldset>
#Html.RadioButtonFor(m => m.Directories, Model.Directories[i])
#Html.LabelFor(m => m.Directories[i])
</fieldset>
</td>
</tr>
}
I have a partial view that has an Ajax.ActionLink that when clicked should replace the view (target DIV) with another partial view that allows a user to upload an image. I have several of these on the page that work, I just can't seem to figure out why I keep getting a 404 for this particular one.
Here's what I have:
MyProfile.cshtml holds all the partials (tenant-reference-photos is update target DIV):
<div class="row-fluid">
<div class="span6 well-border" id="tenant-reference-photos">
#Html.Partial("~/Views/Tenants/_TenantReferencePhotosPartial.cshtml", Model)
</div>
<div class="span6 well-border" id="tenant-viewings">
#Html.Partial("~/Views/Tenants/_TenantViewingsPartial.cshtml", Model)
</div>
</div>
_TenantReferencePhotosPartial.cshtml (ActionLink giving 404 here):
<div class="row-fluid">
#if (Model.ReferencePhotos == null)
{
<h3>You haven't uploaded any references!
#Ajax.ActionLink("Upload now?", // on click 404 returned in developer tools in Chrome
"UploadReference",
new AjaxOptions
{
UpdateTargetId = "tenant-reference-photos",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
LoadingElementId = "ajax-loader"
})
</h3>
}
</div>
Code below returns the above partial:
[HttpGet]
public ActionResult TenantReferencePhotos()
{
var currentTenant = tenantRepository.GetLoggedInTenant();
return PartialView("_TenantReferencePhotosPartial", currentTenant.ReferencePhotos.ToList());
}
The following ActionResult is what's not being invoked in the Ajax.ActionLink and giving the 404 error:
[HttpPost]
public ActionResult UploadReference(HttpPostedFileBase file, Tenant tenant)
{
if (file != null)
{
if (file.ContentLength > 10240)
{
ModelState.AddModelError("file", "The size of the file should not exceed 10 KB");
return View();
}
var supportedTypes = new[] { "jpg", "jpeg", "png", "JPG", "JPEG", "PNG" };
var fileExt = System.IO.Path.GetExtension(file.FileName).Substring(1);
if (!supportedTypes.Contains(fileExt))
{
ModelState.AddModelError("photo", "Invalid type. Only the following types (jpg, jpeg, png) are supported.");
return View();
}
using (var db = new LetLordContext())
{
var reference = db.Image.Create<ReferencePhoto>();
// Convert HttpPostedFileBase to byte array
MemoryStream target = new MemoryStream();
file.InputStream.CopyTo(target);
byte[] photo = target.ToArray();
reference.File = photo;
reference.Format = fileExt;
reference.DateUploaded = DateTime.Now.Date;
reference.Description = "";
reference.Name = "";
db.Image.Add(reference);
db.SaveChanges();
return PartialView("_TenantReferencePhotosPartial", file);
}
}
else
{
return View();
}
}
For completeness, here's the partial view where an image can be uploaded:
<div>
#using (Ajax.BeginForm("UploadReference", "Tenants", FormMethod.Post,
new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
UpdateTargetId = "tenant-reference-photos"
}))
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<div>
Select a file:
<input type="file" name="file" />
<input type="submit" value="UploadReference" />
</div>
}
</div>
All scripts in MyProfile.cshtml are referenced. Does unobtrusive-ajax.js need to be included as a script in all partial views even if it's referenced in Layout.cshtml and/or MyProfile.cshmtml?
Can anyone spot why I'm getting the error above?
In your code UploadReference is decorated with HttpPost attribute so it is accessible only when you make POST. In your view you have configured HttpMethod to GET. When you change it to POST it should work:
#Ajax.ActionLink("Upload now?",
"UploadReference",
new AjaxOptions
{
UpdateTargetId = "tenant-reference-photos",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
LoadingElementId = "ajax-loader"
})