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 = "";
}
}
Related
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)
{
}
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.
I've developed a web app using asp.net c#. There is a FileUpload Control that must upload personnel photos. But as I published the website, it is not working properly! While on the local version no problem seen. I've been trying the following:
Check HttpRuntime in the web.config => executionTime="60", maxRequestLength="4097151"
Searching on the web and nothing came out
Here is my code:
fupImage.SaveAs(Server.MapPath(#"\UploadedImages\" + fupImage.FileName));
fupImage.SaveAs(Server.MapPath(#"\UploadedImages\" + fupImage.FileName));
What might be wrong with that?
Make sure you have set form enctype="multipart/form-data" and path where you are saving does exist and you have permission. you can check it by debugging..
Here is complete code
<form id="Form1" method="post" action="/home/save" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" value="OK" />
</form>
[HttpPost]
public ActionResult Save(HttpPostedFileBase file)
{
// Verify that the user selected a file
if (file != null && 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("~/UploadedImages"), fileName);
file.SaveAs(path);
}
// redirect back to the index action to show the form once again
return RedirectToAction("Index");
}
I'm trying to replicate some webforms functionality that uploads a csv file in an MVC3 project and am coming unstuck. I have the following requirements:
(Short version is that I need something similar to the Filter, InitialDirectory and preferably but not necessarily, the MultiSelect properties of the System.Windows.Controls.OpenFileDialog class for MVC3)
Single button displayed that opens the open file dialog
Upload begins when open is clicked in the dialog
The file type in the dialog should be restricted to csv, txt and All files
The initial directory should be able to be set depending on user preferences
I've used jQuery for the first two requirements (shown below) but am not if this is the best way or how to accomplish the last two.
View:
#using (Html.BeginForm("Import", "Date", FormMethod.Post, new { enctype = "multipart/form-data", id="fileUpload" }))
{
<input type="file" name="file" id="file" style="display: none;" />
<input type="button" id="import" value="Import" />
}
<script type="text/javascript">
$(document).ready(function () {
$('#file').change(function () {
$('#fileUpload').submit();
});
$('#import').click(function () {
$('#file').trigger('click');
});
});
</script>
Controller:
[HttpPost]
public ActionResult Import(HttpPostedFileBase file)
{
// do stuff
}
Any ideas?
It's not possible to do unless you use a Flash or Silverlight plugin. I use Uploadify and it should do everything you need.
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:
}