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"> </> </> }