0

I can't understand why I don't receive files, I have this code on browser (drag&drop):

function dropZone(){
    //drop zone
    var dropZone = $('#dropZone'),
        maxFileSize = 1000000000000000000000; // max size -

    if (typeof(window.FileReader) == 'undefined') {
        dropZone.text('Use recent browser to upload files');
        dropZone.addClass('error');
    }


    //events
    dropZone[0].ondragover = function() {
        dropZone.addClass('hover');
        return false;
    };

    dropZone[0].ondragleave = function() {
        dropZone.removeClass('hover');
        return false;
    };


    //class hack
    dropZone[0].ondrop = function(event) {
        event.preventDefault();
        dropZone.removeClass('hover');
        dropZone.addClass('drop');

        //size
        var file = event.dataTransfer.files[0];

        if (file.size > maxFileSize) {
           dropZone.text('Big file!');
           dropZone.addClass('error');
           return false;
        }

      //ajax


      $.ajax({
         type: 'post',
         url: 'upload',
         data: file,
         success: function () {
            alert('success!');
         },
         xhrFields: {
        // add listener to XMLHTTPRequest object directly for progress
            onprogress: uploadProgress
         },
         processData: false,
         contentType: file.type
        });

        //progress

        function uploadProgress(event) {
            var percent = parseInt(event.loaded / event.total * 100);
            dropZone.text('Donloading: ' + percent + '%');
        }

        //check result

        function stateChange(event) {
            if (event.target.readyState == 4) {
                if (event.target.status == 200) {
                    dropZone.text('Downloaded successfuly!');
                } else {
                    dropZone.text('Error!');
                    dropZone.addClass('error');
                }
            }
        }
    };
}

I can't receive the files, I use the middleware 'connect-multiparty', but I don't know if it is still good for this code, because when I try to get list of files :

 console.log(req.files);

I receive:

 {}

I need something diferent to parse that request's?

Ivan
  • 514
  • 5
  • 21
  • There is no `req` identifier in your code! – Ram Mar 05 '15 at 22:55
  • @Vohuman , can you give an example? – Ivan Mar 05 '15 at 23:18
  • Ignore my previous comment. I missed the fact that `req` identifier is the request object in your Node environment. Use [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) constructor for uploading the file. – Ram Mar 05 '15 at 23:26
  • Also check [this](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) question. – Ram Mar 05 '15 at 23:30
  • @Vohuman Hey! I forgot to say, Thanks! – Ivan Mar 09 '15 at 18:48

1 Answers1

1

Need to use formData constructor for uploading the file: https://developer.mozilla.org/en-US/docs/Web/API/FormData

Work exemple:

$.ajax({
    xhr: function(){
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
        console.log('up');
        uploadProgress(evt);
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt){
        console.log('down');
    }, false);
    return xhr;
    },
    url : 'upload',
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'xml',
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery wil
    success: function (result) {
        alert(result);
        alert('success!');
    },
    error: function(err){
        alert('err');
        console.log(err);
    }
});
Ivan
  • 514
  • 5
  • 21