We Keep Coding

Multi file upload in ASP.NET using c#

I have a button on my website where users can upload multiple files onto the site. For some reason, in my controller the "file" variable always gets the value of NULL. I am able to upload files as a user, but my controller doesn't read that in for some reason. I'm not sure why and any guidance to the right direction would be greatly appreciated !
This is my cshtml:
<p id="FileArea"></p>
<input id="Files" name="Files" type="file" multiple="multiple" />
This is my model:
public IEnumerable<HttpPostedFileBase> Files { get; set; }
This is my controller:
foreach (var file in viewModel.Candidate.Files)
{
var file_s = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/Files/location", file_s);
file_s.SaveAs(path);
}

How to handle multiple image uploads

I'm working on a ASP.NET MVC site that will allow a user to upload multiple images to a gallery. After a user uploads their images and before they are saved to the database, the user will have the ability to reorder the images using a jQuery drag and drop. The user can then submit their uploads. The user will also have the ability later on to edit their gallery and again have the ability to reshuffle the order of their images. I will not be saving the images to the database, just the filenames. I'm not sure how to best handle this. I'm thinking the POST controller will take a List<HttpPostedFileBase> parameter, and then convert to a byte [] array to maintain the image order. Then save the image names to the database as a comma separated string? What would the most efficient way to handle this be?

Alright so if we put drag and drop a side, see this as your view:
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="files" value="" multiple="multiple"/>
<input type="submit" value="Upload"/>
}
In your controller:
[HttpPost]
public ActionResult Index(HttpPostedFileBase[] files)
{
try
{
foreach (HttpPostedFileBase file in files)
{
string name = System.IO.Path.GetFileName(file.FileName);
file.SaveAs(Server.MapPath("~/Images/" + name));
string filename = "Images/" + name;
//Save the the filename to your database
}
}
catch
{
throw ex;
}
return View();
}

MVC: How to get full file path from file input field? [duplicate]

This question already has answers here:
How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
(14 answers)
Closed 6 years ago.
I have the following razor code:
<div class="container">
#Html.ValidationSummary(false)
#using (Html.BeginForm("EncryptFile", "Encryption", new { returnUrl = Request.Url.AbsoluteUri }, FormMethod.Post, new { #id = "encryptionform", #class = "form-horizontal" }))
{
<div class="form-group">
#Html.Label("File", new { #class = "control-label col-md-2" })
<div class="col-md-10">
<input type="file" id="encryptfilefield" name="uploadedfile" enctype='multipart/form-data'/>
</div>
</div>
<button type="submit" id="encryptfilebutton">Encrypt</button>
<button id="decryptfilebutton" type="button">Decrypt</button>
<button id="reencryptfilebutton" type="button">Re-Encrypt</button>
}
</div>
and the following controller code gets called when I click the Encrypt button:
[HttpPost]
public ActionResult EncryptFile(string uploadedfile)
{
/*process the file without uploading*/
return Json(new { status = "success", message = "Encrypted!" });
}
I am able to hit this action when I click the encrypt button, but the uploadedfile string always comes in as null. How can I get the fill filepath of the file that was selected? Please note that I am not trying to upload it to the server (despite "uploaded" appearing in the name), I just need the filepath.
EDIT
I saw in IE 11 that the following showed the file path fully (the part inside the alert):
alert($("#encryptfilefield").val());
However this is not a full solution, and it seems there is no solution due to to it being a security issue.
Thank you.

Updated Answer
Unfortunately there's no way to get that info consistently among all browsers., there's multiple posts on here about this topic and the conclusion is browsers don't allow it for security purposes.
I did find that in IE 11 they do include the path within the input dom element .value property, but I don't know if that works in other versions, and it does not work in chrome.
$('input[type=file]').change(function () {
console.dir(this.value);
console.dir(this.files[0])
})
Unfortunately that's about the best you can expect. Here's a post that has a couple things you could do to possibly achieve some very specific scenarios.
How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
Original Answer (how to get file path "After" it reaches server)
The null param issue I'm thinking is because MVC binds on element name property.
<input type="file" id="encryptfilefield" name="uploadedfile" enctype='multipart/form-data'/>
and your controller action is marked as type string, which is not what your input type is.
you could either change that to this,
[HttpPost]
public ActionResult EncryptFile(HttpPostedFileBase uploadedfile)
{
or try grabbing the file straight from the Request object like below, you'd have to save it somewhere before you get the full path of it though, i don't believe you'll get the filepath of where it originated from, only after you save it.
[HttpPost]
public ActionResult EncryptFile(string uploadedfile)
{
HttpPostedFileBase myfile = Request.Files[0];
if (file.ContentLength > 0)
{
// extract only the fielname
var fileName = Path.GetFileName(file.FileName);
// store the file inside ~/App_Data/uploads folder
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"),fileName);
file.SaveAs(path);
}
/*process the file without uploading*/
return Json(new { status = "success", message = "Encrypted!" });
}

Display a picture uploaded to the server

I am trying to create a user profile picture in a ASP MVC5 project. I have added a page that is called changepicture.cshtml and will display the current user's picture.
I have an upload function that will take a picture someone uploads like hank.jpg and rename it to that users_id.jpg.
For example:
System.Data.Entity.DynamicProxies.ApplicationUser_9C8230B38B954135385F2B0311EAC02ED8B95C4D504F8424BA3ED79B37F0AAAF.jpg
I would like to display each users individual picture in the page by grabbing there user id and adding .jpg, how would I do this?
changepicture.cshtml
#model KidRoutineLogging.Models.ChangePictureViewModel
#{
ViewBag.Title = "Change Picture";
}
<h2>#ViewBag.Title.</h2>
<h4>Your Current Picture : #Html.ViewBag.CurrentPicture</h4>
<img src="#Url.Content("~/uploads/hank.jpg")" />
<br />
<br />
#using (Html.BeginForm("", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="FileUpload1" /><br />
<input type="submit" name="Submit" id="Submit" value="Upload" />
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
HomeController.cs
public async Task<ActionResult> Index()
{
foreach (string upload in Request.Files)
{
var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
string path = AppDomain.CurrentDomain.BaseDirectory + "uploads/";
//string filename = Path.GetFileName(Request.Files[upload].FileName);
//Request.Files[upload].SaveAs(Path.Combine(path, filename));
Request.Files[upload].SaveAs(Path.Combine(path, user + ".jpg"));
}
return View();
}

