posting formData to PHP script for file upload

Question

Not sure why I am unable to send the formData over to my PHP script.

I have used this same code before with success.

Here is the HTML:

<form role="form" id="uploadForm" name="uploadForm" action="index.php" enctype="multipart/form-data" method="post">
  <input type="file" id="file" name="file" />
  <button type="button" id="uploadSubmit" class="btn btn-sm btn-flat btn-primary uploadSubmit">Upload Proforma</button>
 </form>

Here is the JavaScript

$('#uploadSubmit').on('click', function(e){
  e.preventDefault();

  var formData = new FormData();
  formData.append("file", document.getElementById('file').files[0]);

  $.ajax({
    url: 'api/uploadDoc.php',
    method: "POST",
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data){
      console.log(data);
    },
    error: function(jqHHR, textStatus, errorThrown){
      console.log('fail: ' + errorThrown);
    }
  });
  return false;
});

Here is the PHP uploadDoc.php script:

<?php
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: GET, POST');
  header("Access-Control-Allow-Headers: X-Requested-With");

  print_r($_POST); 

?>

I just added the headers in the PHP script, as found here:

FormData not posting data to php backend script

Using print_r($_POST), I am only getting a blank array in the console that looks like the following:

Array
(
)

Not sure what I am doing wrong.

Why is the post showing a blank array and the file information or formData?

How do I correct this issue so that the PHP script can retrieve the file that I am uploading?

Take a look at `$_FILES` instead of `$_POST` to find the posted files. — Teemu, Dec 08 '20 at 18:11
check out this example and alter your code like this :https://www.cloudways.com/blog/the-basics-of-file-upload-in-php/ — Hammad Ahmed khan, Dec 09 '20 at 07:49

score 0 · Answer 1 · answered Dec 08 '20 at 18:11

0

You need to get the files using the variable $_FILES instead of $_POST

answered Dec 08 '20 at 18:11

Fernando Del Cantão

92
9

I tried print_r($_FILES) and got the same empty array in the console. – John Beasley Dec 08 '20 at 19:30

score 0 · Answer 2 · answered Dec 08 '20 at 19:16

You can make sure the uploaded file by using is_uploaded_file. But if you want to retrieve the file contents, simply you can use readfile as following:

if (!is_uploaded_file($_FILES['file']['tmp_name'])) {
  die("Possible file upload attack: filename '". $_FILES['file']['tmp_name'] . "'.");
}

echo "File ". $_FILES['file']['name'] ." uploaded successfully.\n";
echo "Displaying contents\n";

readfile($_FILES['file']['tmp_name']);

score 0 · Accepted Answer · answered Dec 08 '20 at 20:07

I found my answer here:

jQuery AJAX file upload PHP

I updated my onClick event to read as follows:

$('#uploadProformaSubmit').on('click', function(e){
  e.preventDefault();

  var file_data = $('#file').prop('files')[0];  // <-- added this
  var form_data = new FormData();                  
  form_data.append('file', file_data);

  $.ajax({
    url: 'api/uploadDoc.php',
    method: "POST",
    type: "post", // <-- added this
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data){
      console.log(data);
    },
    error: function(jqHHR, textStatus, errorThrown){
      console.log('fail: ' + errorThrown);
    }
  });
  return false;
});

Over in the PHP script, I could do the following:

<?php
    if(isset($_FILES['file'])){

    $file = $_FILES['file']['tmp_name'];
    $handle = fopen($file, "r");
    $i = 0;

    echo "this is the file " . $file;
?>

And now the file is posting.

Maybe because the site is using an older version of JQuery (1.8.2.min.js), though I cannot be certain.

posting formData to PHP script for file upload

3 Answers3