Image Uploading -- PHP File not accessed correctly

Question

I'm currently working on a script to allow users to upload an image. The script will then return a string containing the file name that will be used in a simplistic text editor.

As of right now, the AJAX call to my PHP file (update.php) does not seem to be working correctly. When I check to see if anything is in $_FILES, I find that it is empty.

I'm still relatively new to PHP and AJAX so I've been looking quite extensively to figure out my problem but have yet to find anything that has fixed the issue.

This is my HTML Code:

<form action="javascript:;" method="post" id="customFRM" enctype="multipart/form-data">
    <input type="hidden" name="rec" id="rec" value="0" />
    <div style="background-color:#3C6893;padding:.5em 15px;width:276px;float:right;color:#fff;">Manage IS Tips</div>
    <textarea name="customPost" id="customPost" cols="60" rows="5"></textarea>
    <br />
    <div style="clear:both;">
        <div style="display:inline;">
            <input name="Link" id="add-link" type="button" value="Insert Link" class="blue-btn">
            <input name="Bold" id="add-bold" type="button" value="Bold" class="blue-btn">
            <input name="Image" id="addImg" type="file" value="Insert Image" class="blue-btn" accept="image/gif, image/jpeg">
        </div>
        <div style="padding-top: 15px">
            <input name="Submit" id="save-custom" type="button" value="Save" class="blue-btn">
        </div>
    </div>
</form>

This is my script that pertains to the Image Upload:

$("#addImg").change(function(event){
        //event.preventDefault(); // need to pick file
        //uploadImg();
        var storedFileName = uploadImg();
        $("#customPost").val($("#customPost").val() + '[img=(' + storedFileName + ')/][/img]'); //on render - /images/directory/storedFileName.ext

    });

function uploadImg() {

    //Needs to make an .ajax request to upload/php script. Script should return the file name of the processed file.

    //should check for file type

    var fileName = false;
    var formData = new FormData();

    fileName = $("#addImg")[0].files[0].name;//don't use this one
    console.log($("#addImg")[0].files[0]);

    formData.append("image", $("#addImg")[0].files[0]);
    console.log(formData);
    alert(formData);
    //*
    //upload file   
    $.ajax({
        url: "upload.php",        // Url to which the request is send
        dataType: "json",
        type: "POST",             // Type of request to be send, called as method
        data: formData,           // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        contentType: false,       // The content type used when sending data to the server.
        cache: false,             // To unable request pages to be cached
        processData:false,        // To send DOMDocument or non processed data file it is set to false
        success: function(data){
            //alert(data);
            //console.log(data);
            fileName = data.image.name;
            alert(fileName);
            //parsed=JSON.parse(data);

            //fileName=parsed.fileName;
            },
        error: function(data){

            console.log(data);
        }
    });
        //*/

    return fileName;
};
</script>

Currently, on upload.php I just have:

<?php
    //echo "test test echo";
    echo json_encode($_FILES);
?>

Forums I've looked at for help:

jQuery AJAX file upload PHP
Access files posted through AJAX using $_FILES variable
jQuery AJAX file upload PHP
jQuery Ajax File Upload

Answer 1

You need to make few changes in your uploadImg() function, such as:

• Since you're encoding $_FILES using json_encode() function on the server side, change the dataType setting to json. dataType is the type of data you're expecting back from the server. This way you don't have to parse the response in the success() callback function, AJAX will take care of that.
• Since you're sending images using FormData object, set the contentType to false.

• You're getting the file name in the success() callback function in the wrong way, it should be like this:

  success: function(data){
      fileName=data.image.name;
      alert(fileName);
  }
  

So your uploadImg() function should be like this:

function uploadImg() {
    var fileName = false;
    var formData = new FormData();

    fileName = $("#addImg")[0].files[0].name;
    formData.append("image", $("#addImg")[0].files[0]);

    $.ajax({
        url: "upload.php",          // Url to which the request is send
        dataType: "json",         // Type of data you're expecting back from server
        type: "POST",             // Type of request to be send, called as method
        data: formData,           // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        contentType: false,       // The content type used when sending data to the server.
        cache: false,             // To unable request pages to be cached
        processData:false,        // To send DOMDocument or non processed data file it is set to false
        success: function(data){
            fileName=data.image.name;
            alert(fileName);
        },
        error: function(data){
            console.log(data);
        }
    });
    return fileName;
}