How to allow user to upload files to website?

Question

I have a website written in HTML/CSS/Vanilla JS and I'd like to add a form for users to upload pictures and text to the root folder. Seems like a mundane task but I can't find any information on this. What technologies should I use?

score 0 · Answer 1 · answered Oct 10 '21 at 20:13

Using the <input type="text"/> and <input type="file"/>, you can make users input both text and files (pictures for your case).

Now, for saving this information in your file, you should use php or some other server side technology.

PHP Approach : https://www.allphptricks.com/upload-file-using-php-save-directory/

For Just texts : How can I save my form data to a local text file using php?

score 0 · Accepted Answer · answered Oct 10 '21 at 20:13

0

This is where you get into the territory of backend development: You can (for example) use an HTML <input type="file"> to select a file and send it as part of a form, but you will need a server to handle your request. There is a plethora of languages to write backend servers in, some popular ones are node (server-side JS) and PHP.

Here's a tutorial page for file uploads in PHP

And one for file uploads in Node using Express.js

answered Oct 10 '21 at 20:13

Jotha

418
2
7

Exactly what i was looking for! Thank you! – idk123123 Oct 10 '21 at 20:24

score 0 · Answer 3 · answered Oct 10 '21 at 20:27

you can check this out, I hope it will work, and kindly, make sure that create one folder to store uploaded videos.

file 1 -> config.php <?php

$host = "localhost";    /* Host name */
$user = "root";         /* User */
$password = "admin";         /* Password */
$dbname = "mydb";   /* Database name */

// Create connection
$con = mysqli_connect($host, $user, $password,$dbname);

// Check connection
if (!$con) {
    die("Connection failed: " . mysqli_connect_error());
}

file 2 -> index.php which will the main page of the file

<!doctype html>
<html>
    <head>
        <?php
        include("config.php");
     
        if(isset($_POST['but_upload'])){
            $maxsize = 10000000; // 5MB
                       
            $name = $_FILES['file']['name'];
            $target_dir = "https://mmcollegebihiya.in/form1/videos/";
            $target_file = $target_dir . $_FILES["file"]["name"];

            // Select file type
            $videoFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

            // Valid file extensions
            $extensions_arr = array("mp4","avi","3gp","mov","mpeg");

            // Check extension
            if( in_array($videoFileType,$extensions_arr) ){
                
                // Check file size
                if(($_FILES['file']['size'] >= $maxsize) || ($_FILES["file"]["size"] == 0)) {
                    echo "File too large. File must be less than 5MB.";
                }else
                {
                    // Upload
                    //if(move_uploaded_file($_FILES['file']['tmp_name'],$target_file)){
                        // Insert record
                        $query = "INSERT INTO videos(name,location) VALUES('".$name."','".$target_file."')";

                        mysqli_query($con,$query);
                        echo "Upload successfully.";
                    //}
                }

            }else{
                echo "Invalid file extension.";
            }
        }
        
        ?>
    </head>
    <body>
        <form method="post" action="" enctype='multipart/form-data'>
            <input type='file' name='file' />
            <input type='submit' value='Upload' name='but_upload'>
        </form>

    </body>
</html>

File 3 -> Checking videos php

<?php
    include("config.php");
?>
<!doctype html>
<html>
    <head>
        <style>
            video{
                float: left;
            }
        </style>
    </head>
    <body>
        <div>
          
        <?php
        $fetchVideos = mysqli_query($con, "SELECT * FROM videos ORDER BY id DESC");
        while($row = mysqli_fetch_assoc($fetchVideos)){
            $location = $row['location'];
            
            echo "<div >";
            echo "<video src='".$location."' controls width='320px' height='200px' >";
            echo "</div>";
        }
        ?>
          
        </div>

    </body>
</html>

If this will not work, then I will share other code too, but don't mark -1 .

How to allow user to upload files to website?

3 Answers3