File uploads using dropzone

This is working for dropzone:

 $file = Input::file('file');

            $destinationPath = public_path() . '/uploads/';
            $filename = $file->getClientOriginalName();


            $upload_success = Input::file('file')->move($destinationPath, $filename);

            if ($upload_success) {

                $upload = new Image();
                $upload->name = $filename;
                $upload->size = $file->size;
                $upload->save();

                return Response::json(array('files'=> array($upload)), 200);
            } else {
                return Response::json('error', 400);

            }

@hostianer Yes I also tried it without the array! But the same error,the image object is always null.

@hoistainer I was just checking out the other thread posted by you, regarding blueimp image upload issue.Even I want to integrate blueimp but cannot understand how to go about integratig it with laravel. We are planning to have angular on the front end. It would be a great help if you could explain me how can I integrate the UploadHandler class from blueimp into laravel.(Dependency Injection)??

I will still try dropzone as an alternative but I am more comfortable with blueimp as using it since long time now.

$filename = $file->getClientOriginalName();
echo $filename;

@cbil360 could it be that the image you're trying to upload is too large?

See this issue for some more info on how to deal with it: https://github.com/laravel/framework/issues/8203

Because blueimp -

Trust me, dropzone is just easy. The jquery ajax uploader is a bit more complex.

Dropzone works fine as it is without problems and you dont have to write any javascript. Just add the class, your input and you`re good to go.

@MarkRedeman Good point but its just 166 kb and not large enough to cause an issue I believe! :P

@hostainer I am using laravel 5. Sorry did not get when you say use your own class image I am new to OOP and laravel. If you can elaborate,it might help me!

$file = Input::file('file');
    var_dump($file);
    $filename = $file->getClientOriginalName();
    echo 'Image name'.$filename;

I still get the $file value as null.

@cbil360 sorry i edited my post i reversed it with an image class :)

@hostainer I trust you on dropzone. :)
But I do not find any good tutorial or resource which has details about the usage with Angular and Laravel.Also I am still struggling to get basic upload. I am also unable to find anything where a upoader(progress bar) is visible and the multiple file uploads work smooth. If you can point me to one. I just did not wanted to go and dig the docs for all these methods.I will need a lot of customizations to be done in the uploader to fit it.

@hostainer I jsut tried this plain example here (http://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php ) and it worked.Very simple,but worked. I wonder sometimes I struggle with frameworks.Not sure what is gone wrong.

@cbil360 yeah as is said dropzone is very simple. But of course you want to store your image also in the database. ( file name / path etc. )

So you need your own model and controller.

If you want you can post your complete code ( controller, model and html ) here: laravel.io/bin Or of course here in the forum.

btw: did you paste your namespace for File ?

@hostianer I am adding it directly in the routes.php. use File; The file facade! But still the same error! :P

@cbil360 the example link was broken, can't see the code, sad

use Illuminate\Support\Facades\File;

        $file = Request::file('file');
        $image_name = time()."-".$file->getClientOriginalName();
        $file->move('uploads', $image_name);

and save path to db

@dlenzin Fixed it.It took the bracket at the end. :P @sonu Will try it and revert

@hostianer @Sonu @dlenzin Posting my entire code routes.php

<?php
use Illuminate\Support\Facades\File;               //Tried both this with Request
use File;                                                              //This with File 

Route::get('/', 'WelcomeController@index');


Route::get('about', 'PagesController@about');
Route::get('contact', 'PagesController@contact');

Route::resource('articles', 'ArticlesController');

// creating a route for login
Route::get('login', 'LoginController@index');
Route::post('login', 'LoginController@authenticate');
Route::get('register', 'RegisterController@index');
Route::get('dashboard', 'DashboardController@index');
Route::post('happy', function(){
    //$file = Input::file('file');
    $file = Request::file('file');
    var_dump($file);
    $filename = $file->getClientOriginalName();
    echo 'Image name'.$filename;
});

WelcomeController

<?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;

use Illuminate\Http\Request;

class WelcomeController extends Controller {

    //
    public function index()
    {
        // return ('My laravel app works!!!!');
        return view('welcome');
    }
}

Welcome.blade.php

<html>
    <head>
        <title>Laravel</title>
        
        <link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>

        <style>
            //Eliminated to shorten the code
        </style>
        <script src="http://localhost/learning-laravel-5/public/js/dropzone.js"></script>
        <link rel="stylesheet" href="http://localhost/learning-laravel-5/public/css/dropzone.css" media="all">
    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="title">Laravel 5</div>
                <div class="quote">{{ Inspiring::quote() }}</div>
                <form class="dropzone dz-clickable" method="POST" enctype="multipart/form-data" action="http://localhost/learning-laravel-5/public/happy">
                    <div class="dz-message">
                        <h4>Drag Photos to Upload</h4>
                        <span>Or click to browse</span>
                    </div>
                    <input name="_token" type="hidden" value="{{ csrf_token() }}">
                    <input type="submit" name="submitForm" value="Upload Image">
                </form>
            </div>
        </div>
    </body>
</html>

I am still getting the same error. Actually I need an implementation using angular,so if you can point me to something relevant it would be easy for me to take forward.

Thank you

use Illuminate\Support\Facades\Input as Input;

Route::post('happy', function(){

    if(Request::ajax()) { // Becuase you are uploading with ajax / dropzone
        $file = Input::file('file');

        $destinationPath = public_path() . '/uploads/';
        $filename = $file->getClientOriginalName();
        $upload_success = Input::file('file')->move($destinationPath, $filename);
        if ($upload_success) {
            return Response::json('success', 200);
        } else {
            return Response::json('error', 400);

        }
    }
});

@hostianer That worked! Danke! Can you also point me to the docs which have details about handling ajax request!? I checked here http://laravel.com/docs/5.0/requests but it does not cover the ajax requests

@cbil360 glad to help you. There is nothing really special about Request::ajax.

You just have to return the success as JSON and also the false.

Because dropzone is using an AJAX Request you have to tell laravel to fetch this ajax post. Otherwise it wont work.

This is the only thing you have to note about Request::ajax.