Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I'm trying to build an application which allows for file uploads in PHP. When the file is uploaded, a download link should be appended to a specific div. I am using an ajax call to run the php script so that I can have the file download link echoed without getting stuck on the php page. (I hope that makes sense.)

Here is the html:

<form action="php/upload.php" method="POST" enctype="multipart/form-data" id="uploadform">
                Select file to upload:
                <input type="file" name="fileToUpload" id="file">
                <input id="create" type="submit" value="Upload File">
</form>

Here is the external javascript/jquery that makes the ajax call:

$(function () {
  $('form').on('submit', function (e) {
          //prevents reloading of page
          e.preventDefault();
          //get file data
          var file_data = $("#file").prop("files")[0];
          var form_data = new FormData();
          form_data.append('file', file_data);
          //run upload.php script and append result to draggable block
          $.ajax({
            type: 'post',
            url: 'php/upload.php',
            cache: false,
            data: form_data,
            success: function (data) {
              $( "#draggable"+i).append(data);
              i++;
            }
          });

        });
});

And here is the external php script that is supposed to upload the file:

<?php

    $target_path = "../uploads/";
    $target_path = $target_path . basename( $_FILES[ 'fileToUpload' ][ 'name' ] );

    if ( move_uploaded_file( $_FILES[ 'fileToUpload' ][ 'tmp_name' ] , $target_path ) ){
        //echo '<a href=' . $target_path . ' download>Download</a>';
    } 
    else {
        echo $target_path;
        //var_dump($_FILES);
    }

I get the following error: Uncaught TypeError: Illegal invocation

The problem came from trying to pass 'form_data' in the ajax call. I am trying to do that because the $_FILES array was coming up empty once the php script was ran. I need a way to make sure the file that I'm uploading gets stored in that array.

share|improve this question
    
possible duplicate of Upload image with Ajax and PHP – Forien Dec 7 '14 at 0:49

Resolved it myself. Needed to add a couple things to the ajax call:

$.ajax({
            type: 'post',
            url: 'php/upload.php',
            cache: false,
           ** contentType: false, **
           ** processData: false, **
            data: new FormData(this),
            success: function (data) {
              $( "#draggable"+i).append(data);
              i++;
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.