$_FILES empty after AJAX upload

Question

I'm developing a simple script to upload a file through AJAX but after form submission, the variable $_FILES is completely empty, although the file exists within php://input, but with no simple way to extract only the file. Anyone knows the reason and/or solution to this problem?

I've checked all the common solutions. enctype="multipart/form-data" rights to temp folder form-tags closing doublequotations and the output of the file-input in JS

Nothing has solved my problem.

RED This is NOT jquery, and I haven't found a duplicate in 24h. So please don't mark as duplicate unless you're sure it is one.

HTML

<form action="upload.php" method="POST" enctype="multipart/form-data" id="testf">
<input type="file" name="file" accept=".jpg">
<input type="submit" value="Skicka">
</form>

JavaScript

let data = document.querySelector("#testf");
data.onsubmit = function() {
    var http = new XMLHttpRequest();
    http.open("upload.php", data.action);
    http.onreadystatechange = function () {
        console.log(http.response);
    }
    http.setRequestHeader("Content-type", data.enctype);
    http.send(new FormData(data));
    event.preventDefault();
    return false;
}

PHP

<?php
var_dump($_FILES);
?>

This should print the contents of my file, but

array(0) {}

is all I get. Request payload is:

------WebKitFormBoundaryZVGq8suqFUUSFDtW
Content-Disposition: form-data; name="file"; filename="david.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryZVGq8suqFUUSFDtW--

Possible duplicate of [jQuery Ajax File Upload](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — bassxzero, Jul 03 '19 at 22:04

Edwin Dijas Chiwona · Accepted Answer · 2019-07-03T22:35:10.957

1

You have a problem with your JavaScript method XMLHttpReqest. It takes at least two parameters: Method and url. Full parameters are:method, url, async, user, password

Change your code from:

 http.open("upload.php", data.action);

To:

 http.open("post", data.action );

Update: Also remove

http.setRequestHeader("content-type", "multipart/form-data")

Form data already sets its headers for content-type.

edited Jul 03 '19 at 22:35

answered Jul 03 '19 at 22:11

Edwin Dijas Chiwona

610
6
14

1

For reference, see [XMLHttpRequest.open()](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open). – showdev Jul 03 '19 at 22:21
I didn't do that switch on the original code, but still makes no difference in result, unfortunately. – David Andersson Jul 03 '19 at 22:24
1

Try to comment out the setReuestHeader. Give me feedback – Edwin Dijas Chiwona Jul 03 '19 at 22:29
Please, mark the answer as correct. Also updated it. – Edwin Dijas Chiwona Jul 03 '19 at 23:20
Sorry, that did it. I had no idea the browser set the content-type header by itself to the corresponding formdata so that php can receive it. Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaOHix0yHdFVLGFaG And not just: Content-Type: multipart/form-data; Thank you! – David Andersson Jul 04 '19 at 06:38

score -1 · Answer 2 · answered Jul 03 '19 at 22:57

-1

Did you checked if memory limit is set to -1 or high enough in php. Sometime on Apache or iis server, there is also a block on high file uploads.

answered Jul 03 '19 at 22:57

zyad osseyran

106
4

Checked. This is small files and the limit's set to 128M. – David Andersson Jul 04 '19 at 06:18

$_FILES empty after AJAX upload

2 Answers2

Linked