Validating image file in custom jQuery, AJAX, and PHP form (SilverStripe) - php

Question

I'm working on finishing a simple form for contest entry submissions. Normally we'd use the userforms SilverStripe extension (https://github.com/silverstripe/silverstripe-userforms) but that is a page type, and this form needs to be one section in a page type. I have got something setup right now that may not be be perfect but has done the job before. However, the inclusion of an image upload field is throwing me off.
Typically, outside of a CMS and without a plugin, I would use $_FILES['upload_field_name']['type or name or size'] to validate an upload field. But I am not sure I am able to use that here since I am working within a CMS.
This is what I have so far:
The jQuery + AJAX code:
(function ($) {
$(document).ready(function () {
var SubmitBtn = $('.SubmitEntry');
var FirstName = $('.FirstNameTxt');
var LastName = $('.LastNameTxt');
var EmailAddress = $('.EmailTxt');
var Image = $('.UploadImage');
SubmitBtn.on('click', function (e) {
var required = [FirstName, LastName, EmailAddress, Image];
var containsError = false;
e.preventDefault();
for (i = 0; i < required.length; i++) {
var input = required[i];
if ((input.val() == "")) {
containsError = true;
input.addClass('error-field');
$('.Error-Msg').show();
} else {
input.removeClass('error-field');
}
}
if (containsError == false) {
$('.Error-Msg').hide();
ajax_script();
}
});
function ajax_script() {
var form_data = {
firstname: FirstName.val(),
lastname: LastName.val(),
useremail: EmailAddress.val(),
image: Image.val()
};
$.ajax({
type: "POST",
url: "/home/ContestSubmission",
data: form_data,
dataType: "json"
}).done(function (response) {
for (var i = 0; i < response.length; i++) {
var status = response[i].status;
if (status == "error") {
var errorMessage = response[i].message;
if (response[i].field == "email") {
$('.Error-Msg').show();
$('.Error-Msg').html("<br />" + errorMessage.message);
EmailAddress.addClass("error-field");
}
/* else if image is not valid, show error message */
}
else if (status == "success") {
$('#contest-submissions')[0].reset();
alert("Thank you for your entry!");
}
}
});
}
});
}(jQuery));
$ = jQuery.noConflict();
This is the ContestSubmisson function located within Page.php:
public function ContestSubmission()
{
$fname = $this->getRequest()->postVar('firstname');
$lname = $this->getRequest()->postVar('lastname');
$useremail = $this->getRequest()->postVar('useremail');
$image = $this->getRequest()->postVar('image');
$errorField = "";
$return = array();
if (!filter_var($useremail, FILTER_VALIDATE_EMAIL)) {
$validatonStatus = "error";
$errorField = "email";
$errorList = "The email is not in the correct format. Please re-enter it.";
} /* else if $image is not valid i.e. size or file type */
else {
$contestEntry = new ContestEntrySubmission();
$contestEntry->FirstName = $fname;
$contestEntry->LastName = $lname;
$contestEntry->EmailAddress = $useremail;
$contestEntry->UploadedImage = $image;
$contestEntry->write();
$validatonStatus = "success";
$errorField = "";
$errorList = "";
$from = 'secret#secret.com';
$to = '[testing email address]';
$subject = 'Contest Entry Submission';
$body = "Below is the contest entry submission information:" . "<br /><br />";
$body .= "<strong>First Name:</strong> " . $fname . "<br/>" . "<strong>Last Name:</strong> " . $lname . "<br/>" . "<strong>Email:</strong> " . $useremail . "<br />" . "Image File: " . $image;
$email = new Email($from, $to, $subject, $body);
$email->replyTo($useremail);
$email->send();
}
$return[] = array(
"status" => $validatonStatus,
"field" => $errorField,
"message" => $errorList
);
return json_encode($return);
}
What is throwing me off is what to do with the image when it gets to the Page.php function shown above. Normally the setup above works fine in SilverStripe but now with the addition of an image upload field, I'm confused on what to change/add/edit to validate the file size and type. Examples I have found tend to deal with creating or working with an Upload Field inside of a page template type, which is not what I am looking for here.
Any suggestions would be great. I am just so used to not building these things inside a CMS. I may be making this much more difficult than needed therefore...any tips?

Answer 1

You mentioned that you just stick to JS, HTML, & PHP - that's cool because using the SilverStripe framework is all PHP! Learning how to make a custom form provides greater flexibility over UserForms, so it's handy to add to the ol' utility belt. It sounds like this is a good opportunity to learn something new, which is always fun :)
First and foremost, the tips to things you're missing is easy! There is a vast set of documentation for developers at https://docs.silverstripe.org/
I highly recommend the forms introduction section, which covers off basic form creation. Once you've defined the fields, SilverStripe will do all the rest for you (all the validation & all), leaving you just to deal with what happens after a valid submission.
Depending on your skill level, you may like to begin with one of the great tutorials - the text one is great and covers all the basics (even though it's quite old), you can access it from the tutorials link in the left menu. There's also a more modern video tutorial at http://www.silverstripe.org/learn/lessons/introduction-to-frontend-forms which can be useful for explaining some of the finer points that sometimes gets beginners a bit turned around. You choose which is best for you. There's also API documentation if you'd prefer to just jump straight into the deep end - you'll find that link on the top navigation.
It seems like you've got the front end part down pat, and SilverStripe doesn't really get in the way here at all. Plus it sounds like you're familiar with styling the UserForms, so that's a great bonus already. So at this point I'll assume that nothing here will be new to you on the front end - the default form rendering won't startle you.
Making the form itself is really easy. I'll use your example and try to cobble a very untested example using the inbuilt Form class (which is part of the Framework, not the CMS - a small but I think important distinction to make).
A form submits to itself, and takes care of all the validation for you. Neat! We'll use your contestSubmission function.
public function contestSubmission() {
return Form::create(
$this,
__FUNCTION__,
FieldList::create(
TextField::create('firstname', 'First Name'),
TextField::create('lastname', 'Last Name'),
EmailField::create('useremail', 'Email'),
FileField::create('image', 'Image')
),
FieldList::create(
FormAction::create('emailValidEntry', 'Submit Entry')
),
RequiredFields::create(array('firstname', 'lastname', 'useremail', 'image'))
);
}
You may be wondering what all this ClassName::create($stuff) business is. Think of it as new ClassName($stuff), but with the advantage that you can chain it (like how $('.selector') gives you a new jQuery object, and you can $('.selector').doThings().to().it() - using the ::create() method we can do the same in PHP, as opposed to creating into a variable then operating on it. A nice thing SilverStripe gives us :)
Once your form is all defined (including adjusting the required fields) you only need to worry about what to do with the info once it's collected, which removes a lot of the burden. Cool. We'll create another function for that: emailValidEntry (the name must match that given in the FormAction declared above) - it basically just contains the bit in your else block. I'll tidy it up for the Email bits to use templates too though.
public function emailValidEntry($data, $form) {
$contestEntry = ContestEntrySubmission::create();
$form->saveInto($contestEntry);
$contestEntry->write();
$data['ImageEmail'] = base64_encode(file_get_contents($data['UploadedImage']['tmp_name']));
Email::create(
'from#address', //from
'testing#address', //to
'Contest Entry Submission' //subject
)->setTemplate('ContestEntryEmail')
->populateTemplate(ArrayData::create($data))
->replyTo($data['EmailAddress'])
->attach($contestEntry->UploadedImage()->Filename)
->send();
$form->setMessage('Thank you for your submission!', 'good');
$this->redirectBack();
}
The 'do stuff with my form submission' method takes 2 arguements: an associative array of FieldName => Value, and the full instance of the Form object itself, with all the fields having their submitted values set.
OK, so there's a slight bit of complexity going on to get the base64 encode for the email embed, although I think attaching it is safer so I've shown that too.
The template ContestEntryEmail.ss (placed somewhere in your theme, maybe templates/emails or something) might look something like:
Below is the contest entry submission information: <br /><br />
<strong>First Name:</strong> $FirstName<br />
<strong>Last Name:</strong> $LastName<br />
<strong>Email:</strong> $EmailAddress<br />
<strong>Image File (see attached if not shown here):</strong><img src="$ImageEmail" alt="Submitted Image" />
Where $ImageEmail uses the base64 encoded image data to embed directly into the email.
But it seems like the recommended way would be to just attach it. From a quick google it seems that Outlook and Gmail both will block the inlined version shown in the template there.
Hopefully this is all rather not too TL;DR & helpful - good luck & happy form creating!

Answer 2

My top tip would be to check the MIME type of the image with PHP. This checks the actual file make-up to verify that it is in fact an image and not just a random file that has been renamed to have an image extension
Here is some sample code you could include
// Check for valid upload
if (($_FILES["picture"]["error"]) == "4") //no file detected
// error codes explained at http://php.net/manual/en/features.file-upload.errors.php
{
echo "<h3>No file has been detected. Please select a file to upload.</h3>";
exit();
}
if ($_FILES['picture']['error'] == "1" || $_FILES['picture']['error'] == "2" || ($_FILES['picture']['size'] > 71680)) //define your max_file_size 71680 is 70KB - not very big
//file too big
{
echo("<h3>Upload unsuccessful: File exceeds maximum allowed size</h3>");
echo("<p>Try compressing your photo or upload a different photo</p>");
exit();
}
//if file present and of acceptable size
if ($_FILES['picture']['error'] != "1" && $_FILES['picture']['error'] != "2" && $_FILES['picture']['error'] != "4" && $_FILES['picture']['size'] < 71680) {
//then check to see if the type of file is an image file
//check for mimetype as at http://php.net/manual/en/features.file-upload.php
$fileinfo = new finfo(FILEINFO_MIME_TYPE);
if (false === $ext = array_search(
$fileinfo->file($_FILES['picture']['tmp_name']),
array(
'png' => 'image/png','gif' => 'image/gif','jpg' => 'image/jpeg',
),
true
))
{
echo('<h3>The file chosen is not an acceptable image file (.jpg/.png or .gif)</h3>');
echo("Please upload a .jpg/.png or .gif image");
exit();
}
}