• Registered: 2015-08-29
  • Posts: 2

Topic: Uncaught TypeError: $(...).plupload is not a function

I'm trying Plupload for the first time, so I downloaded the latest version and grabbed the UI Widget example code. After including JQuery in the head and fiddling with a few settings, I run it in Chrome 44.0.2403.157 m. And here's what I get from the console: 

Uncaught TypeError: $(...).plupload is not a function index.php:9

.
Here's how my code looks like:

<!DOCTYPE html>
<html>

<head>
    <script type="application/javascript" src="jquery.js"></script>
    <script type="application/javascript" src="plupload/plupload.full.min.js"></script>
    <script type="text/javascript">
        // Initialize the widget when the DOM is ready
        $(function () {
            $("#uploader").plupload({
                // General settings
                runtimes: 'html5,flash,silverlight,html4',
                url: "/examples/upload",

                // Maximum file size
                max_file_size: '2mb',

                chunk_size: '1mb',

                // Resize images on clientside if we can
                resize: {
                    width: 200,
                    height: 200,
                    quality: 90,
                    crop: true // crop to exact dimensions
                },

                // Specify what files to browse for
                filters: [
                    {
                        title: "Image files",
                        extensions: "jpg,gif,png"
                    },
                    {
                        title: "Zip files",
                        extensions: "zip,avi"
                    }
        ],

                // 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: '/plupload/js/Moxie.swf',

                // Silverlight settings
                silverlight_xap_url: '/plupload/js/Moxie.xap'
            });
        });
    </script>
</head>

<body>
    <div id="uploader"></div>
</body>

</html>

What did I do wrong?

  • davit
  • Maintainer
  • Offline
  • Registered: 2010-11-29
  • Posts: 2,143

Re: Uncaught TypeError: $(...).plupload is not a function

You haven't include the code for UI widget (jquery.ui.plupload.min.js). It comes with the package.

If you want to see your issue fixed, do not report it here, do it on - GitHub.
  • Registered: 2015-08-29
  • Posts: 2

Re: Uncaught TypeError: $(...).plupload is not a function

Thank you for the reply. I gave up for a while there. Now it's showing 

i.widget is not a function in jquery.ui.plupload.min.js line 1

along with the last error.

  • Registered: 2015-10-15
  • Posts: 1

Re: Uncaught TypeError: $(...).plupload is not a function

I get exactly the same errors using 2.18 

<!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>Plupload - Queue widget example</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/plupload.full.min.js"></script>
    <script type="text/javascript" src="js/jquery.ui.plupload/jquery.ui.plupload.js"></script>
    <link type="text/css" rel="stylesheet" href="js/jquery.ui.plupload/css/jquery.ui.plupload.css" media="screen" />

</head>
<body style="font: 13px Verdana; background: #eee; color: #333">


<div id="uploader">
    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>

<script type="text/javascript">
    // Initialize the widget when the DOM is ready
    $(function() {

        $("#uploader").plupload({
            // General settings
            runtimes : 'html5',
            url : "upload.cfm",

            // Maximum file size
            max_file_size : '2mb',

            chunk_size: '1mb',

            // Resize images on clientside if we can
            resize : {
                width : 200,
                height : 200,
                quality : 90,
                crop: true // crop to exact dimensions
            },

            // Specify what files to browse for
            filters : [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip,avi"}
            ],

            // 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'
            }

        });
    });

</script>

</body>
</html>

5 Reply by sorcer1 (edited by sorcer1 2015-11-17 15:40:45)

  • Registered: 2015-11-17
  • Posts: 1

Re: Uncaught TypeError: $(...).plupload is not a function

Hello,

I have the same issue.

Can you help us to find the problem ?

this my js scripts include in the page :

<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="/js/plupload.full.min.js"></script>
<script type="text/javascript" src="/js/jquery.plupload.queue/jquery.plupload.queue.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.plupload/jquery.ui.plupload.min.js"></script>
<script type="text/javascript" src="/js/i18n/fr.js"></script>