AJAX PHP Image upload not working, $_FILES empty?

Question

I tried to research pretty much everything already, but I didnt find the final solution to fix my code. As you can see in the debug image, the file prop can be read. In PHP, I the result of print_r($_FILES); exit; is an empty array. The problem seems to be event.preventDefault();. The submit has to be prevent but the file still has to be generated.

JS

    $("#cardgeneratorForm").on("submit", function (event) {
        event.preventDefault();

        var artworkimageinput = $('#inputPicture').prop('files')[0];
        var artworkimage = new FormData();
        artworkimage.append('file', artworkimageinput); 

                $.ajax({
                    url: 'generatecard.php',
                    method: 'POST',
                    data: {
                        artworkimage: artworkimage,
                    },
                    cache: false,
                    processData: false,
                    contentType: false,
                    success : function(filename){
                    },
                    fail: function(){
                    }
                }); 

PHP

    <?php
    if ($_SERVER["REQUEST_METHOD"] == "POST")
    {
    move_uploaded_file($_FILES['file']['tmp_name'], 'artwork/' . $_FILES['file']['name']); 
    }

HTML

<form class="cardgeneratorForm" id="cardgeneratorForm" method="post" enctype="multipart/form-data" action="generatecard.php">
                                    <div class="inputPicture-container custom-file col-12">
                                        <input type="file" name="file" class="custom-file-input" accept='.jpg, .jpeg, .png, .webp' id="inputPicture" lang="en">
                                        <label class="custom-file-label" for="inputPicture">Card Picture</label>
                                    </div>

     <button class="btn btn-primary btn-block btn-xs reset-button">
                                            <span><i class="fas fa-redo"></i>Reset</span>
                                        </button>
</form>

Answer 1

Here's how you can do this.

$('#cardgeneratorForm').on('submit',function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        method:$(this).attr('method'), //dynamically getting the method of the form
        url: $(this).attr('action'), //dynamically getting the action of the form
        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);
        }
    });
});

Start uploading immediately upon file selection (optional)

$("#inputPicture").on("change", function() {
    $("#cardgeneratorForm").submit();
});

I removed some extra brackets and now it's working.

Hope it helps!!

Answer 2

use ajaxform plugin, you can find an example here example ajaxform

<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
        $(document).ready(function() {
         //   document.getElementsByName('userid')[0].value="{{ request.session.user_id }}";
            $(".createnews").click(function(){
                $("#formdata").ajaxForm({target: '#diagshow'});
            });
        });
</script>