Add DropzoneJS for file upload with Laravel 5

Question

Add DropzoneJS for file upload with Laravel 5

6.8k views Asked by Asme Just At 12 June 2015 at 15:08

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?

Original Q&A

There are 1 answers

**Fabio Antunes** · Accepted Answer · 2015-06-13 22:03:59

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>

TechQA.

Add DropzoneJS for file upload with Laravel 5

There are 1 answers

Related Questions in PHP

Related Questions in LARAVEL

Related Questions in LARAVEL-5

Related Questions in DROPZONE.JS

Popular Questions

Popular Tags

Trending Questions