How can identify input (type="file") id of fileupload while file uploading to server.
Let me explain in detail:
I have multiple file upload control on my page and different control save file on different folders like "Fileupload1" will save file on "Folder1" and so on.
You can't. The id of an HTML element is never sent to the server when posting a form. As far as the name attribute is concerned you may loop through the Request.Files collection. In ASP.NET MVC it more common to use action parameters. Example:
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="files" id="file1" />
<input type="file" name="files" id="file2" />
<input type="file" name="files" id="file3" />
<input type="submit" value="Upload files" />
</form>
and your controller action:
[HttpPost]
public ActionResult Index(IEnumerable<HttpPostedFileBase> files)
{
foreach (var file in files)
{
if (file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data"), fileName);
file.SaveAs(path);
}
}
return RedirectToAction("Index");
}
It's as simple as that.
As Darian points out, the ID isn't sent. But the name attribute is, so your file upload should be something like:
<input type="file" name="contactsFile" />
Which will let you use a method such as
public ActionResult UploadFile(HttpPostedFileBase contactsFile)
in your controller.
You won't have access to any DOM element since ASP.NET MVC uses the FileCollectionModelBinder to create a collection of files. So what you receive in your controller won't have anything to do with the DOM. But the good thing is since it's a collection you can access the index of the file.
<input type="file" name="files[0]" id="file1" />
<input type="file" name="files[1]" id="file2" />
<input type="file" name="files[2]" id="file3" />
Then if you need to upload files[0] to folder Y and files[1] to folder Z you can access the files collection index.
switch (index)
{
case 0:
// Upload to Y
case 1:
// Upload to Z
default:
}
Related
In my MVC application, i have information upload form. Here user can upload videos and images. To do this i have created to file controls, one for videos and one for images. Here user should be only able to upload at max 2 videos and at max 5 images for single form. Can any one suggest me how can i limit the user to upload number of files. i.e. if only 2 videos and 5 images also where should i implement this for best use? in controller or using javascript?
The MVC file upload approach:
<input type="file" name="file" id="file" />
This passes a HttpPostedFileBase to the controller or if you have multiple IEnumerable<HttpPostedFileBase>. You can then evaluate the number of files and file types and return any functionality/messages back to the user.
[HttpPost]
public ActionResult Index(HttpPostedFileBase file) {...
Or
<input type="file" name="files" id="file" />
<input type="file" name="files" id="file" />
[HttpPost]
public ActionResult Index(IEnumerable<HttpPostedFileBase> files) {...
I tried using javascript
File upload control :
<input type="file" id="t" name="t" onchange="checkFilesCount(this)" multiple>
javascript code :
function checkFilesCount(id) {
if(id.files.length > 5)
{
alert('you cant upload files more than 5');
document.getElementById("t").value = "";
}
}
I am experiencing a very strange behavior. I am doing a simple ASP .NET application that will upload a file to the server.
I have a simple form that does this:
<form class="form-horizontal" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="files" class="col-md-3 col-sm-4 control-label">Bestand *</label>
<div class="col-md-9 col-sm-8" ">
<input name="file" type="file" id="file" required />
<span >#ViewBag.TheMessage</span>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-sm-8 col-md-push-3 col-sm-push-4">
<input type="submit" class="btn btn-primary" value="Versturen" />
</div>
</div>
</form>
The strange thing happens with the POST, 9 of 10 times this POST goes to test.com instead of localhost. I sniffed it with firebug to discover this. The firebug looks like this:
The Controller.cs looks like this, and it's working fine when post reached:
[HttpPost]
public ActionResult Index(HttpPostedFileBase file)
{
ViewBag.TheMessage = "Thanks, an e-mail will be sent shortly";
if (file.ContentLength > 0)
{
ViewBag.Message = "Your application description page.";
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
file.SaveAs(path);
}
return View();
}
Another strange thing is that if I just use an empty format cshtml file only with:
<form method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<input type="submit"/>
POST woks fine every time.
Thanks.
Check to see if you have any Javascript that is changing your forms action attribute. I would start by looking at onload, onsubmit, or on your submit buttons onclick method. If you're using jquery be sure to check your $(document).ready () function. This really could be anywhere in your js though so make sure you look everywhere.
Another culprit could be that you have a base tag in your html that looks something like <base href="http:www.test.com /> which will change all of your relative urls to go that base location
I have 4 upload textboxes and one submit button I want to save 4 images into 4 folders depending on textbox sequence.
Problems I am facing are:
I get file using HttpPostedFileBase so I can't differentiate which file came from which text box.
you can have 4 different input controls with 4 different names and in controller 4 different file bases ... and based on the control name you can save it to different folders
In your View
<input type="file" name="file1" />
<input type="file" name="file2" />
<input type="file" name="file3" />
<input type="file" name="file4" />
In your Controller
[HttpPost]
public ActionResult FileUpload(HttpPostedFileBase file1,HttpPostedFileBase file2,HttpPostedFileBase file3,HttpPostedFileBase file4)
{
}
I'm using jansy bootstrap to replace the asp.net FileUpload. I've successfully retrieved the file using HttpPostedFile with the help of this answer:
HttpPostedFile image = Request.Files["myFile"];
Now, how do I allow multiple files to be selected? With the asp.net FileUpload it was simply adding AllowMultiple="True" parameter and then in the code behind I simply looped through:
foreach (var image in FileUpload1.PostedFiles)
{...}
How do I do this with a custom control? THis is my current html (which is the first Image Upload Widget example):
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="file" id="myFile" name="myFile"></span>
Remove
</div>
</div>
You can add multiple attribute and set its value to multiple to allow select of multiple files
<input type="file" id="myFile" name="myFile" multiple="multiple">
Lets say I have a html form
<form id="frm" method="post" action="upload.cshtml" enctype="multipart/form-data">
<input multiple type="file" name="file1" />
<input multiple type="file" name="file2" />
<input type="submit" />
</form>
The from has two inputs each accepting multiple files. When this form is submitted, Request.Files["file1"] will only give the first file in the file1 input. In order to access the rest of the files I would have to iterate Request.Files[] in a loop. The latter method however gives all files of both inputs. How do I get the files separately so that I can perform different actions on the different sets of files?
Easiest is to define appropriate parameters to the action method:
public ActionResult Upload(IEnumerable<HttpPostedFileBase> file1,
IEnumerable<HttpPostedFileBase> file2)
{
// process file1 and file2
}
The file1 enumerable will contain all files from the input with the name file1 and so does file2 contain the files from file2.