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

Input.uploadedImage

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

Description

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 {
    Response.sendPage({
        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 {
        print($path);
    }
    else {
        print(Input.lastUploadError());
    }
}

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

    <main>
        <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