Hi everyone I am creating an application using MVC 5, with a code first database,The code below shows the code I am currently trying to use to upload multiple images but I get an InvalidCastexception when trying to cast 'System.String' to type 'System.Web.HttpPostedFileBase'.
Thanks for your time and any help with this issue is greatly appreciated.
Images Controller
// GET: Images/Upload
[HttpGet]
public ActionResult Upload()
{
return View();
}
// POST: Images/Upload
[HttpPost]
public ActionResult Upload(IEnumerable<HttpPostedFileBase> uploadFiles)
{
HttpFileCollectionBase files = Request.Files;
foreach (HttpPostedFileBase file in files)
{
int length = file.ContentLength;
string type = file.ContentType;
string filename = file.FileName;
}
return RedirectToAction("Upload");
}
upload view
#{Layout = null;}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Upload</title>
</head>
<body>
<form method="post" action="~/Images/Upload" id="form1" enctype="multipart/form-data">
#if (ViewData.Model != null)
{
foreach (var item in ViewData.Model)
{
<img src="/Images/#item["Path"]" alt="FileUpload Image" />
}
}
<input type="file" name="uploadFiles" id="FileUpload" multiple="multiple" />
<input type="submit" name="btnSubmit" value="Upload" id="btnSubmit" />
</form>
</body>
</html>
You can't do that
foreach (HttpPostedFileBase file in files)
because the enumerator of HttpFileCollection will return names of the files (string) but not HttpPostedFileBase so you will got InvalidCastexception
Use uploadFiles in the loop instead of HttpFileCollectionBase
public ActionResult Upload(IEnumerable<HttpPostedFileBase> uploadFiles)
{
foreach (var file in uploadFiles)
{
int length = file.ContentLength;
string type = file.ContentType;
string filename = file.FileName;
}
return RedirectToAction("Upload");
}
or use for and index:
HttpFileCollectionBase files = Request.Files;
for (int i = 0; i < files.Count; i++)
{
int length = files[i].ContentLength;
string type = files[i].ContentType;
string filename = files[i].FileName;
}
Related
Good afternoon, I have an asp.net project and I would like that through an asp.net c # form a patient can download a certificate from a path or folder through their identification number or code, the folder it contains contains pdf and are organized by ID number
Thank you
Due to your vague description, I am not sure if you are an mvc project
or a core project.
The following is a case of downloading pdf in each project, please refer to：
In mvc:
public ActionResult DownLoad()
{
return View();
}
[HttpPost]
public ActionResult DownLoad(string id)
{
//PdfFiles is the name of the folder where these pdf files are located
var path = Server.MapPath("~/PdfFiles/pdf" + id + ".pdf");
var memory = new MemoryStream();
using (var stream = new FileStream(path, FileMode.Open))
{
stream.CopyToAsync(memory);
}
memory.Position = 0;
return File(memory, "application/pdf", Path.GetFileName(path));
}
View:
<form method="post" action="DownLoad">
Pdf Id: <input id="Text1" type="text" name="id" />
<input id="Submit1" type="submit" value="submit" />
</form>
Here is the test result:
In Core:
public IActionResult DownLoad()
{
return View();
}
[HttpPost]
public async Task<IActionResult> DownLoad(string id)
{
//here i put the PdfFiles folder in the wwwroot folder
var path = Path.Combine(
Directory.GetCurrentDirectory(),
"wwwroot", "PdfFiles/pdf" + id + ".pdf");
var memory = new MemoryStream();
using (var stream = new FileStream(path, FileMode.Open))
{
await stream.CopyToAsync(memory);
}
memory.Position = 0;
return File(memory, "application/pdf", Path.GetFileName(path));
}
View:
<form asp-action="DownLoad" method="post">
Pdf Id: <input id="Text1" type="text" name="id"/>
<input id="Submit1" type="submit" value="submit" />
</form>
Here is the test result:
I'm new to mvc and have a little trouble figuring out how to upload files to the server .
I have a form where the user enters name , address, city , upload files.
The user must be able to upload max 3 files . After the user has selected eg . 2 files , we display immediately files names on the form like this:
Uploaded files:
gif.dk
hitme.gif
BUT the selected files should ONLY be uploaded to the server after the form is submitted to server.
You can display a list of files to be uploaded by subscribing to the change event of the upload control in jQuery.
Controller:
public class UploaderController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Multiple(IEnumerable<HttpPostedFileBase> files)
{
foreach (var file in files)
{
if (file != null && file.ContentLength > 0)
{
file.SaveAs(Path.Combine(Server.MapPath("/uploads"), Guid.NewGuid() + Path.GetExtension(file.FileName)));
}
}
return View("Index");
}
}
View:
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#uploadFiles').on("change", function () {
var fileUpload = $(this);
var files = fileUpload.context.files;
$("#files").empty();
$("#files").append("<h3>List of files to be uploaded:</h3>");
for (var i = 0; i < files.length; i++) {
var file = files[i];
var name = file.name;
var div = "<div>File name:" + name + "</div>";
$("#files").append(div);
}
});
});
</script>
</head>
<body>
#using (Html.BeginForm("Multiple", "Uploader", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div id="multiple">
<input id="uploadFiles" type="file" class="multiple" name="files" multiple />
</div>
<button class="btn btn-default">Upload</button>
<div id="files">
</div>
}
</body>
Output:
It is just indication of files which you have selected for upload.
But files will be upload to server only after you submit form.
Good evening, I'm using the api bootstrap fileinput and I wonder if you can return a value with ContetResult and uses it in my View.
my Test Controller method ContentResult (just a test):
public ContentResult upload()
{
string name = "";
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase file = Request.Files[i];
name = file.FileName;
}
return Content("{\"name\":\"" + name + "\"}", "application/json");
}
and my View:
<input id="input-701" name="kartik-input-701[]" type="file" multiple=true class="file-loading" />
<input type="text" class="file_name" />
<script type="text/javascript">
$("#input-upload").fileinput({ 'showUpload': true, 'previewFileType': 'any' });
$("#input-701").fileinput({
uploadUrl: '#Url.Action("upload", "Home")', // server upload action
uploadAsync: false,
maxFileCount: 50,
sucess: function (e, data) {
$('.file_name').html(data.result.name);
}
});
</script>
so I want to do something like this illustrative atributte: sucess
Thanks for the help!
Just Insert value in textbox
$('.file_name').val(data.result.name);
Client side code:
<form action="api/MyAPI" method="post" enctype="multipart/form-data">
<label for="somefile">File</label> <input name="somefile" type="file" />
<input type="submit" value="Submit" />
</form>
And how to process upload file with mvc web-api,have some sample code?
HTML Code:
<form action="api/MyAPI" method="post" enctype="multipart/form-data">
<label for="somefile">File</label>
<input name="somefile" type="file" />
<input type="submit" value="Submit" />
</form>
Controller
// POST api/MyAPI
public HttpResponseMessage Post()
{
HttpResponseMessage result = null;
var httpRequest = HttpContext.Current.Request;
if (httpRequest.Files.AllKeys[0] == "image")
{
if (httpRequest.Files.Count > 0)
{
var docfiles = new List<string>();
foreach (string file in httpRequest.Files)
{
var postedFile = httpRequest.Files[file];
var filePath = HttpContext.Current.Server.MapPath("~/Images/" + postedFile.FileName);
postedFile.SaveAs(filePath);
docfiles.Add(filePath);
}
result = Request.CreateResponse(HttpStatusCode.Created, docfiles);
}
}
else
{
result = Request.CreateResponse(HttpStatusCode.BadRequest);
}
return result;
}
try below link
this link use for me hopefully it will work you
http://www.asp.net/web-api/overview/advanced/sending-html-form-data,-part-2
You can use ApiMultipartFormFormmatter to upload file to web api 2.
By using this library, you can define a view model to get parameters submitted from client-side. Such as:
public class UploadFileViewModel
{
public HttpFile Somefile{get;set;}
}
And use it in your Api controller like this:
public IHttpActionResult Upload(UploadFileViewModel info)
{
if (info == null)
{
info = new UploadFileViewModel();
Validate(info);
}
if (!ModelState.IsValid)
return BadRequest(ModelState);
return Ok();
}
Nested objects can be parsed by this library.
yeah,our customer want to upload more than one file.
we use spring 3 mvc.
the official example like this:
markup:
<form method="post" action="/form" enctype="multipart/form-data">
<input type="text" name="name"/>
<input type="file" name="file"/>
<input type="submit"/>
</form>
code:
#RequestMapping(value = "/form", method = RequestMethod.POST)
public String handleFormUpload(#RequestParam("name") String name,
#RequestParam("file") MultipartFile file) {
if (!file.isEmpty()) {
byte[] bytes = file.getBytes();
// store the bytes somewhere
return "redirect:uploadSuccess";
} else {
return "redirect:uploadFailure";
}
}
there is only one file,so i can write the file input name in the method.
but what should i do if i want to upload many files.
i could not write all the file input names because if is generated by the js code.
i only know that its name like 'attach_'
then ,what should i write in the method ? if i write like this
#RequestParam() MultipartFile file
or
#RequestParam("attach_") MultipartFile file
i'll get a error.
A much simpler way - works for me
/*** Upload Images ***/
#RequestMapping(value = "/images/upload", method = RequestMethod.POST)
public void upload(#RequestParam("file") List<MultipartFile> files, #RequestParam("user") String user) {
files.forEach((file -> System.out.println(file.getOriginalFilename())));
}
I have it working with Spring 3.0.4 (there was an issue in previous versions of Spring, so be sure to use >= 3.0.4).
To test it, you can use the following steps:
public class MultiPartFileUploadBean {
private List<MultipartFile> files;
public void setFiles(List<MultipartFile> files) {
this.files = files;
}
public List<MultipartFile> getFiles() {
return files;
}
}
The controller:
#RequestMapping(value = "/uploadtest", method = RequestMethod.POST)
public String uploadtestProcess(MultiPartFileUploadBean file, BindingResult bindingResult,
Model model) throws IOException {
... // binding check
StringBuilder sb = new StringBuilder();
List<MultipartFile> files = file.getFiles();
for(MultipartFile f:files)
sb.append(String.format("File: %s, contains: %s<br/>\n",f.getOriginalFilename(),new String(f.getBytes())));
String content = sb.toString();
model.addAttribute("content", content);
return "uploadtest";
}
The jsp:
<form method="post" action="/uploadtest" enctype="multipart/form-data">
<p>Type: <input type="text" name="type" value="multiPartFileSingle" size="60" /></p>
<p>File 1: <input type="file" name="files[0]" size="60" /></p>
<p>File 2: <input type="file" name="files[1]" size="60" /></p>
<p><input type="submit" value="Upload" /></p>
</form>
<c:if test="${not empty content}">
<p>The content uploaded: <br/>${content}</p>
I found clearer to use the MultipartHttpServletRequest object as a parameter to the controller method:
#RequestMapping(value = "/save", method=RequestMethod.POST)
protected String save(Model model, MultipartHttpServletRequest multipartRequest) {
MultipartFile file = multipartRequest.getFile("field-name");
// Also multiple files with same name
List<MultipartFile> files = multipartRequest.getFiles("multifield-name");
// ...
}
Link to the docs: http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-multipart-resolver-commons
You use model and form.
( Html / Jsp )
<form id="uploadForm" method="POST"enctype="multipart/form-data/charset=UTF-8">
//...multi file, add dynamic input
<input type="file" name="file"/>
<input type="file" name="file"/>
<input type="file" name="file"/>
<input type="file" name="file"/>
</form>
<input type="button" id="save_button" value="save" />
(Js)
var form = new FormData(document
.getElementById('uploadForm'));
$.ajax({
url : "/test/upload/file,
type : 'POST',
dataType : 'text',
data : form,
processData : false,
contentType : false,
success : function(response) {
if (response == "success") {
document.location.reload(true);
} else {
$("#editMsg").text("fail");
}
},
error : function(request, status, error) {
}
});
( Model )
public class fileModel {
private List<MultipartFile> file; // this name = input name
... setter, getter
}
( Controller )
#RequestMapping(value = "/upload/file", method = RequestMethod.POST)
public #ResponseBody String uploadFiles(fileModel model, HttpServletRequest req) {
return "success" // <-- debug. break point !! Your watch model.
}
You can find it here:
http://dhruba.name/2008/12/27/implementing-single-and-multiple-file-multipart-uploads-using-spring-25/