Version: v0.6.1 - Beta.  We welcome contributors & feedback.  THanks!


Input.uploadedImage($fieldName, $uploadDir, $maxWidth, $maxHeight)


Returns the uploaded image file path for the given $fieldName.

The file will be resized to $maxWidth and $maxHeight, cropping to the center if necessary. As a side effect, any malicious payload within the original file will not be copied over.

Returns an empty string '' if it does not pass the following validation checks:

If validated, the file will be written to $uploadDir with a random filename.

$uploadDir is relative to app/data/files. If it does not exist, it will be created.

We recommend creating a subfolder for every user.

// For the given tag:
// <input type="file" name="photo">

$path = Input.uploadedImage('photo', 'photos', 300, 300);
//= e.g. 'photos/fjwgSj73Fjs4q434q.png'

Complete example:

function main {
        body: formHtml(),
        css: Css.plugin('base')

// Will automatically get called instead of 'main' when
// the form is submitted.
function post {
    $path = Input.uploadedImage('photo', 'photos', 300, 300);
    if $path {
    else {

// Note: Upload forms need `enctype="multipart/form-data"`
template formHtml {

        <h1>> Upload Photo

        <form action="/upload" method="post" enctype="multipart/form-data">
            {{ Web.csrfToken(true) }}
            <input type="file" name="photo">
            <small>> Supported files: .png, .gif, or .jpg
            <input type="submit" name="submit" value="Upload">

See Also