Reputation: 655
So I'm trying to get pluploader v2.1.9 to work for MVC 4 or 5, I must be completely missing the Idea behind it because i cant find a tutorial or really anything that goes into detail with it. I've googled and searched this site and haven't found a real answer.
I'm trying to get the UI Widget to work so i have followed the directions on the site here and entered the code from UI Widget it gives me the read out saying:
Your browser doesn't have Flash, Silverlight or HTML5 support.
Maybe I'm just too new to MVC or missing a key item here. Any help will be grateful.
Thanks in advance.
Upvotes: 0
Views: 63
Reputation: 655
The key to the View was linking all the external files, and doing it correctly The View
@{
Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>UI Widget</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="Scripts/js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<!-- production -->
<script type="text/javascript" src="Scripts/js/plupload.full.min.js"></script>
<script type="text/javascript" src="Scripts/js/jquery.ui.plupload /jquery.ui.plupload.js"></script>
</head>
<body style="font: 13px Verdana; background: #eee; color: #333">
<form id="form" method="post" action="">
<div id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
<br />
</form>
<script type="text/javascript">
// Initialize the widget when the DOM is ready
$(function () {
$("#uploader").plupload({
// General settings
runtimes: 'html5,flash,silverlight,html4',
//url: 'Scripts/upload.php',
url: 'Home/Upload',
// User can upload no more then 20 files in one go (sets multiple_queues to false)
max_file_count: 20,
chunk_size: '1mb',
// Resize images on clientside if we can
resize: {
width: 200,
height: 200,
quality: 90,
crop: true // crop to exact dimensions
},
filters: {
// Maximum file size
max_file_size: '1000mb',
// Specify what files to browse for
mime_types: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
]
},
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
// Views to activate
views: {
list: true,
thumbs: true, // Show thumbs
active: 'thumbs'
},
// Flash settings
flash_swf_url: 'Scripts/js/Moxie.swf',
// Silverlight settings
silverlight_xap_url: 'Scripts/js/Moxie.xap'
});
// Handle the case when form was submitted before uploading has finished
$('#form').submit(function (e) {
// Files in queue upload them first
if ($('#uploader').plupload('getFiles').length > 0) {
// When all files are uploaded submit form
$('#uploader').on('complete', function () {
$('#form')[0].submit();
});
$('#uploader').plupload('start');
} else {
alert("You must have at least one file in the queue.");
}
return false; // Keep the form from submitting
});
});
</script>
Then there is the Controller, which was what i got from the Link provided from above.
HomeController
using System;
using System.Web.Mvc;
namespace PluploadMVC4Demo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Upload()
{
for (int i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i];
file.SaveAs(AppDomain.CurrentDomain.BaseDirectory + "Uploads/" + file.FileName);
}
return Json(new { success = true }, JsonRequestBehavior.AllowGet);
}
}
}
You need to add a Folder called Uploads to the root Dir to store the files. so your file structure should look something like this.
The only problem now is on how to keep the current file that is being uploaded from over ridding any existing files with the same name.
Upvotes: 2