Add DropzoneJS for file upload with Laravel 5

I have a form with files uploading input that is working well but I want replace it with DropzoneJS to add drag and drop functionality but any files get uploaded with DropzoneJS.

This what my wiew looks like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Testing DropzoneJS with Laravel 5</title>


<script src="{{ asset('js/dropzone.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/dropzone.min.css') }}">

</head>
<body>

<div class="container">
            <form class="form-horizontal dropzone dz-clickable" action="{{url('/upload)}}" method="post"  enctype="multipart/form-data">
            <!-- Name input-->

            <input id="name" name="name" type="text" placeholder="Your Name" class="form-control">

            <div class="dz-message" id="my-dropzone">
            <h4>Drag Photos to Upload</h4>
            <span>Or click to browse</span>
            </div>

            <!-- Token -->
            <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
            <!-- Form actions -->

            <button type="submit" class="btn btn-primary btn-lg">Add</button>
          </form>
</div>

</body>
</html>

my route file:

Route::post('/upload', function(){
    $the_new_product->name = Input::get('name');
    $the_new_product_picture = Input::file('file');

    return dd($the_new_product_picture); // I get Null as respons 
});

I get Null as respons, so I guess the file is not uploaded. Am I missing something?

Well I tried dropzone.js and it was was blazing fast and everything worked fine.

And after looking at your code, I think I figured out your problem:

On your route.php you have this:

Route::post('/upload', function(){
    $the_new_product->name = Input::get('name');
    $the_new_product_picture = Input::file('file');

    return dd($the_new_product_picture); // I get Null as respons 
});

This is wrong, you see when you want to fetch a file you must use Request not Input, Input was used on Laravel 4.2.

Just copy and paste this and overwrite your upload route on your routes.php

Route::post('/upload', function () {
    //check if file was uploaded
    if (Request::hasFile('file'))
    {
        //houston we have a file!
        $file = Request::file('file');

        //move it to our public folder and rename it to $name
        Request::file('file')->move('images', 'insert_file_name.'.$file->getClientOriginalExtension());
        echo 'file uploaded!';
        var_dump($file);
    }else{
        echo 'no file, no bueno';
    }
});

And that's it! If you want to read more about getting form inputs and files you should read the Request documentation also since you usually want to validate that input, take a look at Validation documentation

EDIT: Here's my View:

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="{{ asset('css/dropzone.css') }}">
        <script type="text/javascript" src="{{ asset('js/dropzone.js') }}"></script>

        <style>
            html, body {
                height: 100%;
            }

            body {
                margin: 0;
                padding: 0;
                width: 100%;
                color: #B0BEC5;
                display: table;
                font-weight: 100;
                font-family: 'Lato';
            }

            .container {
                text-align: center;
                display: table-cell;
                vertical-align: middle;
            }

            .content {
                text-align: center;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">
                 <form class="form-horizontal dropzone dz-clickable" action="{{url('/upload')}}" method="post"  enctype="multipart/form-data">
                    <!-- Name input-->

                    <input id="name" name="name" type="text" placeholder="Your Name" class="form-control">

                    <div class="dz-message" id="my-dropzone">
                    <h4>Drag Photos to Upload</h4>
                    <span>Or click to browse</span>
                    </div>

                    <!-- Token -->
                    <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
                    <!-- Form actions -->

                    <button type="submit" class="btn btn-primary btn-lg">Add</button>
                  </form>
            </div>
        </div>
    </body>
</html>