Total.js v5: Understanding File Routing

In Total.js v5, file routing is an efficient way to handle static files such as images, PDFs, and other documents. File routing is designed for performance and processes all file requests via the GET method. Whether you're serving static files or generating files dynamically (such as resizing images), file routing provides a streamlined and flexible approach in Total.js v5.

In this post, we’ll dive into how file routing works in Total.js v5, look at examples, and briefly highlight the key differences from Documentation.

File Routing in Total.js v5

File routing in Total.js v5 allows you to define routes for serving or dynamically processing files. These routes can handle specific file types or all files within a directory. This is especially useful for serving images, documents, and other static content efficiently.

Example: File Routing for Static Files

Here’s how to define routes for handling static files like documents and images:

// File: /controllers/example.js

exports.install = function() {
    ROUTE('FILE /documents/*.*', handle_documents);  // Handle all files in /documents/
    ROUTE('FILE /images/*.jpg', handle_images);      // Handle .jpg files in /images/
};

function handle_documents($) {
    // Serve a specific document
    $.file('/path/to/file.pdf');
}

function handle_images($) {
    // Serve a specific image
    $.file('/path/to/image.jpg');
}

Key Points:

• ROUTE('FILE /documents/*.*'): This handles all file types in the /documents folder.
• ROUTE('FILE /images/*.jpg'): This handles only .jpg files in the /images folder.
• $.file(): This method serves the requested file.

Dynamic File Processing: Image Resizing

One of the powerful features of file routing is the ability to dynamically process files before serving them. For example, you can resize images based on URL parameters or requests.

Example: Dynamic Image Resizing

// File: /controllers/example.js

exports.install = function() {
    ROUTE('FILE /images/*.*', resize_image);  // Handle image resizing dynamically
};

function resize_image($) {
    $.image('/path/to/image.jpg', function(image) {
        image.resize(200, 200);  // Resize to 200x200 pixels
        image.quality(80);       // Set image quality to 80%
        image.minify();          // Optimize the image
        image.send();            // Send the processed image to the client
    });
}

Key Points:

• $.image(): This method allows you to manipulate images (resize, change quality, etc.) before sending them to the client.
• Dynamic Processing: You can resize, compress, or otherwise modify the file dynamically.

Handling File Uploads

In Total.js v5, file uploads are handled with the POST method using the @upload flag. You can define routes that handle file uploads with size restrictions and process the uploaded files easily.

Example: Handling File Uploads

// File: /controllers/upload.js
function handle_upload($) {

    var file = $.files[0];  // Access the first uploaded file
    if (file) {
        file.move('./uploads/' + file.filename, function(err) {

            err && $.invalid(err);

            !err && $.success();
        });  // Move the file to a specified path
    } else {
        $.invalid('No file uploaded');  // Handle error
    }     
           
} 

Key Points:

• ROUTE('POST /upload/ @upload <1MB'): Defines a route for uploading files with a 1MB limit.
• $.files: Contains an array of the uploaded files.
• File Handling: You can move, process, or log the uploaded files using $.files.

Comparison: Key Differences from Total.js v4

While Total.js v5 builds on the same foundation as v4, there are some key improvements in how file routing and handling are structured:

• Unified $ Object: In v5, the $ object replaces the separate req and res objects from v4. This simplifies how you handle file routing, requests, and responses by merging them into a single object.
• Dynamic Image Processing: In v5, dynamic image handling (such as resizing) is more streamlined using the $.image() method, allowing direct manipulation of images within the routing logic.
• Simplified Syntax: The overall structure of routing and file handling is cleaner and more intuitive in v5, reducing complexity while improving performance.

Conclusion

File routing in Total.js v5 is powerful, efficient, and flexible, making it easy to serve static files and handle dynamic content such as image resizing. Whether you're managing simple document requests or processing images on the fly, file routing provides the tools to handle static content effectively.

Here’s a summary of what we covered:

• File routing for serving static files like documents and images.
• Dynamic file processing, such as resizing images before serving them.
• File uploads using the POST method and the @upload flag.
• Key improvements in Total.js v5 compared to v4, including the unified $ object and simplified image processing.

By using these features, you can build more dynamic and responsive applications with Total.js v5.