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:
- Illegal file name patterns (e.g. '..')
- Common evasion tactics (e.g. double extensions)
- File is a
png,jpg, orgif - Failure to be resized (i.e. not a valid image)
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">
</>
</>
}