TypeError: 'append' called on an object that does not implement interface FormData. Again

Question

I'm getting these errors in firebug when trying to do an ajax upload, but I can't figure out why. I was unable to find an answer in any previous posts.

1.TypeError: 'append' called on an object that does not implement interface FormData. list.appendChild(li);

2.TypeError: list is null list.appendChild(li);

<?php

    if(!empty($_FILES['images'])){
        if($_FILES['images']['error'][$key]== 0 ){
            move_uploaded_file($_FILES['images']['tmp_name'], "../profile/1.jpg");
            $uploaded='1';
            ///create thumbnail/////
        }
        echo 'Image uploaded'; 
    }

?>

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../media/js/js.js"></script>

    </head>
    <body>

        <form id="editUserProfile" method="post" action="" enctype="multipart/form-data">
            <input type="file" id="images" name="images" multiple />
            <button type="submit" id="btn" >Save</button>
        </form>

        <div id='response'>

            <ul id='image-list'>

            </ul>

        </div>

        <script type='text/javascript'>

        (function (){

            var input=document.getElementById('images'),
                formdata=false;

            function showUploadedItem(source){
                var list=document.getElementById('image-list'),
                    li=document.createElement('li'),
                    img=document.createElement('img');
                img.src=source;
                li.appendChild(img);
                list.appendChild(li);
            }

            if(window.FormData){
                formdata=new FormData();
                document.getElementById('btn').style.display="none";
            }

            input.addEventListener('change', function(evt){
                document.getElementById('response').innerHTML='Uploading...'; 
                var i=0,len=this.files.length,img,reader,file;

                for(; i< len; i++){
                     file=this.files[i];

                     if(!!file.type.match(/image.*/)){
                          if(window.FileReader){
                              reader = new FileReader();
                              reader.onloadend=function(e){
                                  showUploadedItem(e.target.result, file.fileName);
                              };
                              reader.readAsDataURL(file);
                          }
                          if(formdata){
                              formdata.append("images[]", file);
                          }
                     }
                }

               if(formdata){
                   $.ajax({
                       url:'a.php',
                       type:'POST',
                       data:formdata,
                       proccessData:false,
                       contentType:false,
                       success:function(res){
                           document.getelementById('response').innerHTML=res;
                       }
                   });
               }
            },false);
        }());

        </script>
    </body>
</html>

You are passing two parameters to showUploadedItem() when you call it inside your input.addEventListener('change') code block. showUploadedItem() only accepts one, so source is being set to e.target.result and file.filename is being ignored. — Josh Durham
– Josh Durham, Commented Feb 23, 2014 at 1:15

Josh Durham · Accepted Answer · 2015-12-09 17:13:40Z

2

FormData Issue

The first thing I would suggest is adding

proccessData: false,
contentType: false

to your ajax request, but you're already doing that.

Without more detail or being able to see a running example, I suggest checking out this article and the comments. It may provide a little more insight into your issue.

Null Referrence Issue

document.getElementById('response').innerHTML = res; is replacing the html inside of <div id='response'> with that of res. So,

<div id='response'>
    <ul id='image-list'>
    </ul>
</div>

becomes

<div id='response'>
    <!-- Content of 'res' -->
</div>

(NOTE: if you use += instead, you'll retain the original html)

Now assuming res does not have an element with id='image-list', when you try to get your image list in showUploadItem(...), it will not exist, so list = null

 list = document.getElementById('image-list') // list will be null

Since you would like to display "Uploading..." to the user, an easy solution is adding an element to your page like

<div id="LoadingText">
    Uploading...
<div>

and just toggle the visibility of it when you want to display uploading while simultaneously hiding the content of <div id='response'> if you don't want that to be displayed.

When uploading has finished, hide the uploading text and show your response.

edited Dec 9, 2015 at 17:13

answered Feb 23, 2014 at 2:49

Josh Durham

1,6621 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Durham Over a year ago

@Alex did this answer help you or are you still getting the same error?

Collectives™ on Stack Overflow

TypeError: 'append' called on an object that does not implement interface FormData. Again

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related