CODEWITHSUNDEEP
javascriptjqueryplupload
Steven
Steven

Reputation: 19425

Why is Plupload container not responding when I try to drop a file?

I've created a drop zone where I can drop my images and within this drop zone I also have a link / button to open file browser.

Clicking this link works and and selecting a file will trigger the alert message.

But I'm not able to active the drop zone.

Does anyone know how I can make this work? Here is my fiddle: http://jsfiddle.net/spstieng/kXX6L/6/

HTML:

<section class="logo-drop-box-container">
    <div id="logo-drop-box" class="image-drop-box">
        Drop image or <a id="logo-file-browser-button" class="brows-file-button" href="#"> select file</a>
    </div>
</section>

JS:

function logoUpload() {
    var uploader = new plupload.Uploader({
        runtimes : 'html5',
        container: 'logo-drop-box',
        browse_button : 'logo-file-browser-button',            
        multipart : false,
        dragdrop: true,
        flash_swf_url : 'http://www.plupload.com/plupload/js/Moxie.swf',
        silverlight_xap_url : 'http://www.plupload.com/plupload/js/Moxie.xap',            
        url :  '/some/path/to/upload.php',
        filters : {
            max_file_size : '2mb',
            mime_types: [{title : "Image files", extensions : "jpg,png"}]
        },
        init : {
            FilesAdded: function(up, files) {
                alert('test');
            }
        }
    });    
    uploader.init();
}


if($('.logo-drop-box-container').length > 0) {
    logoUpload();
}

Upvotes: 0

Views: 1073

Answers (1)

Steven
Steven

Reputation: 19425

To answer my own question, it was missing the drop_element.

    var uploader = new plupload.Uploader({
        runtimes : 'html5,flash',
        container: 'drop-box',
        drop_element: "drop-box",
        ...

Upvotes: 2

Related Questions