You are getting a funky-typed name for your file because you are attempting to cast an entire class (object) to string. Additionally, if you are wanting to name the file "UserId.jpg", your code is doing more work than it should.
This line:
var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
Can be simplified to this line:
var userId = User.Identity.GetUserId();
That would leave your final code as:
public async Task<ActionResult> Index()
{
foreach (string upload in Request.Files)
{
var userId = User.Identity.GetUserId();
string path = AppDomain.CurrentDomain.BaseDirectory + "uploads/";
Request.Files[upload].SaveAs(Path.Combine(path, userId + ".jpg"));
}
return View();
}
You could get rid of the userId variable completely, and update your SaveAs method to
Request.Files[upload].SaveAs(Path.Combine(path, User.Identity.GetUserId()+ ".jpg"));
Also - you really should decorate this ActionResult with the <HttpPost> attribute since it should only be handling the POSTing of the form and not associated with a GET request.

Razor upload file returns null

I have some issue for my c# code for upload some file...in controller file detect null.
My html code
#using (Html.BeginForm("Index", "UploadHistory",FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="uploadFile" id="uploadFile" />
<input type="submit" value="Upload File" id="btnSubmit" />
}
and this code for my controller
[HttpPost]
public ActionResult Index(HttpPostedFileBase uploadFile)
{
// Verify that the user selected a file
if (uploadFile != null && uploadFile.ContentLength > 0)
{
// extract only the fielname
var fileName = Path.GetFileName(uploadFile.FileName);
// store the file inside ~/App_Data/uploads folder
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
uploadFile.SaveAs(path);
}
// redirect back to the index action to show the form once again
return RedirectToAction("Index");
}
Any ideas why my upload file detect null?? i use C# mvc 4 and razor thank you.
[SOLVED]
Just error in javascript method post.

Refer to this link
Possible copy of
In short
Use
public ActionResult Index(HttpPostedFileBase uploadFile)
Also change
<input type="file" name="file" id="file" />
to
<input type="file" name="uploadFile" id="uploadFile" />

The following should work for you:
Model
public class UploadFileModel
{
public UploadFileModel()
{
Files = new List<HttpPostedFileBase>();
}
public List<HttpPostedFileBase> Files { get; set; }
}
View
#using (Html.BeginForm("Index", "Home",FormMethod.Post, new { enctype = "multipart/form-data" }))
{
Html.TextBoxFor(m => m.Files.Files, new { type = "file", name = "Files" })
<input type="submit" value="Upload File" id="btnSubmit" />
}
Controller
[HttpPost]
public ActionResult Index(UploadFileModel model)
{
var file = model.Files[0];
return View(model);
}

Use below
[HttpPost]
public ActionResult Index(HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
file.SaveAs(path);
}
return RedirectToAction("Index");
}
mainly use HttpPostedFileBase in your parameter

I am not sure model binding works in this scenario. Either you need to use HttpPostedFileBase as a parameter to the controller action or you need to use Request.Files option.
Using Request.Files option.
foreach (string file in Request.Files)
{
HttpPostedFile hpf = Request.Files[file] as HttpPostedFile;
if (hpf.ContentLength == 0)
continue;
string savedFileName = Path.Combine(
AppDomain.CurrentDomain.BaseDirectory,
Path.GetFileName(hpf.FileName));
hpf.SaveAs(savedFileName);
}
EDIT : Here I found a blog which uses similar scenario (Model binding). It may help you - http://cpratt.co/file-uploads-in-asp-net-mvc-with-view-models/