Reputation: 756

File Upload works fine as a form, but as an AJAX query returns 403

I'm trying to do a file upload using AJAX but I get a 403 server response... but when I do the same thing as a non-AJAX request, it works fine. Here is my HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type="text/javascript">

    function importFileAJAX() {
        fileData = $('#importfileAJAX').prop('files')[0];
        formData = new FormData();
        formData.append('file', fileData);
        $.ajax({
            method: "POST",
            url: "testimportfiles.php",
            data: formData,
            processData: false
        }).done(function(xml) {
            alert( $(xml).find('result').text());
        }).fail(function(jqXHR, errorText, exceptionText) {
            alert("Error: " + jqXHR.responseText);
        });
    }
    
</script>
</head>

<body>

    AJAX: <input id="importfileAJAX" type="file" />
    <button onclick="importFileAJAX();">Import Files</button>
    
    <hr />
    
    <form action="testimportfiles.php" method="post" enctype="multipart/form-data">
        Non-AJAX: <input type="file" name="file" id="file">
        <input type="submit" value="Import Files" name="submit">
    </form>

</body>

</html>

My php file (testimportfiles.php) is just this:

<?php

header('Content-Type: text/xml');
print("<?xml version=\"1.0\" encoding=\"UTF-8\"?><root>");
print("<result>0</result>");
print("</root>");

The second method works just fine, but the first method returns a 403 error from the server. Is this a configuration issue with my server, or am I just doing something wrong in my code?

Thanks!

EDIT: I'm leaving this question unanswered in case there's a better way, but I've solved my problem using AjaxFileUpload.js, which mimics an AJAX request by dynamically creating a form and targeting the response to a dynamically-created iFrame. The server response is then copied from the iFrame.

I'm still curious if a true AJAX transaction is possible (i.e., something that doesn't require a browser window or iFrame as a target for the server response), but this will work for me in my current project.

Upvotes: 2

Answers (3)

TobyRush

Reputation: 756

Thanks to everyone, especially JealPaul98 and julekgwa for the answers that worked on their servers... using their code I was able to backtrack and discover that I needed contentType: false in my initial AJAX call. So my working importFileAJAX function became:

function importFileAJAX() {
  fileData = $('#importfileAJAX').prop('files')[0];
  formData = new FormData();
  formData.append('file', fileData);
  $.ajax({
    method: 'POST',
    url: "testimportfiles.php",
    data: formData,
    contentType: false,
    processData: false
  }).done(function(xml) {
    alert($(xml).find('result').text());
  }).fail(function(jqXHR, errorText, exceptionText) {
    alert("Error: " + jqXHR.responseText);
  });
}

Upvotes: 0

Junius L

Reputation: 16132

I think the problem is with your PHP file on the server, Using this function the code works on my side.

function importFileAJAX() {
    fileData = $('#importfileAJAX').prop('files')[0];
    formData = new FormData();
    formData.append('file', fileData);
    $.ajax({
        url: "testimportfiles.php",
        data: formData,
        type: 'POST',
        contentType: false,
        processData: false,
    }).done(function (xml) {
        console.log(xml);
       // alert( $(xml).find('result').text());
    }).fail(function (jqXHR, errorText, exceptionText) {
        alert("Error: " + jqXHR.responseText);
    });
}

Then in your testimportfiles.php

$file = $_FILES['file']['name'];
$tmp_file = $_FILES['file']['tmp_name'];

if (move_uploaded_file($tmp_file, "dir/to/upload/$file")) {
    echo "Success";
}else {
    echo "error";
}

Upvotes: 1

JeanPaul98

Reputation: 492

When I try your code, I get the result 0 for both methods so it's definitely something server side (may or may not be permission issues)....but this is what I use to upload files. It can be tweaked how you want it but this is one way to do it. I will work to see if I can get a different method using your code.

<button type="button" onClick="return uploadFile();">Post Status</button>

function _(el) {
    return document.getElementById(el);
    // I honestly don't know if these 3 lines of code are 
    //necessary but idk what will happen if I delete them so....
}

function uploadFile() {
    var file = _("filetoupload_id").files[0];
    var formdata = new FormData();
    formdata.append("file12", file);
    var ajax = new XMLHttpRequest();
    ajax.open("POST", "path/to/upload.php");
    ajax.send(formdata);
}

UPDATE I tried the code below and it also worked on my server......

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
    AJAX: <input id="file1" type="file" />
    <button onclick="return importFileAJAX();">Import Files</button>
    <hr />
    <form action="tupload.php" method="post" enctype="multipart/form-data">
        Non-AJAX: <input type="file" name="file1" id="file1">
        <input type="submit" value="Import Files" name="submit">
    </form>
    <script type="text/javascript">
        function _(el) {
            return document.getElementById(el);
        }
        function importFileAJAX() {
            var file = _("file1").files[0];
            var formdata = new FormData();
            formdata.append("file1", file);
            $.ajax({
                method: "POST",
                url: "tupload.php",
                data: formdata,
                processData: false
            }).done(function(xml) {
                alert( $(xml).find('result').text());
            }).fail(function(jqXHR, errorText, exceptionText) {
                alert("Error: ");
            });
        }

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

Upvotes: 1

File Upload works fine as a form, but as an AJAX query returns 403

Answers (3)

Related Questions