PHP and Ajax: Illegal invocation

Question

I have a simple section in which a user can upload a file, now I want to display success message after a file was successfully uploaded

HTML

 <form id="uploadform" action="upload.php" method="post" enctype="multipart/form-data">
              <label for="file"><span>Filename:</span></label>
              <input type="file" id="fileupload"  name="file" id="file" /> 
              <br />
              <input id="#submit_cf" type="submit" name="submit" class="btn btn-primary" value="Upload file" />
            </form>
            <span id="success_message"></span>

Ajax;

 function doSuccess(acton,message,disable)
        {
            $(acton).show();
            $(acton+' h2').text(message);
            $(disable).attr('disabled','disabled');
        }

    $('#uploadform').on('submit',function(e){
        // This is fine, it does prevent the form from submitting
        e.preventDefault();

        var form_data = $('#fileupload').prop('files')[0]; 
            console.log(form_data);
        // Run messaging
        doSuccess('#success_message','Processing, please wait...','#submit_cf');
        // Run ajax
        $.ajax({
            url : "upload.php",
            type: "POST",
            data: form_data,
            success: function(response) {
                $('#success_message ').text(response);
            }
        });
    });

on console console.log(form_data); return this

Here is upload.php

<?php 

$allowedExts = array("jpg", "jpeg", "gif", "png", "mp3", "mp4", "wma");

$extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);

if ((($_FILES["file"]["type"] == "video/mp4")
|| ($_FILES["file"]["type"] == "audio/mp3")
|| ($_FILES["file"]["type"] == "audio/wma")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg"))

&& ($_FILES["file"]["size"] < 5000000)
&& in_array($extension, $allowedExts))

  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    echo "Type: " . $_FILES["file"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";

      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
    }
  }
else
  {
  echo "Invalid file";
  }
?>

Now when I upload the file I get the following error

jquery.min.js:4 Uncaught TypeError: Illegal invocation

What is wrong with my code?

https://stackoverflow.com/questions/12755945/jquery-and-html-formdata-returns-uncaught-typeerror-illegal-invocation — Brett Gregson, Aug 20 '19 at 10:17
@xmaster — The success function isn't being called because it errors before then, so changing the success function won't help. Your change would make it worse because `swal` is undefined. — Quentin, Aug 20 '19 at 11:00

score 4 · Accepted Answer · answered Aug 20 '19 at 10:20

4

You're passing a file to data and jQuery is erroring while attempting to encode it as form data.

You should:

pass a real form data object instead
tell jQuery not to process the data
tell jQuery not to set a Content-Type (the browser will do it automatically with a FormData object)

Thus:

var form = $('#uploadform')[0];
var form_data = new FormData(form);

$.ajax({
    url : "upload.php",
    type: "POST",
    data: form_data,
    processData: false,
    contentType: false,
    success: function(response) {
        $('#success_message ').text(response);
    }
});

answered Aug 20 '19 at 10:20

Quentin

914,110
126
1,211
1,335

Now am getting `array(0) { } NULL Invalid file` you can try it here live demo https://www.interactive-video.videomill.pl/editorv1/ – The Dead Man Aug 20 '19 at 10:22
Without ajax only PHP everything works correctly :( – The Dead Man Aug 20 '19 at 10:23
Can you add this `enctype: 'multipart/form-data',` in your ajax method – RagZ Aug 20 '19 at 10:44
1

@RagZ — That is missing the mandatory boundary parameter. Using `contentType: false` will let XHR set it from the FormData object as I said. – Quentin Aug 20 '19 at 10:46

PHP and Ajax: Illegal invocation

1 Answers1