$.ajax not uploading files using data: object array method

Question

Ive searched on Stack overflow all over the place and could not find a solution or a post that is close to my problem.

So if this has been posted before I do apologies.

I am posting some information using a different method rather than posting a form which I will explain after I show you the code :)

Jquery:

    $("#submit-add-cpos").on('click',function(){

    var checkHowManyInstallments = $('#installment-ammount').val();
                var checkCpoNumber = $('#addcponumber').val();
                var checkCpoTotalPrice = $('#addcpoprice').val();
                var checkCpoContactName = $('#addcpocontactname').val();

                var form_data = new FormData();

                form_data.append("type", 'addcpo');
                form_data.append("quoteid", '<?php echo $_GET['id']; ?>');
                form_data.append("installmentamount", checkHowManyInstallments);
                form_data.append("cponumber", checkCpoNumber);
                form_data.append("costcode", '<?php echo $quotecostcode; ?>');
                form_data.append("cpocontactname", checkCpoContactName);
                form_data.append("cpotitle", '<?php echo $quotetitle; ?>');

                var checkDynamicValues = '';
                var checkDynamicValue1 = '';
                var checkDynamicValue2 = '';
                var checkmakename1 = '';
                var checkmakename2 = '';
                if(checkHowManyInstallments != 'undefined' && checkHowManyInstallments != '' && checkHowManyInstallments != 0){

                    for(var makingi = 1; makingi <= checkHowManyInstallments; makingi++){

                        checkDynamicValue1 = $('#cpo-adddate-' + makingi).val();
                        checkDynamicValue2 = $('#cpo-addprice-' + makingi).val();

                        form_data.append('cposadddate' + makingi, checkDynamicValue1);
                        form_data.append('cposaddvalue' + makingi, checkDynamicValue2);

                    }

                }

                $.ajax({
                    url: '/Applications/Controllers/Quotes/ajax-add-sin.php',
                    dataType: 'script',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data, // Setting the data attribute of ajax with file_data
                    type: 'post',
                    success: function(data) {
                    $('body').html(data);
                    }
                });

});

So from this script I get all the fields from within the form, including some dynamic ones.

The reason why I am doing it like this instead of the easier way of:

$("#formname").on('submit',function(){

    $.ajax({
        url: "xxxxxxxxxx/xxxxx/xxxx/xxxx.php",
        type: "POST",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function(data){

        }           
    });

});

Is because for some reason it will not find the posted information no matter what I tried, so the only way I could do it is to find each id and get the value from it.

Now the issue is, uploading a file, you can not simply upload a file this way because nothing is posted.

How would I go about uploading a file if not posting a form?

Thanks

score 0 · Answer 1 · answered Apr 28 '17 at 12:49

The reason why it was not posting the file is simply because I did not give it a file to post...

18 hours straight of work has not agreed with me here.

Basically I need to add the following code

var checkCpoFiles = $("#addcpofile").prop("files")[0];
form_data.append("cpofile", checkCpoFiles);

Now all works

:)

score 0 · Answer 2 · edited May 23 '17 at 12:17

Please go through this page Ajax Upload image

Here's sample code, it might help

<html>
    <head>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    </head>
<body>

    <form enctype="multipart/form-data" action="uploadfile.php" method="POST" id="imageUploadForm">

        <input type="file" name="upload" />
        <input type="submit"/>

    </form>

</body>
<script>
$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));
});
</script>

uploadfile.php

<?php

if(move_uploaded_file($_FILES['upload']['tmp_name'],$_FILES['upload']['name'])) {

    echo "File uploaded successfully";

} else {

    echo "Unable to upload the file";

}
?>

Hope it helps! All the best!

$.ajax not uploading files using data: object array method

2 Answers2