HTML Layout - Upload Form

Image Upload Service

In this video lesson we will be coding the image upload form itself. This means we will work on the front end integrating DropzoneJS and connecting it into our upload method.

Video Information

Hi everyone , welcome back to Laracademy. It's Mickey again and in this video we are going to work our HTML layout for the Image Upload form. If you haven't already gotten the master layout working you will need to watch the previous video, or grab the code from github before continuing.

The first thing we want to do is create a new route for our application. Let's open up web.php and add the following route.

Route::get('create')->uses('Uploads\UploadController@create')->name('upload.create');
Route::post('store')->uses('Uploads\UploadController@store')->name('upload.store');

Now we can use the artisan command to make this controller. Hopefully you noticed that I am going to be storing this controller in it's own folder. This is to just help keep our project organized.

php artisan make:controller Uploads\UploadController

Now we can load it up in our editor and make the two functions that we are going to be using.

public function create()
{
  return view('uploads.create');
}

public function store()
{
  dd(request()->all()); // let's just dump the request for now
}

Our next step will be creating the view. Inside resources/views create a new folder called uploads and within this folder we will create a create.blade.php.

We need to extend our master file and add the html. We are going to be using bootstrap's file upload

@extends('layout.app')

@section('content')
  <section id="main">
    <div class="row">
      <div class="col">
        <h3>
          Upload Image
        </h3>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <form method="POST" action="{{ route('upload.store') }}" class="dropzone" enctype="multipart/form-data">
          {!! csrf_field() !!}

          <div class="fallback form-group">
            <label>
              Image
            </label>
            <input type="file" name="image" required>
          </div>

        </form>
      </div>
    </div>
  </section>
@endsection

Dropzone will automatically look for any class of dropzone and add the correct javascript to the element. The only thing we need to do is require the dropzone script and style. We can do this using stacks. Stacks allow us to push things from our pages into another template without overwriting what is already there. Let's switch to our master file.

@stack('style')

@stack('script')

Now if we switch back to our upload blade file we can push items into these stacks. Let's add the style scripts and the dropzone javascript file from a CDN.

@push('style')
  <link href="//cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/basic.css">
  <link href="//cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/dropzone.css">
@endpush

@push('script');
  <script src="//cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/dropzone.js"></script>
@endpush

The last thing we need to do is hook up this page to our navigation. So locate your partial file navigation.blade.php and add the new route.

<a class="nav-link" href="{{ route('upload.create') }}">Upload Image</a>

Finally let's load everything up in chrome and see if we have any errors.

Do you have a question? Go ahead and ask it below.

Please login to ask your question