TypeScript Tutorial: Building a Simple Interactive Web-Based File Compressor

Written by

learnmodernjavascript

in

In today’s digital world, files are constantly growing in size. Whether it’s high-resolution images, large video files, or extensive documents, managing file sizes efficiently is crucial. This is where file compression comes into play. Imagine being able to reduce the size of your files without losing significant quality, making them easier to share, store, and transfer. This tutorial will guide you through building a simple, interactive web-based file compressor using TypeScript. You’ll learn the fundamental concepts of file compression, understand how to implement it in a web application, and gain practical experience with TypeScript.

Why File Compression Matters

Before diving into the code, let’s understand why file compression is so important:

  • Reduced Storage Costs: Smaller files take up less space on your hard drive or cloud storage, saving you money.
  • Faster Uploads and Downloads: Compressed files transfer more quickly over the internet, improving user experience.
  • Improved Website Performance: Smaller image and video files lead to faster page load times, which can boost SEO and user engagement.
  • Easier Sharing: Compressed files are easier to share via email, messaging apps, and social media.

This tutorial will empower you to create a practical tool that addresses these needs, providing a valuable skill set for web development.

Prerequisites

To follow this tutorial, you’ll need the following:

  • Basic knowledge of HTML, CSS, and JavaScript: Familiarity with these languages is essential for understanding the web application’s structure and styling.
  • Node.js and npm (or yarn) installed: You’ll need these to set up your TypeScript project and manage dependencies.
  • A code editor: Choose your preferred code editor (VS Code, Sublime Text, etc.).
  • A web browser: Any modern web browser will work.

Setting Up the TypeScript Project

Let’s get started by setting up our TypeScript project. Open your terminal or command prompt and follow these steps:

  1. Create a Project Directory: Create a new directory for your project, for example, `file-compressor`.
  2. Initialize npm: Navigate into your project directory in the terminal and run `npm init -y`. This creates a `package.json` file.
  3. Install TypeScript: Install TypeScript globally or locally using npm: `npm install typescript –save-dev`. If you prefer yarn, use `yarn add typescript –dev`.
  4. Create a `tsconfig.json` file: In your project directory, run `npx tsc –init`. This creates a `tsconfig.json` file, which configures the TypeScript compiler. You can customize this file to suit your project’s needs. For a basic setup, the default settings are usually sufficient.
  5. Create the `index.html` file: Create an `index.html` file in your project directory. This will be the main HTML file for your application.
  6. Create the `src` directory: Create a `src` directory to store your TypeScript files.
  7. Create the `index.ts` file: Inside the `src` directory, create a file named `index.ts`. This will be the main TypeScript file for your application.

Your project structure should look like this:

file-compressor/
├── index.html
├── package.json
├── tsconfig.json
└── src/
    └── index.ts

Building the HTML Structure

Now, let’s build the basic HTML structure for our file compressor. Open `index.html` and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Compressor</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
        }

        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 80%;
            max-width: 500px;
        }

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

        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #3e8e41;
        }

        #output {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>File Compressor</h2>
        <input type="file" id="fileInput">
        <button id="compressButton">Compress</button>
        <div id="output"></div>
    </div>
    <script src="./src/index.js"></script>
</body>
</html>

This HTML provides the basic structure: a file input, a compress button, and an output area to display the results. We’ve also included some basic CSS for styling.

Writing the TypeScript Code

Now, let’s write the TypeScript code that will handle the file compression. Open `src/index.ts` and add the following code:

// Get references to HTML elements
const fileInput = document.getElementById('fileInput') as HTMLInputElement;
const compressButton = document.getElementById('compressButton') as HTMLButtonElement;
const output = document.getElementById('output') as HTMLDivElement;

// Function to compress the file (placeholder)
async function compressFile(file: File): Promise<string | null> {
    // In a real-world scenario, you would use a compression library here,
    // such as pako for gzip compression or a similar library for other formats.
    // This example provides a placeholder and does not actually compress the file.
    // For image compression, you could use a library like 'browser-image-compression'.
    // For this example, we'll just simulate compression by returning a message.
    return "File compression is simulated. In a real application, a compression library would be used.";
}

