Creating a secure form for file upload

please note – csrf protection comes out of box in laravel 5

Now we should make an upload form for our image site. We must make a view file, which will be loaded over a controller.

  1. First, open up app/http/routes.php, remove the line starting with Route::get() that comes with Laravel, and add the following lines:
    //This is for the get event of the index page
Route::get('/',array('as'=>'index_page','uses'=>'[email protected]'));
//This is for the post event of the index.page
Route::post('/',array('as'=>'index_page_post','before' =>'csrf', 'uses'=>'[email protected]'));

    The key 'as' defines the name of the route (like a shortcut). So if you make links to the routes, even if the URL changes for the route, your links to the application won’t be broken. The beforekey defines what filters will be used before the action starts. You can define your own filters, or use the built-in ones. We set csrf, so the CSRF (Cross-site Request Forgery) checking will be done before the action starts. This way, you can prevent attackers from injecting unauthorized requests into your application. You can use multiple filters with the separator; for example,filter1|filter2.

    Note

    You can also define the CSRF protection from controllers directly.

  2. Now, let’s create our first method for the controller. Add a new file containing the following code and name it imageController.php in app/http/controllers/:
    <?php

class imageController extends BaseController {

  
  public function getIndex()
  {
    //Let's load the form view
    return View::make('tpl.index');
  }

}

    Our controller is RESTful; that’s why our method index is named getIndex(). In this method, we are simply loading a view.

  3. Now let’s create a master page for the view using the following code. Save this file asfrontend_master.blade.php in app/views/:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
  <head>
  <meta http-equiv="content-type"content="text/html; charset=utf-8">
  <title>Laravel image Sharing</title>
  {{HTML::style('css/styles.css')}}
  </head>

  <body>
    {{--Your title of the image (and yeah, blade enginehas its own commenting, cool, isn't it?)--}}
    <h2>Your Awesome image Sharing Website</h2>

    {{--If there is an error flashdata in session(from form validation), we show the first one--}}
    @if(Session::has('errors'))
      <h3 class="error">{{$errors->first()}}</h3>
    @endif

    {{--If there is an error flashdata in session whichis set manually, we will show it--}}
    @if(Session::has('error'))
      <h3 class="error">{{Session::get('error')}}</h3>
    @endif

    {{--If we have a success message to show, we printit--}}
    @if(Session::has('success'))
      <h3 class="error">{{Session::get('success')}}</h3>
    @endif

    {{--We yield (get the contents of) the section named'content' from the view files--}}
    @yield('content')

  </body>
</html>

    To add a CSS file (which we will create in the next steps), we use the style() method of the HTMLclass. And our masterpage yields a section named content, which will be filled with the view files sections.

  4. Now, let’s create our view file section by using the following code. Save this file asindex.blade.php in the resources/views/tpl/directory:
    @extends('frontend_master')

@section('content')
  {{Form::open(array('url' => '/', 'files' => true))}}
  {{Form::text('title','',array('placeholder'=>'Please insert your title here'))}}
  {{Form::file('image')}}
  {{Form::submit('save!',array('name'=>'send'))}}
  {{Form::close()}}
@stop

    In the first line of the preceding code, we told the Blade Engine that we will be usingfrontend_master.blade.php as the layout. This is done using the @extends() method in Laravel 4.

    Note

    Benefiting from the Form class of Laravel, we generated an upload form with the title field andupload field. , to make a new upload form, we are not usingForm::open_for_files() anymore. It’s merged with the open() method, which accepts either a string or an array if you want to pass more than one parameter. We will be passing the action URL as well as telling it that it’s an upload form, so we passed two parameters. The url key is to define where the form will be submitted. The files parameter is Boolean, and if it’s set to true, it’ll make the form an upload form, so we can work with files.

    To secure the form and to prevent unwanted form submission attempts, we will be needing a CSRF key hidden in our form. Thanks to Laravel’s Form class, it’s generated in the form automatically, right after the form opening tag. You can check it by looking at the source code of the generated form.

    The hidden autogenerated CSRF form element looks as follows:

    <input name="_token" type="hidden" value="SnRocsQQlOnqEDH45ewP2GLxPFUy5eH4RyLzeKm3">
  5. Now let’s tidy up the form a bit. This is not directly related to our project, but just for the look. Save the styles.css file in public/css/ (the path we defined on the master page):
    /*Body adjustment*/
body{width:60%; margin:auto; background:#dedede}
/*The title*/
h2{font-size:40px; text-align:center; font-family:Tahoma,Arial,sans-serif}
/*Sub title (success and error messages)*/
h3{font-size:25px; border-radius:4px; font-family:Tahoma,Arial,sans-serif; text-align:center;width:100%}
h3.error{border:3px solid #d00; background-color:#f66; color:#d00 }
h3.success{border:3px solid #0d0; background-color:#0f0; color:#0d0}p{font-size:25px; font-weight: bold; color: black;font-family: Tahoma,Arial,sans-serif}ul{float:left;width:100%;list-style:none}li{float:left;margin-right:10px}
/*For the input files of the form*/
input{float:left; width:100%; border-radius:13px;font-size:20px; height:30px; border:10px 0 10px 0;margin-bottom:20px}

    We’ve styled the body by giving it 60 percent width, making it center-aligned, and giving it a grayish background. We also formatted h2 and h3 messages with success and error classes, andforms.

    Now that our form is ready, we are ready to progress to the next step of the project.