TokenMismatchException in laravel 5.4 with image upload - php

Question

I'm building a Laravel 5.4 application that let's you upload an image to each registered entry. I was using the intervention image package but realized I needed a way to enable image cropping and rotation (iphone images are rotated when uploaded for some reason), so I decided to use the jquery plugin Slim Cropper. I've added the necessary files to my code but can't succesfully upload an image.
Slim Cropper offers two ways to upload an image: through a regular form which gives me the "TokenMismatchException in VerifyCsrfToken.php (line 68)" after submitting, and an ajax form that simply shows a "cannot upload" message. I've tried both ways with different changes but can't get it to work. All my classes/controllers check for authentication, and I have tried sending the csrf token every way I could think of, all show the same error.
UPDATE: As per the suggestions in the comments, I've moved csrf token right after <form>, I've updated the input file names to match those from the example and attempted to debug through middleware with no error messages whatsoever. The TokenMismatchException error is no longer an issue, but once the form is submitted I get the error Constant expression contains invalid operations in Slim.php (line 106) for public static function saveFile($data, $name, $path = public_path('/uploads/mascotas-img/'), $uid = true). Still have no fix for this.
Here's the code:
Routes
Route::post('/mascotas/avatar', 'PetsController#avatar');
Pets Controller
use App\Slim;
public function avatar(Request $request)
{
if ( $request->avatar )
{
// Pass Slim's getImages the name of your file input, and since we only care about one image, postfix it with the first array key
$image = Slim::getImages('avatar')[0];
$mascota_num = $image['meta']->petId;
// Grab the ouput data (data modified after Slim has done its thing)
if ( isset($image['output']['data']) )
{
// Original file name
$name = $image['output']['name'];
//$name = $request->input('mascota_num');
// Base64 of the image
$data = $image['output']['data'];
// Server path
$path = public_path('/uploads/mascotas-img/');
// Save the file to the server
$file = Slim::saveFile($data, $name, $path);
// Get the absolute web path to the image
$imagePath = public_path('/uploads/mascotas-img/' . $file['name']);
DB::table('mascotas')
->where('num',$mascota_num)
->update(['foto' => $imagePath]);
//$mascota->foto = $imagePath;
//$mascota->save();
}
}
return redirect()->back()->with('success', "User's profile picture has been updated!");
}
Slim Class
namespace App;
abstract class SlimStatus {
const Failure = 'failure';
const Success = 'success';
}
class Slim {
public static function getImages($inputName = 'slim') {
$values = Slim::getPostData($inputName);
// test for errors
if ($values === false) {
return false;
}
// determine if contains multiple input values, if is singular, put in array
$data = array();
if (!is_array($values)) {
$values = array($values);
}
// handle all posted fields
foreach ($values as $value) {
$inputValue = Slim::parseInput($value);
if ($inputValue) {
array_push($data, $inputValue);
}
}
// return the data collected from the fields
return $data;
}
// $value should be in JSON format
private static function parseInput($value) {
// if no json received, exit, don't handle empty input values.
if (empty($value)) {return null;}
// The data is posted as a JSON String so to be used it needs to be deserialized first
$data = json_decode($value);
// shortcut
$input = null;
$actions = null;
$output = null;
$meta = null;
if (isset ($data->input)) {
$inputData = isset($data->input->image) ? Slim::getBase64Data($data->input->image) : null;
$input = array(
'data' => $inputData,
'name' => $data->input->name,
'type' => $data->input->type,
'size' => $data->input->size,
'width' => $data->input->width,
'height' => $data->input->height,
);
}
if (isset($data->output)) {
$outputData = isset($data->output->image) ? Slim::getBase64Data($data->output->image) : null;
$output = array(
'data' => $outputData,
'width' => $data->output->width,
'height' => $data->output->height
);
}
if (isset($data->actions)) {
$actions = array(
'crop' => $data->actions->crop ? array(
'x' => $data->actions->crop->x,
'y' => $data->actions->crop->y,
'width' => $data->actions->crop->width,
'height' => $data->actions->crop->height,
'type' => $data->actions->crop->type
) : null,
'size' => $data->actions->size ? array(
'width' => $data->actions->size->width,
'height' => $data->actions->size->height
) : null
);
}
if (isset($data->meta)) {
$meta = $data->meta;
}
// We've sanitized the base64data and will now return the clean file object
return array(
'input' => $input,
'output' => $output,
'actions' => $actions,
'meta' => $meta
);
}
// $path should have trailing slash
public static function saveFile($data, $name, $path = public_path('/uploads/mascotas-img/'), $uid = true) {
// Add trailing slash if omitted
if (substr($path, -1) !== '/') {
$path .= '/';
}
// Test if directory already exists
if(!is_dir($path)){
mkdir($path, 0755);
}
// Let's put a unique id in front of the filename so we don't accidentally overwrite older files
if ($uid) {
$name = uniqid() . '_' . $name;
}
$path = $path . $name;
// store the file
Slim::save($data, $path);
// return the files new name and location
return array(
'name' => $name,
'path' => $path
);
}
public static function outputJSON($status, $fileName = null, $filePath = null) {
header('Content-Type: application/json');
if ($status !== SlimStatus::Success) {
echo json_encode(array('status' => $status));
return;
}
echo json_encode(
array(
'status' => $status,
'name' => $fileName,
'path' => $filePath
)
);
}
/**
* Gets the posted data from the POST or FILES object. If was using Slim to upload it will be in POST (as posted with hidden field) if not enhanced with Slim it'll be in FILES.
* #param $inputName
* #return array|bool
*/
private static function getPostData($inputName) {
$values = array();
if (isset($_POST[$inputName])) {
$values = $_POST[$inputName];
}
else if (isset($_FILES[$inputName])) {
// Slim was not used to upload this file
return false;
}
return $values;
}
/**
* Saves the data to a given location
* #param $data
* #param $path
*/
private static function save($data, $path) {
file_put_contents($path, $data);
}
/**
* Strips the "data:image..." part of the base64 data string so PHP can save the string as a file
* #param $data
* #return string
*/
private static function getBase64Data($data) {
return base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));
}
}
Picture submit form (tokenmismatch error)
<form action="{{ url('mascotas/avatar') }}" method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="slim" data-label="Agregar imagen aquí" data-size="400, 400" data-ratio="1:1" data-meta-pet-id="{{ $mascota->num }}">
#if ( $mascota->foto )
<img src="{{ url('/uploads/mascotas-img/'.$mascota->foto) }}" />
#endif
<input type="file" name="avatar" required />
{{ csrf_field() }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-red">Cambiar Foto</button>
</div>
</form>
Alternate submit form (error message)
<div class="modal-body">
<div class="slim" data-label="Agregar imagen aquí" data-size="400, 400" data-ratio="1:1" data-service="{{ url('mascotas/avatar') }}" data-meta-pet-id="{{ $mascota->num }}">
#if ( $mascota->foto )
<img src="{{ url('/uploads/mascotas-img/'.$mascota->foto) }}" />
#endif
<input type="file" name="avatar" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-red">Cambiar Foto</button>
</div>
Slim image cropper website with examples http://slimimagecropper.com/
My original upload form through laravel image intervetion, this works with no problems at upload, but would very much like to replace with one of the above.
<form enctype="multipart/form-data" action="{{ url('mascotas/foto') }}" method="POST">
<div class="modal-body">
<img class="mascota-avatar" src="{{ url('/uploads/mascotas-img/'.$mascota->foto) }}">
<div class="clearfix"></div>
<input type="file" name="foto">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="mascota_num" value="{{ $mascota->num }}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-red">Cambiar Foto</button>
</div>
</form>
Thanks for any help!

Answer 1

You should include the {{ csrf_field() }} on each of your forms, for the Ajax one, you could send the token as header.