// Event listener for the compress button
compressButton.addEventListener('click', async () => {
    const file = fileInput.files?.[0];

    if (!file) {
        output.textContent = 'Please select a file.';
        return;
    }

    try {
        output.textContent = 'Compressing...';
        const compressedData = await compressFile(file);

        if (compressedData) {
            output.textContent = compressedData;
        } else {
            output.textContent = 'Compression failed.';
        }
    } catch (error) {
        console.error('Compression error:', error);
        output.textContent = 'An error occurred during compression.';
    }
});

Let’s break down this code:

  • Element References: We get references to the file input, compress button, and output div using `document.getElementById`.
  • `compressFile` Function: This is the core function where the compression logic would reside. Currently, it’s a placeholder. In a real-world application, you would use a library like `pako` for gzip compression, or a specialized library for image or video compression.
  • Event Listener: An event listener is attached to the compress button. When the button is clicked, it retrieves the selected file, calls the `compressFile` function, and displays the result in the output area.
  • Error Handling: The code includes a `try…catch` block to handle potential errors during the compression process.

Implementing File Compression (Conceptual Example)

Since implementing actual compression algorithms directly in this tutorial would be complex, let’s discuss how you would integrate a compression library like `pako` to compress files. This is a conceptual example to illustrate the process. You’ll need to install `pako` first using `npm install pako` or `yarn add pako`.

import pako from 'pako';

async function compressFile(file: File): Promise<string | null> {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = () => {
            const data = new Uint8Array(reader.result as ArrayBuffer);
            try {
                const compressed = pako.gzip(data);
                const base64 = btoa(String.fromCharCode.apply(null, Array.from(compressed)));
                resolve(`Data compressed successfully. Base64 encoded: ${base64}`);
            } catch (error) {
                console.error('Compression error:', error);
                reject(error);
            }
        };

        reader.onerror = (error) => {
            reject(error);
        };

        reader.readAsArrayBuffer(file);
    });
}

In this example:

  • We import the `pako` library.
  • The `compressFile` function now uses a `FileReader` to read the file content as an `ArrayBuffer`.
  • The `pako.gzip()` function compresses the data using the gzip algorithm.
  • The compressed data is then converted to a Base64 string for display (you might want to offer a download option for the compressed file).
  • Error handling is included to catch any issues during the compression process.

Important Note: This is a simplified example. You might need to adjust the code based on the type of file you’re compressing and the specific compression library you’re using. For image compression, consider using a library like `browser-image-compression`.

Compiling and Running the Application

Now, let’s compile the TypeScript code and run the application:

  1. Compile TypeScript: In your terminal, navigate to your project directory and run `tsc`. This will compile the `index.ts` file and create a `index.js` file in the same directory (or the directory specified in your `tsconfig.json`).
  2. Open `index.html` in your browser: Open the `index.html` file in your web browser. You should see the file input, the compress button, and the output area.
  3. Test the application: Select a file using the file input, and click the “Compress” button. You should see the simulated compression message in the output area. If you’ve implemented the `pako` example, you’ll see the Base64 encoded compressed data (remember, this compresses the *data* and not the file itself, and the resulting Base64 string will be displayed).

If you encounter any errors, check the browser’s developer console (usually accessed by pressing F12) for error messages. Double-check your code for typos and ensure that you’ve installed the necessary dependencies.

Handling Different File Types

The code provided is a starting point. To make the file compressor more versatile, you should consider handling different file types. Here’s how:

  • Image Compression: For images, you can use libraries like `browser-image-compression`. This library allows you to resize, optimize, and compress images.
  • Video Compression: Video compression can be more complex. You might need to use a server-side solution or explore WebAssembly-based video encoding/decoding libraries.
  • Text and Document Compression: For text and documents, you can use gzip or other compression algorithms supported by libraries like `pako`.
  • File Type Detection: You can use the `file.type` property to determine the file type and apply the appropriate compression method.

Here’s an example of how you might handle different file types (using the `browser-image-compression` library for images and `pako` for other file types):

import pako from 'pako';
import imageCompression from 'browser-image-compression';

