Plugin to upload multiple images
I have the following classes in my project.
Galeria e Fotos
I have a ViewModel where I get the data from Galeria and the data from Fotos.
When submitting (normal, non-asynchronous submit) save Galeria and Fotos with the ID of the Galeria created.
Everything is working perfectly, but depending on the amount of images selected the page is stopped and no information about what is happening appears for the user.
I want to implement some Plugin to do this, I researched many but could not understand how I apply this case of mine in the examples I saw.
Any suggestion is welcome.
2 answers
A widely used plugin is uploadify. Download the package and have it in your application MVC Web, as it is in this html. The input Type file has the name of Filedate that will be the same name redeemed in Action that will receive such a photo, and has a variable idAlbum that you can refer to your Album and at the time of recording your photo work with this variable.
Html
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>GravarFotos</title>
<!--Ficaria assim a disposição-->
<script src="~/Scripts/jquery-2.1.0.js"></script>
<script src="~/Scripts/jquery.uploadify.js"></script>
<link href="~/Content/uploadify.css" rel="stylesheet" />
<!--Fim da diposição-->
</head>
<body>
<div>
<input type="file" name="Filedata" id="Filedata" />
</div>
<script>
var idAlbum = '1';
$(function () {
$('#Filedata').uploadify({
'swf': '/Content/uploadify.swf',
'uploader': '/Home/GravarFotos',
'method': 'post',
'formData': { 'idAlbum': idAlbum }
});
});
</script>
</body>
</html>
Code Action
[HttpGet]
public ActionResult GravarFotos()
{
return View();
}
[HttpPost]
public String GravarFotos(HttpPostedFileBase Filedata, int? idAlbum)
{
Filedata.SaveAs(Server.MapPath("~/Fotos/") + Filedata.FileName);
return "1";
}
There are more items in this plugin that can be configured, as demonstrated in this Link.
References
You can use PlUpload, a very good plugin to upload multiple files!
If the user's browser supports HTML5 it uses, if it does not support, it uses Flash, Silverlight, and finally if it does not support any of these, it uses HTML4 to select the multiple files.
There are several settings available in it, including you can create your own. And displays individual and global progress bar, and thumbnails too!
Exists at possibility to configure for him to break the file into parts, and go sending part by part, and on the server he joins everything. Example to send large files!
Its use is very simple and works in several languages, including I made a post explaining step by step how to use it with ASP .NET MVC follow the link:
Using Plupload with ASP .NET MVC
Needing we're there to help!