I want to upload multiple files including Word Documents, Pdf and Images.
I need to use a single input for files because we don't know how many files will be uploaded.
My code is this but I have problem that I can't send files to server side.
Controller Code :
public ActionResult Create([Bind(Include = "Id,Content")] Message message, IEnumerable<HttpPostedFileBase> files)
{
if (ModelState.IsValid)
{
// Object save logic
SaveFiles(message,files);
return RedirectToAction("Index");
}
return View(message);
}
Part of view code :
<form name="registration" action="">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
<label for="Content" >Content:</label>
<textarea class="form-control compose_content" rows="5" id="Content" name="content"></textarea>
<div class="fileupload">
Attachment :
<input id="files" name="files" type="file" multiple />
</div>
</div>
<button type="submit" class="btn btn-default compose_btn" >Send Message</button>
</form>
I don't have problem with saving files and saving the object.
only problem :
files list is null.
I order to upload files, your form needs to include the enctype= multipart/form-data attribute.
<form name="registration" action="" enctype= "multipart/form-data">
or better
#using (Html.BeginForm(actionName, controllerName, FormMethod.Post, new { enctype= "multipart/form-data" }))
and I strongly recommend you pass a model to the view and use the strongly typed HtmlHelper methods to create your html for the properties of your model.
Related
I am trying to create the functionality that allows to upload the image and store it into the db.
I have this input field in my HTML form:
#using (Html.BeginForm("AddTR", "TestCell", FormMethod.Post))
{
<div class="modal" id="NewTRModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-xl" style="width:1250px;">
<div class="modal-content">
<div class="box5">
<div>
<label for="file-upload" class="custom-file-upload">
Upload Image1
</label>
<input id="file-upload" type="file" name="image1"/>
</div>
<div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4"> Submit</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">Hide</button>
</div>
</div>
</div>
</div>
}
And I am trying to get the file in my controller through
IFormFile file = Request.Form.Files["image1"];
However, for some reasons after I am clicking submit button the Request.Form.Files is empty.
I will appreciate any advice.
Web browsers will upload files properly only when the HTML form
element defines an enctype value of multipart/form-data:
#using (Html.BeginForm("AddTR", "TestCell", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
...
<input id="file-upload" type="file" name="image1"/>
...
}
Without the enctype attribute, the browser will transmit only the name of the file and not its content.
Then in the controller action method you can use the same name as defined in the <input> tag as a parameter:
[HttpPost]
public ActionResult AddTR(HttpPostedFileBase image1)
{
if (image1 != null && image1.ContentLength > 0)
{
string path = Path.Combine(Server.MapPath(#"~/"), Path.GetFileName(image1.FileName));
image1.SaveAs(path);
}
...
}
In case you are using ASP.NET Core (what you didn't mention in the question) you can define the enctype attribute and than use:
[HttpPost]
public IActionResult AddTR()
{
IFormFile file = Request.Form.Files["image1"];
....
}
I have a small tool that downloads reports based on the specified options. The download works well. And now, I want to also upload a file to the folder and then further use it.
The problem is that I already have one submit button on the form that is used for the download and when I am adding another button for the upload, only download is triggered.
I tried to resolve it using an #Html.ActionLink(), but no success. Is there any proper way to resolve the issue? I know that there is a possibility to capture the submit value and then check in one main ActionResult in the Controller and redirect to the respective ActionResult, but I don't want to do it, since there are too many POST Actions in one controller.
Here is my View - download.cshtml:
#using (Html.BeginForm())
{
<fieldset>
<div class="title">Click to download report</div>
<div class="field">
<input id="downloadBtn" type="submit" class="button" value="Download" />
</div>
</fieldset>
<fieldset id="Option_ClientInfo">
<div class="title">
Image
</div>
<div class="field">
<input type="file" name="ImageUpload" accept="image/jpeg" />
<p>#Html.ActionLink("Upload", "UploadImage", new { controller = "Home", enctype = "multipart/form-data"}, new { #class = "button" })</p>
</div>
</fieldset>
}
And the controller - HomeController.cs:
public partial class HomeController : Controller
{
// some functions
// ....
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UploadImage(HttpPostedFileBase imageFile)
{
string path = Path.Combine(this.GetImageFolder, Path.GetFileName(imageFile.FileName));
imageFile.SaveAs(path);
return null;
}
// additional POST functions for other forms
// ....
[HttpPost]
public ActionResult Download(Info downloadInfo)
{
// perform checks and calculations
return new reportDownloadPDF(downloadInfo);
}
}
Any suggestion in appreciated.
The solution is just separate upload and download functionalities using two forms so it wont conflict while submitting.
#using (Html.BeginForm())
{
<fieldset>
<div class="title">Click to download report</div>
<div class="field">
<input id="downloadBtn" type="submit" class="button" value="Download" />
</div>
</fieldset>
<fieldset id="Option_ClientInfo">
<div class="title">
Image
</div>
</fieldset>
}
#using (Html.BeginForm("UploadImage", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<fieldset>
<div class="field">
<input type="file" name="ImageUpload" accept="image/jpeg" />
<p>
<input id="uploadBtn" type="submit" class="button" value="Upload" />
</p>
</div>
</fieldset>
}
There is another issue as well. Image control name and Post Action method parameter name should be same.
So your upload image Post Action method will be:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UploadImage(HttpPostedFileBase imageUpload)
{
string path = Path.Combine(this.GetBasePath + "/img/tmp/", Path.GetFileName(imageFile.FileName));
imageFile.SaveAs(path);
return null;
}
I'm trying to upload multiple images on one form
#using (Html.BeginForm("Create", "AdminRestaurants", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="form-group">
<label for="logoFile" class="col-sm-2 control-label">Logo:</label>
<div class="col-sm-6">
<input type="file" multiple="" name="logoFile" id="logoFile" />
</div>
</div>
<div class="form-group">
<label for="fohFile" class="col-sm-2 control-label">FOH Logo:</label>
<div class="col-sm-6">
<input type="file" multiple="" name="fohFile" id="fohFile" />
</div>
</div>
<div class="form-group">
<label for="bohFile" class="col-sm-2 control-label">BOH Logo:</label>
<div class="col-sm-6">
<input type="file" multiple="" name="bohFile" id="bohFile" />
</div>
</div>
<div class="form-group">
<label for="mgmFile" class="col-sm-2 control-label">MGM Logo:</label>
<div class="col-sm-6">
<input type="file" multiple="" name="mgmFile" id="mgmFile" />
</div>
</div>
I'm trying to process the form on the controller with this
public ActionResult Create(IEnumerable<HttpPostedFileBase> files, RestaurantModel collection)
{
if (ViewData.ModelState.IsValid)
{
}
}
Currently nothing shows up in the files signature on the controller. This seems to work great when only working with one file
public ActionResult Create(HttpPostedFileBase file, EventsModel collection)
Can someone point me in the direction to allow multiple files to be uploaded with one submission form?
Your problem is that you form creates a post request with information that the model binder can bind because the naming convention is not right.
you see, you have 4 file fields each with a different name, for the model binder to bind them correctly your controller action signature should look like this:
public ActionResult Create(HttpPostedFileBase mgmFile,
HttpPostedFileBase logoFile,
HttpPostedFileBase fohFile ,
HttpPostedFileBase bohFile)
Following MCV design pattern The best option would be to use a ViewModel that holds an IEnumerable<HttpPostedFileBase>
and you would create a custom editor template for an IEnumerable<HttpPostedFileBase>
so that you could use it like that:
Html.EditorFor(m=>Model.filesUploaded)
and your controller action would look like this:
public ActionResult Create(MyViewModel i_InputModel)
{
i_InputModel.filesUploade; //Use the files here to upload them.
}
Other options are:
Use the HTML5 multiple attribute on the file input field like this:
<label for="mgmFile" class="col-sm-2 control-label">Files:</label>
<div class="col-sm-6">
<input type="file" multiple="multiple" name="files" id="files" />
</div>
and a controller action like this:
public ActionResult Create(HttpPostedFileBase files)
or use multiple file fields but index them in their name:
<input type="file" multiple="multiple" name="files[0]" id="files_1" />
<input type="file" multiple="multiple" name="files[1]" id="files_2" />
<input type="file" multiple="multiple" name="files[2]" id="files_3" />
<input type="file" multiple="multiple" name="files[3]" id="files_4" />
and then you could use a controller action like this:
public ActionResult Create(IEnumerable<HttpPostedFileBase> files)
This would only work if your file inputs had indexed names like files[0], files[1], files[2],...
In order to understand how model binding to a list works in asp.net mvc, I recommend that you read this post: Model Binding to a List
You don't even have to use model binding to get the files. Use Request.Files in your Action to get them.
public ActionResult Create(EventsModel collection)
{
var files = Request.Files;
// rest of the code...
}
<td>
<input type="file" name="files" id="files" multiple="multiple" />
</td>
As Here, I demonstrate with simple example : http://www.infinetsoft.com/Post/How-to-create-multiple-fileUpload-using-asp-net-MVC-4/1229#.V0J-yfl97IU
I'm currently trying to handle the upload of two different files from two different <input type="file"/>s.
For example:
#using (Html.BeginForm("AddIssue", "Magazine", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<fieldset>
<div class="editor-field">
<div class="editor-label">Issue: </div>
<input type="file" name="issueFile" id="issueFile"/>
</div>
<div class="editor-field">
<div class="editor-label">Cover: </div>
<input type="file" name="issueCover" id="issueCover"/>
</div>
<button type="submit">Save</button>
</fieldset>
}
I've figured out how to receive a file (or files) from one input, but can't find any appropriate information on how to receive files from multiple inputs.
I already have a method for POST, but can't figure out what shall I receive on post.
[HttpPost, Authorize]
public ActionResult AddIssue(string dummy)
{ }
After the comment, here is a more specific solution...
You need to ensure that your Controller Action parameters are named the same as the name attribute on your form fields. This should work for you:
public ActionResult AddIssue(HttpPostedFileBase issueFile, HttpPostedFileBase issueCover)
{ }
Remember, it is the name attributes that are used to identify the fields from the controller. The id attributes mean nothing, and do not have to match.
I have this simple piece of HTML code:
<div>
<input type="file" name="english-file" />
</div>
<div>
<input type="file" name="french-file" />
</div>
I used in my model, the following C# line code:
object receivedFiles = HttpContext.Current.Request.Params["english-file"];
but that object returns null always.
Of course that I can use HttpContext.Current.Request.Files but I want to sepparate files by languages (the above HTML code is simple but someone could add more files to english than french with +Add files button) and save them in sepparate table.
How could I do that?
That's not how files are uploaded. You should look in Request.Files["english-file"] after setting the proper enctype on the form.
Let's take an example:
#using (Html.BeginForm("upload", "somecontroller", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div>
<input type="file" name="english" />
</div>
<div>
<input type="file" name="french" />
</div>
<button type="submit">Upload</button>
}
and in the controller action:
[HttpPost]
public ActionResult Upload()
{
var englishFile = Request.Files["english"];
var frenchFile = Request.Files["french"];
...
}
or even better:
[HttpPost]
public ActionResult Upload(HttpPostedFileBase english, HttpPostedFileBase french)
{
...
}
or even better:
[HttpPost]
public ActionResult Upload(IEnumerable<HttpPostedFileBase> files)
{
...
}
assuming you adjust the names of the file inputs:
#using (Html.BeginForm("upload", "somecontroller", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div>
<input type="file" name="files" />
</div>
<div>
<input type="file" name="files" />
</div>
<button type="submit">Upload</button>
}
I also invite you to read the following blog post.