The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a simple online archive viewer

Written by

Bernardo Palos

in

Building a simple online archive viewer involves creating a system where users can browse and view archived files such as PDFs, images, documents, etc., from a web interface. Here’s a straightforward guide to help you build such a viewer using HTML, CSS, and JavaScript (with optional back-end support in PHP or Node.js).

Key Features

  • Uploading and viewing archived files

  • Displaying files in a user-friendly format

  • Option to preview images, PDFs, and other document types

Components

  1. Frontend (HTML, CSS, JavaScript) for displaying the archive viewer.

  2. Backend (optional – Node.js, PHP) to handle file uploads and serve files dynamically.

  3. A file structure to store the archived documents.

1. Frontend: HTML & CSS

Let’s start by creating the basic structure and design for the viewer.

index.html

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Archive Viewer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Simple Archive Viewer</h1>
    </header>

    <main>
        <section class="file-upload">
            <h2>Upload Your Archived Files</h2>
            <input type="file" id="fileInput" multiple>
            <button id="uploadButton">Upload Files</button>
        </section>

        <section class="archive-list">
            <h2>Archive Files</h2>
            <ul id="fileList"></ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 Simple Archive Viewer</p>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>

styles.css

css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
}

header {
    text-align: center;
    background-color: #333;
    color: white;
    padding: 20px;
}

main {
    max-width: 900px;
    margin: 20px auto;
}

h2 {
    color: #333;
}

.file-upload {
    text-align: center;
    margin-bottom: 20px;
}

input[type="file"] {
    padding: 10px;
    margin-bottom: 10px;
}

button {
    padding: 10px 20px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #444;
}

.archive-list {
    margin-top: 30px;
}

ul {
    list-style-type: none;
}

li {
    background-color: #fff;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

li:hover {
    background-color: #e0e0e0;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #333;
    color: white;
    margin-top: 30px;
}

2. Frontend: JavaScript for File Handling

The JavaScript will handle file uploads and display the files in the archive list. It will also allow for previewing the file contents when clicked.

scripts.js

javascript
document.getElementById('uploadButton').addEventListener('click', function() {
    let input = document.getElementById('fileInput');
    let files = input.files;
    
    if (files.length === 0) {
        alert('Please select at least one file to upload.');
        return;
    }
    
    for (let file of files) {
        let listItem = document.createElement('li');
        listItem.textContent = file.name;
        
        // Add an event listener to display file preview on click
        listItem.addEventListener('click', function() {
            viewFilePreview(file);
        });
        
        document.getElementById('fileList').appendChild(listItem);
    }
});

function viewFilePreview(file) {
    const reader = new FileReader();

    reader.onload = function(e) {
        const fileType = file.type;

        if (fileType.startsWith('image/')) {
            // Show image preview
            const img = new Image();
            img.src = e.target.result;
            document.body.appendChild(img);
        } else if (fileType === 'application/pdf') {
            // Show PDF preview
            const iframe = document.createElement('iframe');
            iframe.src = e.target.result;
            iframe.style.width = '100%';
            iframe.style.height = '600px';
            document.body.appendChild(iframe);
        } else {
            // Show text preview for other types (like text files)
            const text = e.target.result;
            const div = document.createElement('div');
            div.textContent = text;
            document.body.appendChild(div);
        }
    };
    
    reader.readAsDataURL(file);
}

3. Backend (Optional): PHP or Node.js

Using PHP for File Upload Handling

If you want to handle file uploads to a server, here’s a simple example using PHP.

upload.php
php
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $targetDir = "uploads/";
    if (!file_exists($targetDir)) {
        mkdir($targetDir, 0777, true);
    }

    foreach ($_FILES['files']['name'] as $key => $fileName) {
        $targetFile = $targetDir . basename($fileName);
        if (move_uploaded_file($_FILES['files']['tmp_name'][$key], $targetFile)) {
            echo "The file $fileName has been uploaded successfully.";
        } else {
            echo "Sorry, there was an error uploading the file $fileName.";
        }
    }
}
?>
index.html Update (for PHP integration)

To upload files to the server, modify your form to send the files to the upload.php script:

html
<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple>
    <button type="submit">Upload Files</button>
</form>

4. Deployment and Final Notes

  • To deploy this viewer, you need a web server like Apache or Nginx.

  • The back-end script (upload.php or Node.js server) should handle file storage, but for simplicity, we are showing the local file upload functionality using JavaScript.

  • Make sure to handle security for uploaded files, especially when dealing with file types like PDFs or images. You should also limit the file types and sizes to avoid abuse.

Conclusion

This simple archive viewer allows users to upload and preview their files online. By using basic front-end technologies and an optional back-end server to manage file uploads, you can create a functional archive viewer that supports multiple file types.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About