formData not appending nor sending

Question

I know this question might be a duplicate, but I have verified on each of their methods, and none seem to work.

Basically, my issue is that FormData(); isn't working for me, whether its creating an instance with FormData(myform) or just standalone formdata() with append, it's not doing anything.

Here is my code that I'm testing this on:

HTML

<form id="form">
        <input type="hidden" name="id" id="id" value="1">
        <input type="text" name="title" id="title">
        <select name="category" id="category">
            <option value="1">1</option>
        </select>
        <textarea name="desc" id="desc"></textarea>
        <input type="file" name="cover" id="cover">
        <div id="content">
            Hello World
        </div>
        <input type="submit" name="submit" value="Submit">
    </form>
    <script src="js/jquery-2.2.1.js"></script>
    <script src="js/now.js"></script>

JAVASCRIPT (now.js)

$('#form').on('submit', function(e){
        e.preventDefault();
        var myform = e.target;
        var inputfile = document.querySelector('#cover');

        var formData = new FormData(myform);

        formData.append('file', inputfile.files[0]);
        //formData.append('cover', $('input[type=file]')[0].files[0]);
        var xhttp = new XMLHttpRequest();
        xhttp.open('POST', 'data.txt', true);
        xhttp.send(formData);
});

I would love some help guys.

PS. Console.log(formData) is a mess, nor do I see anything in it after looking through it afterwards either, and the network timeline runs, but no output.

Thanks guys,

The `#cover` element is part of the form and therefor already in `formData`. Why you're trying to append the first file to the `FormData`? — Andreas, Jul 15 '16 at 17:15
@IsmailRBOUH I'm using Chrome, and i've added enctype to the form. didn't change anything. — verdeletg, Jul 15 '16 at 17:57
@Andreas It was because the form doesn't take into account input type=file in some cases (if not all, I'm still learning). Regardless if it's in there or not, my XML request wont parse nor will the FormData have anything added into it. — verdeletg, Jul 15 '16 at 17:59
I'm not posting anything to data.txt. that was just a test file to send data to so I could see if formData was being transfered. nothing was transfering. I fixed the issue, so I guess i'm gonna answer it myself. — verdeletg, Jul 15 '16 at 19:50

score 0 · Answer 1 · edited May 23 '17 at 12:08

I have tried doing it from angular and below I put some piece of snippet which does the same thing.

$scope.upload = function () {
        var file = $scope.file;
        var obj = new Object();
        var fd = new FormData();
        fd.append("paramOne","xyz");
        fd.append("paramTwo","xyz");
        fd.append("file", file);        
        var uploadUrl = "/someUrl";
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined
            }
        }).success(function (data) {
                console.log("Call successful");
        });
    }

I hope this gives some insight in solving the problem. Something I can think of missing headers or the transformationRequest part!!

I think this post can help you Using Multipart without Form in Spring MVC

score 0 · Answer 2 · answered Jul 15 '16 at 19:52

Ok, I solved it:

I copied and pasted the code i typed here to my file. turns out I have an apostrophe on the I. i accidentally had type=fíle. Typo. Also, nothing get's outputted onto the data.txt file. Feel free to use this as a reference if you need to figure out how to do ajax forms on a basic level.

formData not appending nor sending

2 Answers2