File Upload with AngularJS and ASP.NET MVC - c#

I am new to ASP.NET MVC and AngularJS, How can I Upload file (Image/PDF/Doc) to server Folder By AngularJS Controller with ASP.NET MVC Controller

you can use the angular-file-upload
first install it:
bower install bower install angular-file-upload
then add it as dependency in your app.
angular.module('your-app-name', ['angularFileUpload']);
In your controller, inject the FileUploader service:
angular.module('your-app-name').controller('ctrlName',
['$scope','FileUploader', function($scope, FileUploader) {
$scope.uploader = new FileUploader({
url: 'server_url_here'
//you can add other configuration here like xsrf headers
});
}]);
Then in your html:
Multiple
<input type="file" nv-file-select="" uploader="uploader" multiple /><br/>
Single
<input type="file" nv-file-select="" uploader="uploader" />
You can find a detailed explanation here:
https://github.com/nervgh/angular-file-upload
An example:
https://github.com/nervgh/angular-file-upload/tree/master/examples/simple

Related

BeginForm messes up controller path value in .NET 6

after migrating my app from .NET Framework 4.8 to .NET6, Html.BeginForm has started to change the slash into "%2F" in the controller path, which causes problems because then they become unreachable.
Basically, this:
<form action="/Admin/Report/DownloadReport" enctype="multipart/form-data" method="post">
Becomes this:
<form action="/Admin%2FReport/DownloadReport" enctype="multipart/form-data" method="post">
Example of code where it happens:
<div class="form-container">
#using (Html.BeginForm("DownloadReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.Hidden("requestReportName", "PageReport");
<span class="epi-cmsButton">
<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Export" type="submit" name="btnSubmitDownloadPageReport" id="btnSubmitDownloadPageReport" value="Download Report" />
</span>}
</div>
What can be the cause of that strange behavior? I have not found any information that Html.Beginform has became obsolete in .NET6.
Edit:
My route mapping:
endpoints.MapControllerRoute(
name: "Admin",
pattern: "Admin/{controller}/{action=Index}");
ASP.NET MVC
If you are working with the Built-In Controller Factory using controller name in format Admin/Report actually does not correct. When the built-in controller factory looking for a controller it uses controller name and looking for Your_Controller_NameController class in YourApp.Controllers.* namespaces.
It is possible to map the specific URL route by defining different namespaces using the namespaces parameter of the MapRoute() method in the ASP.NET MVC.
Try to fix the controller name in the #using (Html.BeginForm("DownloadReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" })) to Report. I suppose your application will find the DownloadReport action method without a problem.
See RouteCollectionExtensions.MapRoute Method
ASP.NET Core
I suppose after fixed the controller name in the Html.BeginForm("DownloadReport", "Admin/Report"...) to "Report" your application migration will work correct.
If you will have routing problems provide more information or see the following post: Restrict route to controller namespace in ASP.NET Core

Generate dynamic route path in asp.net core

I have created one .net core application that has below path for crud operations.
Create: http://localhost:1001/admin/123/app/456/user/Create
Update: http://localhost:1001/admin/123/app/456/user/Update
Select: http://localhost:1001/admin/123/app/456/user/Select
Writing below will solve the issue in the URL.
routes.MapRoute("CreateUser", "apps/{appId}/user/create",
defaults: new { controller = "User", action = "Create" });
How to include the same in .cshtml file i.e
<a asp-action="Create" asp-controller="User"> Create User </a>
The quick help appreciated.
You can use asp-route-{value} option to indicate route values in anchor tag helper:
<a asp-action="Create" asp-controller="User" asp-route-adminID="#Model.AdminId" asp-route-appId="#Model.AppId"> Create User </a>
Please consider that I assumed that adminId and appId values are provided in the Model of the page. If it's wrong, set appropriate variable instead of those in your code.
For more information, you can check the Microsoft documentation:
https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/anchor-tag-helper?view=aspnetcore-3.0#asp-route-value

How to pass anti forgery token to react via asp.net mvc?

I call my jsx file via the cshtml like so:
#model viewmodels
#Html.React("CreateStuff", new {
options = Model.KeyValues})
My jsx file contains a form which I'd like to POST back to my controller. However, the controller has a ValidateAntiForgeryToken attribute. How can I pass in the token from mvc land to react??
You should to include in your view this row:
#Html.AntiForgeryToken()

Using WebImage in asp.net core razor mvc

I'm following this sample for working with WebImage. However I'm using asp-net core mvc in vs code.
Since there is no System.Web.Helpers where should I reference WebImage from? I tried searching and there are no explanation in aspnet mvc github wiki.
If you are looking to replace WebImage with a more suitable alternative for asp.net core, then IFormFile is your friend.
You can bind directly to an IFormFile if the parameter name matches the name of your form input field. Or, you can use the below. (Note the change from Request.Files to Request.Form.Files when moving from .net framework to core)
IFormFile inputFile = Request.Form.Files["uploadInputFieldName"];
Instead of the ContentLength property, you may find you need to reference Length instead.
When it comes to saving the file to the local file system (if that is what you are after), then swap out the SaveAs method call for this:
using (var stream = new FileStream(filePathWithSecureName, FileMode.Create))
{
await inputFile.CopyToAsync(stream);
}
More information on file uploads in core, including security considerations, this page is worth a read: https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-3.1
to upload webimage
<input type="file" name="updoc" id="upoc" class="form-control" />
and retrieve in controller by
in Controller
HttpPostedFileBase casteCertificate = Request.Files["updoc"];
Add multipart on your html begin form to retrive stream data from view
#using (Html.BeginForm("controller", "action", FormMethod.Post, new { enctype = "multipart/form-data", name = "myForm", id = "myForm" }))
Passing image to View
ViewBag.pic = urlofwebimage;
in view
<img id="Userpic" class="pull-right" style="margin-bottom: 7px" width="180" height="100" src="#ViewBag.pic" />
else u can also do model binding of Image Url

How to find /open file from PC

you experts probably knowing the easyiest ways to open/find a file from asp.net mvc application.
could you tell me please how to do that, if i want for example to find and upload a photo from my PC.
Thanks and take care,
Ragims
This article may help you.
The article will show how to upload a
file from client to server location in
ASP.Net MVC application in 5 easy
steps.
Two samples:
example one
example two with unit testing
Just a simple HTML file input in your view will suffice:
<input type="file" name="MyFile" id="MyFile" />
Then accept the file in your controller action:
public ActionResult Upload(HttpPostedFileBase myFile)
{
// save or process file here...
return View();
}
Also, remember to set <form enctype="multipart/form-data"> in your form.

Categories