$_FILES empty when sending to PHP server

Question

I'm trying to record videos on browsers of mobile devices and send that videos to my PHP server. But when I inspect/debug my code in PHP the array $_FILES is empty. I'm sure that something is wrong in my code of JavaScript because of my lack of knowledge.

Here is my HTML / Javascript code :

<body>
    <header>
        <h1>HTML5 Video &amp; Audio Input</h1>
        <h2>Capturing Media with HTML and passing the data to PHP</h2>
    </header>
    <form method="post" action="serverTest.php" id="myform" enctype="multipart/form-data">
        <label for="capture">Capture Media</label>
        <input name= "uploadedVideo" type="file" id="videograbado" accept="video/*" capture="user-scalable" multiple />
        <video id="player" controls></video>
    </form>
    <script>
        document.addEventListener('DOMContentLoaded', (ev) => {
            let form = document.getElementById('myform');
            //get the captured media file
            let input = document.getElementById('videograbado');

            input.addEventListener('change', (ev) => {
                console.dir(input.files[0]);
                if (input.files[0].type.indexOf("video/") > -1) {
                    let video = document.getElementById('video');
                    var video1 = input.files[0];
                    video = window.URL.createObjectURL(input.files[0]);
                    var formData = new FormData();
                    formData.append('video-filename', input.files[0].name);
                    formData.append('video-blob', video);

                    xhr('serverTest.php', formData, function (fName) {
                        window.open(location.href + fName);
                    });

                    function xhr(url, data, callback) {
                        var request = new XMLHttpRequest();
                        request.onreadystatechange = function () {
                            if (request.readyState == 4 && request.status == 200) {
                                callback(location.href + request.responseText);
                            }
                        };
                        request.open('post', url, true);
                        request.send(formData);
                    }

                }
            })
        })
    </script>
</body>

Any advice or suggestion are welcome.

Sources: https://www.youtube.com/watch?v=dbrez37HlJM

https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-PHP

Quentin · Accepted Answer · 2021-08-06 09:51:41Z

2

Your FormData object contains two things:

formData.append('video-filename', input.files[0].name);

The filename, which is a string.

formData.append('video-blob', video);

The value of video which is the return value of createObjectURL, which is also a string.

If you want $_FILES to be populated, then you need to upload a file.

formData.append('video', input.files[0]);

answered Aug 6, 2021 at 9:51

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

adrian Over a year ago

Thank you Quentin it worked perfectly !

Collectives™ on Stack Overflow

$_FILES empty when sending to PHP server

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related