<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>File Upload Page</title>

</head>

<body>

    <h1>Upload Files</h1>

   

    <!--

        The form requires three specific attributes for file uploads to work correctly:

        1. method="POST" sends the form data in the body of the request.

        2. enctype="multipart/form-data" ensures file contents are sent as binary data.

        3. action attribute specifies the URL on your server that will handle the upload (e.g., upload.php, /api/upload).

    -->

    <form action="/upload" method="POST" enctype="multipart/form-data">

        <div>

            <label for="file_uploads">Choose files to upload (PNG, JPG, PDF):</label>

            <!--

                type="file" creates the file selection button.

                accept attribute limits the types of files the user can select.

                multiple attribute allows the selection of more than one file.

            -->

            <input type="file" id="file_uploads" name="file_uploads" accept=".jpg, .jpeg, .png, .pdf" multiple />

        </div>

        <div>

            <button type="submit">Upload Files</button>

        </div>

    </form>

 

    <p>

        **Note:** This is the frontend HTML. The `action="/upload"` URL on your web server requires a **backend script** (like PHP, Python, Node.js, etc.) to process the file and save it to the server's file system. Without a backend script, the files will not actually be stored anywhere.

    </p>

 

</body>

</html>