Ajax File Upload - Script Writes garbage in File

Question

i have a Problem with my Ajax-Fileupload Script. When I upload my Files, the Files are corrupt. When I open the File with Notepad++, i see that there are for example the following Lines:

-----------------------------22998260013704

Content-Disposition: form-data; name="0"; filename="myimage.png"

Content-Type: image/png

filecontent

-----------------------------22998260013704--

When I delete the 3 Lines bevor filecontent und the Line after filecontent, the File is ok. I have no clue, why these 4 Lines are written to the Files. I hope that somebody can help me.

Here is my Javascript-Code:

var myFiles = [];
function ajaxFileUpload() {
    var dataid  = document.getElementById("dataid").getAttribute("data-id"),
        data    = new FormData(),
        maxSize = 100.0,
        file    = null, 
        myUrl   = "xxx/save";
    
$.each(myFiles, function(key, value) {
    console.log(key+" "+value);
    file = value;
    data.append(key, value);
});
var filesize = file.size;
if ((filesize/(1024*1024)) <= maxSize) {
    $.ajax({
        type: "PUT", //<-- http://stackoverflow.com/questions/10475313/ajax-file-upload-with-xmlhttprequest
        url: myUrl,
        processData: false,
        contentType: false,
        data: data,
        beforeSend: function(xhr) {
            xhr.setRequestHeader("X-File-Name", file.name);
            xhr.setRequestHeader("X-File-Size", file.size);
            xhr.setRequestHeader("X-myid", dataid);
        },
        success: function (json) {
            //....
        },
    }); 
} else {
    //...
}
}

And here my relevant PHP-Code:

 private function copyPutFilesToTmp($directory = "") {
    $temp = "xxx";
    if (!is_dir($temp)) {
        mkdir ($temp, 0777, true);
    }
    $tmpPath            = $temp."/";
    $filename           = $_SERVER['HTTP_X_FILE_NAME'];
    $in                 = fopen('php://input', 'r');
    $ziel               = $tmpPath.$filename;
    if (!file_exists($ziel)) {
            $fileuploadok   = true;
            $out            = fopen($ziel, 'w');
            $data       = fread($in, 1024);
            while($data) {
                if ($data != false) {
                    fwrite($out, $data);                        
                } else {
                    $fileuploadok = false;
                }
                $data       = fread($in, 1024);
            }
            fclose($in);
            fclose($out);
            if ($fileuploadok === FALSE) {
                //...
            } else {
                //...
            }
        } else {
            //...
    }
    return $answer;
}

score 0 · Accepted Answer · edited May 23 '17 at 11:58

I found the problem. if I sent the file directly as data and not within a FormData it works!

So the right Code is:

var myFiles = [];
function ajaxFileUpload() {
    var dataid  = document.getElementById("dataid").getAttribute("data-id"),
        maxSize = 100.0,
        file    = null, 
        myUrl   = "xxx/save";

$.each(myFiles, function(key, value) {
    file = value;
});
var filesize = file.size;
if ((filesize/(1024*1024)) <= maxSize) {
    $.ajax({
        type: "PUT", //<-- https://stackoverflow.com/questions/10475313/ajax-file-upload-with-xmlhttprequest
        url: myUrl,
        processData: false,
        contentType: false,
        data: file,
        beforeSend: function(xhr) {
            xhr.setRequestHeader("X-File-Name", file.name);
            xhr.setRequestHeader("X-File-Size", file.size);
            xhr.setRequestHeader("X-myid", dataid);
        },
        success: function (json) {
            //....
        },
    }); 
} else {
    //...
}
}

found here: AJAX File Upload with XMLHttpRequest

Ajax File Upload - Script Writes garbage in File

filecontent

1 Answers1