Laravel 5.1 And Dropzone.JS - Not Validating Image File - php

Question

I am in Laravel 5.1 and am trying to use Dropzone.JS to handle uploading images and videos to my website. It is a very exciting process but unfortunately I am stuck currently and need help.
My routes.php:
Route::post('upload_video', ['as' => 'upload-post', 'uses' =>'ImageController#postUpload']);
My view from which I am sending the dropzone.js request:
<form action="/upload_video" enctype="multipart/form-data" class="dropzone needsclick dz-clickable" id="upload">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="dz-message needsclick">
Drop files here or click to upload.<br>
</div>
</form>
<script>
Dropzone.options.upload= {
url: "http://example.com/upload_video",
paramName: "file",// The name that will be used to transfer the file
maxFilesize: 20,
autoProccessQueue: false,
uploadMultiple: true,
addRemoveLinks: false,
parallelUploads: 10,
init: function() {
// this.on("successmultiple", function(file, serverresponse) { window.location.href="http://example.com/your_awesome_profile"; });
}
};
</script>
My Image Controller:
<?php
namespace App\Http\Controllers;
use App\Logic\Image\ImageRepository;
use Illuminate\Support\Facades\Input;
class ImageController extends Controller
{
protected $image;
public function __construct(ImageRepository $imageRepository)
{
$this->image = $imageRepository;
}
public function getUpload()
{
return view('pages.upload');
}
public function postUpload()
{
$photo = Input::all();
$response = $this->image->upload($photo);
return $response;
}
My Image Repository:
<?php
namespace App\Logic\Image;
use Auth;
use App\Models\Image;
use App\Models\Video;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\Facades\Response;
use Illuminate\Support\Facades\Config;
use Illuminate\Support\Facades\File;
class ImageRepository
{
public function upload( $form_data )
{
//return dd($form_data);
$destinationPath = public_path().'/images/';
$validator = Validator::make($form_data, Image::$rules, Image::$messages);
if ($validator->fails()) {
//**FAILS HERE BUT IS AN IMAGE**
$validator = Validator::make($form_data, Video::$rules, Video::$messages);
}
else{
$photo = $form_data['file'];
$file = $photo->getClientOriginalName();
$filename = pathinfo($file, PATHINFO_FILENAME);
$extension = pathinfo($file, PATHINFO_EXTENSION);
$filename2 = $this->sanitize($filename);
$allowed_filename = $this->createUniqueFilename( $filename2, $extension );
$filenameExt = $allowed_filename . "." . $extension;
$uploadSuccess = $photo->move($destinationPath, $filenameExt);
if( !$uploadSuccess) {
return Response::json([
'error' => true,
'message' => 'Server error while uploading',
'code' => 500
], 500);
}
else{
$sessionImage = new Image;
$sessionImage->user_id = Auth::user()->id;
$sessionImage->name = $filename;
$sessionImage->url = $filenameExt;
list($width, $height) = getimagesize(public_path().'/images/' . $filenameExt);
$sessionImage->width = $width;
$sessionImage->height = $height;
$sessionImage->save();
return;
}
My problem is that, when I upload a .jpg I am being told that it is not a proper file type, even though my validation rules accept a .jpg. I'm not sure what I'm doing wrong, as the validator is failing on the line indicated in my Image Repository. Why does it fail there? At first I thought it was because return dd($form_data); yeilds an array but apparently that is what the validator wants, not a foreach for each file? I'm very confused, please assist and I can provide more code if needed, this is just excerpts.
Update: When I comment out my script in my view, the functionality seems to work perfectly in that images are being uploaded to my server and I can see this happening, but why when I set some options on the dropzone does it suddenly break? Any ideas?

Answer 1

The problem was on the client side. To be able to set options on the Dropzone.js properly, you want to disable autodiscover and set it up programmatically, like so:
Dropzone.autoDiscover = false;
After that, carry on, like so:
$("#upload").dropzone({
url: "http://examle.com/upload_video",
clickable: true,
uploadmultipe:true,
maxFilesize: 20,
init: function() {
this.on("queuecomplete", function(file, serverresponse) { window.location.href="http://example.com/your_awesome_profile"; });
}
});