How To Upload Videos To Database Using PHP And JavaScript

Posted By Bajarangi soft , Posted On 12-10-2020

In Java script we can insert video file in to database so today we discuss how to upload video php file to data base using java script

How To Upload Videos To Database Using PHP And JavaScript

Step 1:Create index.html and implement below code in it.

<h2>Upload Videos</h2>
<form method="post" enctype="multipart/form-data">
    <input class="form-control" type="file" name="files[]" multiple/><br><br>
    <input class="btn btn-success" type="submit" value="Upload File" name="submit"/>
</form>

Step 2: Implement Java script to upload file.

<script>
    const url = 'uploadvideo.php'
    const form = document.querySelector('form')

    form.addEventListener('submit', (e) => {
        e.preventDefault()

        const files = document.querySelector('[type=file]').files
        const formData = new FormData()

        for (let i = 0; i < files.length; i++) {
            let file = files[i]

            formData.append('files[]', file)
        }

        fetch(url, {
            method: 'POST',
            body: formData,
        }).then((response) => {
            console.log(response)
        })
    })
</script>

Step 3: Create Uploadvideo.php to store file in folder.

<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['files'])) {
        $errors = [];
        $extensions = ['jpg', 'jpeg', 'png', 'gif'];

        $all_files = count($_FILES['files']['tmp_name']);

        for ($i=0; $i<count($_FILES['files']['name']); $i++)
        {
            $filetmp = $_FILES['files']['tmp_name'][$i];
            $filename = $_FILES['files']['name'][$i];
            $filetype = $_FILES['files']['type'][$i];
            $filesize = $_FILES['files']['size'][$i];
            $filepath = "uploadedvedios/".$filename;

            if (!file_exists('uploadedvedios/')) {

                mkdir('uploadedvedios/', 0777, true);
                move_uploaded_file($filetmp,$filepath);

            }
            $host         = "localhost";
            $username     = "root";
            $password     = "";
            $dbname       = "uploaded_vedios";
            $result_array = array();
            /* Create connection */
            $conn = new mysqli($host, $username, $password, $dbname);
            /* Check connection  */
            if ($conn->connect_error) {
                die("Connection to database failed: " . $conn->connect_error);
            }

            $sql = "INSERT INTO `videos`( `name`)VALUES ('$filename')";
            if (mysqli_query($conn, $sql)) {
                echo 'success';
            } else {
                echo 'failed to insert data';
            }
            mysqli_close($conn);
        }
        echo "<h2 class='alert'>Uploaded</h2>";

        if ($errors) print_r($errors);
    }
}

Complete Code For Uploading Videos To Database Using PHP And JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>How To Upload Videos To Database Using PHP And JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br>
    <div class="text-center">
        <h2 id="color" style="color: White">How To Upload Videos To Database Using PHP And JavaScript</h2>
    </div>
    <br>
    <br>

    <div class="well">
        <h2>Upload Videos</h2>
        <form method="post" enctype="multipart/form-data">
            <input class="form-control" type="file" name="files[]" multiple/><br><br>
            <input class="btn btn-success" type="submit" value="Upload File" name="submit"/>
        </form>
    </div>
    <script>
        const url = 'uploadvideo.php'
        const form = document.querySelector('form')

        form.addEventListener('submit', (e) => {
            e.preventDefault()

            const files = document.querySelector('[type=file]').files
            const formData = new FormData()

            for (let i = 0; i < files.length; i++) {
                let file = files[i]

                formData.append('files[]', file)
            }

            fetch(url, {
                method: 'POST',
                body: formData,
            }).then((response) => {
                console.log(response)
            })
        })
    </script>
</div>
</body>
</html>