Doesn't work at all? - Githubissues

komocode commented 11 years ago

Copied and pasted the example code into my test HTML, emptied allowedfiletypes to allow all files. I receive events at beforeEach and beforeSend, but it never seems to start uploading. No events at "error" either.

eternicode commented 11 years ago

What browser(s) did you try it in? What makes you think it never starts uploading?

Can you give a reduced test case that replicates what you're seeing?

Also, keep in mind that it won't work if you view the page using the file:// protocol, due to browser security restrictions -- the page (and upload destination) need to be served using a web server of some sort.

komocode commented 11 years ago

I have Node.js serving the html files. Here's my example html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="js/jquery.filedrop.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){

    $('#upload_icon').filedrop({
    url: 'upload',
    paramname: 'test',
    withCredentials: true,
    error: function(err, file) {
      console.log(err);
    },
    allowedfiletypes: [],   // filetypes allowed by Content-Type.  Empty array means no restrictions
    allowedfileextensions: [], // file extensions allowed. Empty array means no restrictions
    maxfiles: 25,
    maxfilesize: 9999,    // max file size in MBs
    drop: function() {
        console.log("dropped files");
    },
    uploadStarted: function(i, file, len){
        console.log("upload started");
    },
    uploadFinished: function(i, file, response, time) {
        console.log("upload finished");
    },
    beforeEach: function(file) {
        console.log("beforeEach");  
    },
    beforeSend: function(file, i, done) {
        console.log("beforeSend");  
    },
    afterAll: function() {
        console.log("afterAll");  
    }
});
  });

  </script>
  <title>Upload</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/animate-custom.css">
</head>
<body class="main-color-background">
  <div id="container" class="animated fadeIn">
    <div id="content">
      <h2 id="upload_icon">
      </h2>
        <h1 id="upload_text">DRAG 'N DROP</h1>
    </div>
  </div>
</body>
</html>

Dragging and dropping files onto the icon only prints this: dropped files beforeEach beforeSend

Node.js isn't detecting any requests to upload either.

Tested this in Chrome Version 29.0.1547.57, Firefox 23.0.1 on OSX 10.8.4

komocode commented 11 years ago

Nevermind, my fault. beforeSend didn't call "done()"

weixiyen / jquery-filedrop

Doesn't work at all? #141