whisk
whisk

Reputation: 655

MVC 4/5 pluploader v2.1.9

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

Answers (2)

whisk
whisk

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.

enter image description here

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

rafal_zonk
rafal_zonk

Reputation: 76

Check this example : MVC4 ASP.Net Example

Upvotes: 0

Related Questions