Ajax post array: Uncaught TypeError: Illegal invocation

Question

I'm trying to send an json-array to the upload.php file. The following error popped up:

Uncaught TypeError: Illegal invocation

I'v also tried to add processData: false but then there's is nothing posted to upload.php.

My code: http://jsfiddle.net/r0330537/86yqj/

HTML

<div id="dropzone" class="dropzone">
    Drop uw bestanden en/of zip hier
</div>

JQUERY

$( document ).ready( function() {
    ...
    function drop(event) {
        //console.log( "drop", event );
        event.stopPropagation();
        event.preventDefault();
        $(this).removeClass("dragging");

        var data = event.dataTransfer,
            fileList = data.files,
            file = new Array();

        for(i = 0; i < fileList.length; i++) {
            file.push( fileList[i] );
        }

        console.log( file );
        // ajax
        $.ajax({    
            type : "POST",
            url : "ajax/upload.php",
            dataType : "json",
            data : { "file": file },
            succes : function(data) {
                console.log(data);
            }
        });
    }

    var dropzone = $( ".dropzone" ).get(0);
    ...
    dropzone.addEventListener( "drop", drop, false );
});

Samy Massoud · Answer 1 · 2014-05-07T10:07:13.147

You need to wrap your event Listener into a function like that

 var dropzone = $( ".dropzone" ).get(0);
    dropzone.addEventListener( "dragenter", function(){dragEnter(event)}, false );
    dropzone.addEventListener( "dragexit", function(){dragExit(event)}, false );
    dropzone.addEventListener( "dragover", function(){dragOver(event)}, false );
    dropzone.addEventListener( "drop", function(){drop(event)}, false );
});

EDIT : You are missing a lot of code here , and there are a better method to do this approach

Despite that you need to serialize file array to get this work Here is the final edit to your code

   $( document ).ready( function() {
    console.log( "ready!" );

    function dragEnter(event) {
        event.stopPropagation();
        event.preventDefault();
        $(this).addClass("dragging");
    }
    function dragExit(event) {
        event.stopPropagation();
        event.preventDefault();
        $(this).removeClass("dragging");
    }
    function dragOver(event) {
        event.stopPropagation();
        event.preventDefault();
        $(this).addClass("dragging");
    }

    function drop(event) {
        //console.log( "drop", event );
        event.stopPropagation();
        event.preventDefault();
        $(this).removeClass("dragging");

        var data = event.dataTransfer,
            fileList = data.files,
            file = new Array();

        for(i = 0; i < fileList.length; i++) {
            file.push( fileList[i] );
        }
        file = JSON.stringify( file);
        console.log( file );
        // ajax
        $.ajax({    
            type : "POST",
            url : "ajax/upload.php",
            dataType : "json",
            data : { "file": file },
            succes : function(data) {
                console.log(data);
            }
        });
    }

    var dropzone = $( ".dropzone" ).get(0);
    dropzone.addEventListener( "dragenter", function(){dragEnter(event)}, false );
    dropzone.addEventListener( "dragexit", function(){dragExit(event)}, false );
    dropzone.addEventListener( "dragover", function(){dragOver(event)}, false );
    dropzone.addEventListener( "drop", function(){drop(event)}, false );
});

You can check it here
Sure it will post to desired url , which is not at jsfiddler :)

I believe that this is not *needed* as you write. can you explain why it is *needed* ? -1 — Luke, May 07 '14 at 09:49
I've tried doing that but then it ignored theevent.stopPropagation(); event.preventDefault(); — GenericUser, May 07 '14 at 09:51
your edit is wrong. there is no global `event`. i think you wanted to do something like `function(ev){dragEnter(ev)}` — Luke, May 07 '14 at 09:54
dear Luke as you did -1 without discussion you can search your self why this is needed and for @Miaw check update — Samy Massoud, May 07 '14 at 09:54
without discussion? and what is with my first comment? is this no attempt on discussion? — Luke, May 07 '14 at 09:56
@SamyMassoud it works. but it is missing the path to the image, where is it stored? — GenericUser, May 07 '14 at 11:51
what do you mean with `it is missing the path to the image` , it send file to your `PHP code` so you have to store it and know it's path ? — Samy Massoud, May 07 '14 at 12:03

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

First of all, post your code HERE... at least a snippet.

You are putting the File Object into the data key of the ajax options array. this might cause the problems when serializing the data. put into the data key only data, that you need

By the way, uploading just using xhr is possible, but you cannot do it as you do it in your example, unfortunatelly...

please see this answer... jQuery Ajax File Upload

edited May 23 '17 at 12:06

Community

1
1

answered May 07 '14 at 09:47

Luke

8,235
3
22
36

I could do that, but then it still ends up to be an array. And I'll try to remember to put a snippet next time :) – GenericUser May 07 '14 at 09:53
you can edit your question and put a snippet right now. otherwise this question is just not as it should be. this will ensure that StackOverflow remains as qualitativ as it is right now. Thanks! – Luke May 07 '14 at 09:55
The problem is now that I don't seem t be able to retrieve to url op the dropped file. I've tried looking at FileReader api but i cant figure out how to get the url. Do you know how to do that? – GenericUser May 07 '14 at 15:38

Ajax post array: Uncaught TypeError: Illegal invocation

2 Answers2