async function compressFile(file: File): Promise<string | null> {
    if (file.type.startsWith('image/')) {
        // Image compression
        try {
            const compressedFile = await imageCompression(file, {
                maxSizeMB: 1, // Adjust as needed
                maxWidthOrHeight: 1920, // Adjust as needed
            });
            // You can now handle the compressedFile (e.g., display it or offer a download)
            return `Image compressed. New size: ${compressedFile.size} bytes`;
        } catch (error) {
            console.error('Image compression error:', error);
            return 'Image compression failed.';
        }
    } else {
        // Other file types (e.g., text, documents)
        return new Promise((resolve, reject) => {
            const reader = new FileReader();

            reader.onload = () => {
                const data = new Uint8Array(reader.result as ArrayBuffer);
                try {
                    const compressed = pako.gzip(data);
                    const base64 = btoa(String.fromCharCode.apply(null, Array.from(compressed)));
                    resolve(`Data compressed successfully. Base64 encoded: ${base64}`);
                } catch (error) {
                    console.error('Compression error:', error);
                    reject('Compression failed.');
                }
            };

            reader.onerror = (error) => {
                reject('File read error.');
            };

            reader.readAsArrayBuffer(file);
        });
    }
}

Remember to install `browser-image-compression`: `npm install browser-image-compression` or `yarn add browser-image-compression`.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Incorrect File Input: Make sure you’re correctly accessing the selected file using `fileInput.files?.[0]`. If no file is selected, `fileInput.files` will be `null` or an empty `FileList`, and accessing `[0]` will result in an error. Always check if a file is selected before proceeding.
  • Error in Compression Library: If you’re using a compression library, ensure you’ve installed it correctly and that you’re using the correct methods. Check the library’s documentation for usage examples.
  • Asynchronous Operations: Compression operations are often asynchronous. Make sure you’re using `async/await` or Promises correctly to handle the asynchronous nature of these operations.
  • Cross-Origin Issues: If you’re trying to compress files from a different domain, you might encounter cross-origin issues. Ensure that the server serving the files allows cross-origin requests.
  • Large File Sizes: Compressing very large files can take a long time and potentially cause the browser to become unresponsive. Consider implementing progress indicators and limiting the maximum file size.
  • Incorrect File Type Handling: Ensure you are correctly identifying and handling different file types. Use the `file.type` property to check the MIME type and then apply the appropriate compression logic.

Key Takeaways

  • File compression is essential: It reduces storage costs, speeds up uploads/downloads, and improves website performance.
  • TypeScript helps: TypeScript provides type safety and better code organization for your web applications.
  • Libraries simplify compression: Libraries like `pako` and `browser-image-compression` make it easier to implement compression algorithms.
  • Error handling is crucial: Implement robust error handling to handle potential issues during the compression process.
  • Consider file types: Handle different file types (images, videos, documents) appropriately for optimal compression.

FAQ

  1. What are some other compression libraries? Besides `pako`, other popular libraries include `fflate` and libraries designed for specific file types (e.g., image compression libraries).
  2. Can I compress any file type? Yes, but the compression method will vary. Images often use lossy compression (reducing file size by discarding some data), while text and documents can use lossless compression (preserving all original data).
  3. How do I handle large files? For large files, consider using techniques like chunking (processing the file in smaller parts) and providing progress indicators to the user. You might also want to set a maximum file size limit.
  4. Is server-side compression necessary? Yes, for more complex compression tasks (e.g., video compression) or for performance optimization, server-side compression is often necessary. Client-side compression is useful for simple tasks and improving the user experience before sending data to the server.
  5. What are the security considerations? Be careful when handling user-uploaded files. Validate file types, limit file sizes, and sanitize file names to prevent security vulnerabilities.

Building a file compressor in TypeScript is a great way to learn about file manipulation, web development, and the importance of optimizing file sizes. While the example above provides a foundational understanding, remember that this is just the beginning. Explore different compression libraries, experiment with various file types, and continuously refine your skills to create even more powerful and efficient web applications. The knowledge and techniques you’ve acquired today will serve as a strong base for your future web development endeavors.

More posts