Image not saving when i add ajax to the code

Question

I have a simple PHP file upload script like so ,

<?php

    $path = 'uploads/';
    $file_ext   = array('jpg','png','gif','bmp','JPG');
    $post_ext   = end(explode('.',$_FILES['photo']['name']));
    $photo_name = $_FILES['photo']['name'];
    $photo_type = $_FILES['photo']['type'];
    $photo_size = $_FILES['photo']['size'];
    $photo_tmp  = $_FILES['photo']['tmp_name'];
    $photo_error= $_FILES['photo']['error'];
    //move_uploaded_file($photo_tmp,"uploads/".$photo_name);

    echo $photo_tmp;

    if((($photo_type == 'image/jpeg') || ($photo_type == 'image/gif')   ||
       ($photo_type == 'image/png') || ($photo_type == 'image/pjpeg')) &&
       ($photo_size < 2000000) && in_array($post_ext,$file_ext)) {

        /* Understand in-Array !! */

        if($photo_error > 0 ){
            echo 'Error '.$photo_error;
            exit;
        }else{
            echo $photo_name.' Uploaded !';
        }
        if(file_exists($path.$photo_name)){
            echo 'There is '.$photo_name;
        }else{
            //new photo name and encryption
            $new_name = explode('.',$photo_name);
            $photo_name = 'erkan_'.md5($new_name[0]).'.'.$new_name[1];

            //move to directory
            if(move_uploaded_file($photo_tmp,$path.$photo_name)){

                return $photo_name;
            }
        }
    }

?>

The form code:

<form action="fileupload.php" method="post" enctype="multipart/form-data">
            <input type="file" name="photo" id="fileBox">
            <button type="submit">SUBMIT</button>

Using the above script my file gets saved perfectly fine , but when i add a little ajax to the mix , like so:

$(function(){
    $('button[type="submit"]').on('click' , function(e){
        e.preventDefault();
        var formData = new FormData();
        formData.append('photo', $('input[type=file]')[0].files[0]); 
        $.ajax({
            url: 'fileupload.php',
            data: formData,
            // THIS MUST BE DONE FOR FILE UPLOADING
            contentType: false,
            processData: false,
            // ... Other options like success and etc
        });
    });
});

Now when i upload an image the image is not saved in my uploads folder , WHY ?

Try to dump the request, check, what ajax is sending to you and in which format. Also i would try giving id to the form and then just new FormData($('#formWithFiles')[0])... — Tadeáš Jílek, Dec 01 '15 at 07:39
Check this @AlexanderSolonik http://stackoverflow.com/questions/19447435/ajax-upload-image. This may help. — Nana Partykar, Dec 01 '15 at 07:42
This http://stackoverflow.com/questions/28644773/php-ajax-image-uploading-with-formdata seems more relevant , since i am using formData() , but i still don't have a working solution ! — Alexander Solonik, Dec 01 '15 at 07:43
@NanaPartykar OMG !! i notice that the same sec as u , yes that was the problem ! DANM , i feel so stupid ! — Alexander Solonik, Dec 01 '15 at 07:47
I've answered this because it will help other user to find it easily. Glad i helped you @AlexanderSolonik. Thanks. — Nana Partykar, Dec 01 '15 at 07:49

score 1 · Accepted Answer · answered Dec 01 '15 at 07:49

You missed, type: "POST", in your <script></script> tag.

$(function(){
    $('button[type="submit"]').on('click' , function(e){
        e.preventDefault();
        var formData = new FormData();
        formData.append('photo', $('input[type=file]')[0].files[0]); 
        $.ajax({
            type: "POST",  
            url: 'fileupload.php',
            data: formData,
            // THIS MUST BE DONE FOR FILE UPLOADING
            contentType: false,
            processData: false,
            // ... Other options like success and etc
        });
    });
});

Franco · Answer 2 · 2015-12-01T17:53:49.567

You have some errors in the ajax call.

1- I gave your form an Id

2- You are not getting the values from the form.

$(function(){
    $('#submitBtn').on('click' , function(e){
        e.preventDefault();
            var form = $('form#myForm');

            var formdata = false;

            if (window.FormData){
                formdata = new FormData(form[0]);
            }

            var formAction = form.attr('action');

            $.ajax({
                url: formAction,
                data : formdata ? formdata : form.serialize(),
                cache : false,
                contentType : false,
                processData : false,
                dataType: "json",
                type : 'POST',
                resetForm: true,
            })
            .done(function(data) {
               //do something with the returned data
            }
     });
 });

Harry Bomrah · Answer 3 · 2015-12-01T07:46:28.187

-2

I think your file name is not correctly set. so your php is not able to get that file. Try this

 formData.append('photo', $('input[type=file]')[0].files[0],$('input[type=file]')[0].files[0].name);

edited Dec 01 '15 at 07:46

answered Dec 01 '15 at 07:35

Harry Bomrah

1,658
1
11
14

Ok i then i think your file is not appended to `formdata`. I ll edit the answer. – Harry Bomrah Dec 01 '15 at 07:42
That's correct @Harry He couldn't because he was also not referecing to the form correctly. I rewrote the ajax call and I put it here above, this is what I constantly use for my uploads. Hope this helps! – Franco Dec 01 '15 at 17:52

Image not saving when i add ajax to the code

3 Answers3