Send $_FILES through AJAX, with input multiple

Question

I'm trying to submit a form with AJAX, containing two variables and an input type="file" multiple. Form works as it should if it's submited in the clasic way. But when I try to AJAX it, the $_FILES[] array comes out empty on the .php side. I've tried everything I know, doesn't work.

Here's the code:

HTML

<form action="ajax/process.php" enctype="multipart/form-data" method="post" id="admUploadImg">
<input type="hidden" name="postOp" value="adm-upload-img">
<input type="hidden" name="pid" value="<?= $prodData['id'] ?>">
<div class="row my-2 mx-0 justify-content-center">
    <div class="col-12 col-sm-2 tb-1 text-left text-sm-right">Imagini 
        <label for="admProdImgs" class="btn btn-success btn-sm p-0 alert-success tip mb-1" title="Adauga imagini"><span class="icon-plus"></span></label>
        <input type="file" multiple id="admProdImgs" name="productImgs[]" class="filestyle invisible" data-form="admUploadImg" required accept="image/jpeg,image/png">
    </div>
</div>

Javascript

$('#admUploadImg').submit(function(e){
    e.preventDefault();
    var formData = new FormData(this);
    $.post('ajax/process.php', formData, function(response){
        console.log(response);
    });
    console.log(formData);
});

However, this generates the following error:

TypeError: 'append' called on an object that does not implement interface FormData.

So, I've changed the AJAX to that:

$('#admUploadImg').submit(function(e){
    e.preventDefault();
    var formData = $('#admUploadImg').serialize();
    $.post('ajax/process.php', formData, function(response){
        console.log(response);
    });
    console.log(formData);
});

But this time, the $_FILES[] array comes empty. It's driving me crazy, I have no idea why it doesn't work. Help!

Tanner Babcock · Accepted Answer · 2018-01-31 09:16:53Z

This example is based on what I use, it works for me. I would suggest making a button or something, as there doesn't seem to be any visual element that a user could use to submit the form (although this might be intentional).

<form enctype="multipart/form-data" id="admUploadImg" method="post">
    <input type="hidden" name="postOp" value="adm-upload-img" />
    <input type="hidden" name="pid" value="<?= $prodData['id'] ?>" />
    <div class="row my-2 mx-0 justify-content-center">
        <div class="col-12 col-sm-2 tb-1 text-left text-sm-right">Imagini 
            <label for="admProdImgs" class="btn btn-success btn-sm p-0 alert-success tip mb-1" title="Adauga imagini"><span class="icon-plus"></span></label>
            <input type="file" multiple id="admProdImgs" name="productImgs[]" class="filestyle invisible" data-form="admUploadImg" required accept="image/jpeg,image/png">
        </div>
        <button id="go">Upload</button>
    </div>
</form>

Since you're using Ajax and not uploading the form with traditional HTML, you will want to remove the action="ajax/process.php" attribute. This keeps the form from submitting in the traditional way. Here's the JavaScript.

$("#go").click(function() {
    var f = $("#admUploadImg")[0];
    var form_data = new FormData(f);
    
    var file_data = $("#admProdImgs").prop("files");
    $.each(file_data, function(index, value) {
        form_data.append("productImgs", file_data[index]);
    });
    // unsure about this part, maybe try "productImgs[]" if the above doesn't work
    
    $.ajax({
        type: "post",
        url: "ajax/process.php",
        dataType: "text",
        contentType: false,
        processData: false,
        success: function (result) {
            console.log(result);
        }
    });
    console.log(form_data);
});

I've changed the above JavaScript to the .click() event for #go, the button. I also switched to an .ajax() call instead of a .post() call. You wouldn't think dataType: "text" would work, but that is what works for me. What I use on my own website is almost the same thing, only my form takes only 3 individual <input type="file" /> elements. I tried to implement .each() to loop through all of the files the user might have selected.

Lucian Minea · Accepted Answer · 2018-01-31 09:58:06Z

I've managed to figure this out, thanks to a comment on another issue, regarding the formData() handling.

Turns out everything inside a form is being sent, even from an onChange event. The trick is to handle the formData corectly, and there were I was geting it wrong.

With this code, I didn't even had to go through $_FILES[] from jQuery. I just submited the form as it was.

And I even succeeded to put a progress bar that actually works. :)

Here's the Javascript code

$('#admUploadImg').submit(function(e){
    e.preventDefault();
    showFadeProgress();
    var formData = new FormData(this);
    $.ajax({
        url : "ajax/process.php",
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.onprogress = function(e) {
                $('#admFilesUpload').css({width: Math.floor(e.loaded / e.total *100) + '%'});
            };
            return xhr;
        },
        type: "POST",
        data : formData,
        processData: false,
        contentType: false,
        success:function(response){
            $('#admProdImages').html(response);
            setTimeout(function(){
                restoreFadePopup();
            },100);
        }
    });
});

The showFdeProgress() function just shows a modal with the message and the progress bar.

The restoreFadePopup() function close that modal after the whole processing is done.

For #Tanner Babcock, don't know what to say, I didn't test your code, I already came with this sollution, but I'll upVote your answer. Thank you.

Collectives™ on Stack Overflow

Send $_FILES through AJAX, with input multiple

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related