how to upload file in Strong-Type view in ASP.NET MVC - asp.net-mvc

I use:
#using (Html.BeginForm("UploadPackage", "Manager"))
to send webForm data to UploadPackage action.
Now I add an input tag whose type is file(< input type = "file" />) in that strong-type view. What I want to do is: How can I get all data from webForm (including file) in my Action and handle them?

Form in view:
#using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.ValidationSummary();
<ol>
<li class="lifile">
<input type="file" id="fileToUpload" name="file" />
<span class="field-validation-error" id="spanfile"></span>
</li>
</ol>
<input type="submit" id="btnSubmit" value="Upload" />
}
At Controllers side :
[HttpPost]
public ActionResult FileUpload(HttpPostedFileBase file)
{
// Implementation
}

Related

upload image from view to controller mvc

Good day,
I am trying to upload an image from my view
#using (Html.BeginForm("CrearCurso", "ProfesorCurso", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="form-group">
<label>Upload Image</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-default btn-file">
Browse… <input type="file" id="imgInp">
</span>
</span>
<input type="text" class="form-control" readonly>
</div>
<img id='img-upload'/>
</div>
}
I have this controller in mvc
[HttpPost]
public ActionResult CrearCurso(CursoViewModel CursoViewModel, HttpPostedFileBase imgInp)
{
return View();
}
However when I inspect the HttpPsotedFileBase, it is empty. What is wrong here? thanks
Forms posts back the name/value pairs of its successful form controls. Your file input has no name attribute. Change it to
<input type="file" name="imgInp">
However, its better to strongly bind to your model, so add a
public HttpPostedFileBase ImgInp { get; set; }
property to your view model and use
#Html.TextBoxFor(m => m.ImgInp, new { type = "file" })
which will also allow you to add validation attributes to your file input if required

unable to get all uploaded file in mvc 5

I have two file upload control with different name and id.
But when i am uploading multiple file ,i am receiving only one file of each control.
Below is my code.
Main View
#using (Ajax.BeginForm("Questionnaire", "Tax", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "divQuestionnaire" }, new { id = "formquestionnaire", enctype = "multipart/form-data" }))
{
<div class="clearfix" id="divQuestionnaire">
#{ Html.RenderPartial("_Questionnaire");}
</div>
}
Partial view where file upload control is placed
<input id="PhotoUrl" type="file" class="upload" multiple="multiple" name="PhotoUrl" />
<input id="AddressUrl" type="file" class="upload" multiple="multiple" name="AddressUrl" />
<button type="submit">Save</button>
controller
public ActionResult Questionnaire(HttpPostedFileBase[] PhotoUrl, HttpPostedFileBase[] AddressUrl)
{
}
also tryied this not working
public ActionResult Questionnaire(IEnumerable<HttpPostedFileBase> PhotoUrl, IEnumerable<HttpPostedFileBase> AddressUrl)
{
}

How to fire action in the controller when I select a file from an input file control found in edit form

I have a code in editform like this.
#using (Html.BeginForm("Bind", "Student", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<img id="sp" src="/Student/RetrieveImage/model.StudentID" alt="Photo" height=100 width=200 />
<input type="file" name="ImageData" id="ImageData" onchange="DI();"/>
}
And this in Student Controller
HttpPostedFileBase file;
public ActionResult Bind()
{
file = Request.Files["ImageData"];
file = Request.Files["ImageData"];
return RedirectToAction("StudentEdit");
}
The begin form is found in editform which is a partial form. What I need is to fire the Bind Action when file is selected from input file. How can I do this?
You are working with an form(html element) to upload the image(with HTTP POST verb), in your example you have two main options to proceed with the upload:
1'st option: Create a submit input inside the form
#using (Html.BeginForm("Bind", "Student", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="ImageData" id="ImageData" onchange="DI();"/>
<input type="submit" name="submitbutton" value="Upload" />
}
2'nd option: submit the form with javascript, in this example I used the event that you created at the file element:
#using (Html.BeginForm("Bind", "Student", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="ImageData" id="ImageData" onchange="this.form.submit();"/>
}

Send Forms issue

I'm developing an application on asp.net.I use the standard modelbinder
I have code
#model Sciencecom.Models.Billboards1
#{
ViewBag.Title = "CreateBilboard";
SelectList owners = new SelectList(new SciencecomEntities().Owners.Select(m=>m.Name).ToList());
}
#using (Html.BeginForm("Bilboard", "Data", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true)
#Html.ValidationMessage("Error")
#*владелец*#
<input type="text" name="Locality" value="345"/>
<input type="text" name="Locality" value="3435" />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Добавить" class="btn btn-default" />
</div>
</div>
</div>
}
I send form on controller.but i have issue .I have reference-null
public ActionResult Bilboard( IEnumerable<Sciencecom.Models.Billboards1> Billboard, IEnumerable<Sciencecom.Models.Surface> test)
{
return View();
}
what ideas?
Inside your form you have only 2 input fields with the same name (Locality) which is quite confusing. So on your server all you can get is a variable with the same name as your input field because that's the only information that is posted back when the form is submitted:
public ActionResult Bilboard(Locality locality)
{
...
}
In the code you have shown in your question your Bilboard action seem to be taking some Billboard and test collection arguments but they are not present as input fields inside your form so you cannot possibly expect them to be populated.

Uploading a file will pass a null object

I have the following _CreateOrEditPartial partial view which contain a text & a file upload:-
#model TMS.Models.DataCenter
#* This partial view defines form fields that will appear when creating and editing entities *#
#Html.AntiForgeryToken()
<div>
<span class="f">Name </span>
#Html.EditorFor(model=>model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<div>
<span class="f">Data Center Picture </span>
<input type="file" name="DataCenterfile" />
</div>
and the following main view :-
#using (Html.BeginForm("Create","DataCenter", FormMethod.Post))
{
#Html.ValidationSummary(true)
#Html.Partial("_CreateOrEdit", Model)
<input type="submit" value="Create" class="btn btn-primary"/>
}
Which will call the following ActionMethod:-
[HttpPost]
[ValidateAntiForgeryToken]
[CheckUserPermissions(Action = "Edit", Model = "DataCenter")]
public ActionResult Create(DataCenter dc, HttpPostedFileBase DataCenterfile)
{
// Verify that the user selected a file
if (DataCenterfile != null && DataCenterfile.ContentLength > 0)
{
// extract only the fielname
var fileName = Path.GetFileName(DataCenterfile.FileName);
// store the file inside ~/App_Data/uploads folder
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
DataCenterfile.SaveAs(path);
}
but the datacenterfile will always be null .. can anyone advice what is causing this problem?
Thanks
You forgot to add the enctype attribute to your form.
Something like this:
#using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
}
About enctype attribute: What does enctype='multipart/form-data' mean?

Resources