title: How to fix 'The file failed to upload.' error using any validation for image upload - Laravel 5.7
body: <p><strong>I am using Laravel 5.7</strong></p>
  
  <p>I am attempting to upload an image file and validating its upload using built in laravel validation. It keeps responding with <code>'The file failed to upload.'</code></p>
  
  <p>I am using AJAX to upload this data. My form has <code>enctype="multipart/form-data"</code> set.</p>
  
  <p>I have already figured out to include the CSRF token with the AJAX request.</p>
  
  <p>I have already fixed the <code>php.ini</code> max_file_size issue, and the files I am testing with are far under 10MB.</p>
  
  <p>If I upload a text file (as an example), and with validation set to <code>required|image|max:10000</code> it will correctly prevent the file from uploading and respond with <code>'File must be an image.'</code></p>
  
  <p>If I disable <strong>all</strong> validation, the file is uploaded just fine.</p>
  
  <p>I cannot think of anything else I may be doing wrong. Please help as this as my project is at a halt at the moment.</p>
  
  <p><strong>Form HTML:</strong></p>
  
  <pre><code>&lt;form method="post" class="dropzone" action="{{ route('images') }}" enctype="multipart/form-data"
                    data-nopants-load="dropzone{'transformImage':true,'acceptedFiles-1':'image/jpg','previewsContainer':'#dropzone-previews'}"&gt;
                  @method('post')
                  @csrf
                  &lt;div class="dz-border"&gt;
                      &lt;div class="background"&gt;&lt;/div&gt;
                      &lt;div class="border"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="dz-message margins-auto _font-size-large"&gt;&lt;span&gt;Drop Images here or &lt;span class="_underline"&gt;Click&lt;/span&gt; to Upload.&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="fallback flex-col"&gt;
                      &lt;div class="self-center margin-bottom"&gt;
                          &lt;input name="file" type="file" class="form-input" multiple /&gt;
                      &lt;/div&gt;
                      &lt;button type="submit" class="button -call"&gt;Upload&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p><strong>UploadImageFormRequest.php</strong></p>
  
  <pre><code>namespace App\Http\Requests;
  
  use Illuminate\Foundation\Http\FormRequest;
  
  use Illuminate\Support\Facades\Auth;
  
  class UploadImageFormRequest extends FormRequest
  {
      /**
       * Determine if the user is authorized to make this request.
       *
       * @return bool
       */
      public function authorize()
      {
          return Auth::check();//user()-&gt;can('create', Organization::class);
      }
  
      /**
       * Get the validation rules that apply to the request.
       *
       * @return array
       */
      public function rules()
      {
          return ['file' =&gt; 'required|image|mimes:jpeg,bmp,png'];
      }
  }
  </code></pre>
  
  <p><strong>UploadImagesController.php</strong></p>
  
  <pre><code>namespace App\Http\Controllers;
  
  use Illuminate\Http\Request;
  
  use App\Http\Requests\UploadImageFormRequest;
  
  class UploadImagesController extends Controller
  {
      public function __construct()
      {
          $this-&gt;middleware('auth:user,admin');
      }
  
      public function store(UploadImageFormRequest $request){
      //Wont get here...
      }
  }
  </code></pre>