2

I'm trying to post data using ajax, jquery, formdata and then process it using php i'm not able to see where is the error to process it in my PHP file. The final result is an empty array.

HTML CODE

<form action="ajax.php?action=upload" method="POST" name="submit_upload_album" id="submit_upload_album" enctype="multipart/form-data">
    <input type="hidden" id="input1" name="input1" value="input1">
    <input type="hidden" id="input2" name="input2" value="input2">
    <input type="hidden" id="input3" name="input3" value="input3">
    <input type="hidden" id="input4" name="input4" value="false">
    <input type="hidden" id="input5" name="input5">
    <input type="hidden" id="input6" name="input6" value="auto">
    <input id="title" name="title" class="form-control" type="text" maxlength="70" required/>
    <textarea id="description" class="form-control" name="description" rows="4" style="resize: vertical;"></textarea>
    <input id="file1" type="file" name="fileupload[]" accept="video/*" required/>
    <input id="file2" type="file" name="fileupload[]" accept="audio/*" required/>
    <input id="file3" type="file" name="fileupload[]" accept="video/*" required/>
</form>

JS code

<script type="text/javascript">
    $(document).ready(function(e){
        // Submit form data via Ajax
        $("#submit_upload_album").on('submit', function(e){
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: "ajax.php?action=upload",
                data: new FormData(this),
                async: true,
                beforeSend: function(){
                    /*$('input[type=submit]').attr("disabled","disabled");*/
                },
                success: function(response){
                    $('#answer').html(response);
                },
                contentType: false,
                cache: false,
                processData:false
            });
        });
    });
</script>

PHP Code

<?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST');
    header("Access-Control-Allow-Headers: X-Requested-With");
    echo '<pre>';
    var_dump($_FILES);
    echo '<br>';
    var_dump($_POST);
    echo '</pre>';
?>

Result

array(0) {}

array(0) {}
aryan
  • 31
  • 4
  • 1
    I suggest trying like this example (including using a single file input with the "multiple" attribute, instead of several): https://stackoverflow.com/a/56841778/5947043 – ADyson May 11 '20 at 12:32

2 Answers2

0

$(this) is not accessible in ajax request you should modify your code as follows:

$("#submit_upload_album").on('submit', function(e){
            e.preventDefault();
            let formData = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: "ajax.php?action=upload",
                data: new FormData(formData),
                async: true,
                beforeSend: function(){
                    /*$('input[type=submit]').attr("disabled","disabled");*/
                },
                success: function(response){
                    $('#answer').html(response);
                },
                contentType: false,
                cache: false,
                processData:false
            });
        });

Hopefully this is helpful for you

Mr Perfect
  • 334
  • 1
  • 2
  • 12
  • Not sure `serialize` is actually needed here – ADyson May 11 '20 at 10:36
  • 1
    unfortunately not working giving me an error `Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.` and this solution without serialize give the same error `let formData = $(this);` – aryan May 11 '20 at 11:36
  • also tried this `new FormData(document.getElementById("submit_upload_album"))` and it return an empty array as first return – aryan May 11 '20 at 11:39
0

After checking the PHP configuration the problem was coming from

post_max_size and upload_max_filesize

they were limited on 2M so it was blocking all other posted parameters.

aryan
  • 31
  • 4