File upload look/feel & validation

tsawler · Mar 28, 2015 · 2eec927 · 2eec927
1 parent f0ae50c
commit 2eec927
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 11 deletions.
diff --git a/public/files/.gitkeep b/public/files/.gitkeep
diff --git a/src/controllers/LfmController.php b/src/controllers/LfmController.php
@@ -3,6 +3,7 @@
 use Illuminate\Routing\Controller;
 use Illuminate\Support\Facades\Response;
 use Illuminate\Support\Facades\View;
+use Tsawler\Laravelfilemanager\requests\UploadRequest;
 
 
 /**
@@ -11,5 +12,14 @@
  */
 class LfmController extends Controller {
 
+    public function show()
+    {
+        return View::make('laravel-filemanager::index');
+    }
+
+    public function upload(UploadRequest $request)
+    {
+        return "foobar";
+    }
 
 }
diff --git a/src/requests/UploadRequest.php b/src/requests/UploadRequest.php
@@ -0,0 +1,31 @@
+<?php namespace Tsawler\Laravelfilemanager\requests;
+
+use App\Http\Requests\Request;
+
+class UploadRequest extends Request {
+
+    /**
+     * Validation rules for signing up for free trial or registering for paid account.
+     *
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'file_to_upload' => 'required|in:jgp,gif,png',
+        ];
+    }
+
+}
diff --git a/src/routes.php b/src/routes.php
@@ -1,6 +1,6 @@
 <?php
 
 
-Route::get('/laravel-filemanager', function(){
-   return View::make('laravel-filemanager::index');
-});
+Route::get('/laravel-filemanager', 'Tsawler\Laravelfilemanager\controllers\LfmController@show');
+
+Route::post('/laravel-filemanager/upload', 'Tsawler\Laravelfilemanager\controllers\LfmController@upload');
diff --git a/src/views/index.blade.php b/src/views/index.blade.php
@@ -3,9 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <title>File Manager</title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="/vendor/laravel-filemanager/tree-jquery/jqtree.css" />
+
     <style>
        .wrapper {
            min-height: 500px;
@@ -17,6 +18,19 @@
     </style>
 </head>
 <body>
+@if ($errors->any())
+    <div class="row">
+        <div class="col-md-8 col-md-offset-2">
+            <div class="alert alert-danger" role="alert">
+                <ul>
+                    @foreach($errors->all() as $error)
+                        <li>{{ $error }}</li>
+                    @endforeach
+                </ul>
+            </div>
+        </div>
+    </div>
+@endif
 <div class="container lfm-override">
     <div class="row">
         <div class="panel panel-primary">
@@ -45,18 +59,18 @@
                                     <!-- Collect the nav links, forms, and other content for toggling -->
                                     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                         <ul class="nav navbar-nav">
-                                            <li><a href="#!"><i class="fa fa-upload"></i> Upload</a></li>
+                                            <li><a href="#!" id="upload" data-toggle="modal" data-target="#uploadModal"><i class="fa fa-upload"></i> Upload</a></li>
                                             <li class="dropdown">
                                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Edit <span class="caret"></span></a>
                                                 <ul class="dropdown-menu" role="menu">
-                                                    <li><a href="#">Crop</a></li>
-                                                    <li><a href="#">Scale</a></li>
-                                                    <li><a href="#">Rotate</a></li>
+                                                    <li><a href="#"><i class="fa fa-crop"></i> Crop</a></li>
+                                                    <li><a href="#"><i class="fa fa-arrows-v"></i> Scale</a></li>
+                                                    <li><a href="#"><i class="fa fa-rotate-right"></i> Rotate</a></li>
                                                 </ul>
                                             </li>
                                         </ul>
-                                    </div><!-- /.navbar-collapse -->
-                                </div><!-- /.container-fluid -->
+                                    </div>
+                                </div>
                             </nav>
                             <div id="content">
 
@@ -68,10 +82,42 @@
         </div>
     </div>
 </div>
+
+
+
+
+<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="myModalLabel">Upload File</h4>
+            </div>
+            <div class="modal-body">
+                {!! Form::open(array('url' => '/laravel-filemanager/upload', 'role' => 'form', 'name' => 'uploadForm', 'id' => 'uploadForm', 'method' => 'post', 'enctype' => 'multipart/form-data')) !!}
+                <div class="form-group" id="attachment">
+                    {!! Form::label('file_to_upload', 'Choose File', array('class' => 'control-label')); !!}
+                    <div class="controls">
+                        <div class="input-group" style="width: 100%">
+                            <input type="file" name="file_to_upload">
+                        </div>
+                    </div>
+                </div>
+                {!! Form::close() !!}
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary" id="upload-btn">Upload File</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
 <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script src="/vendor/laravel-filemanager/tree-jquery/tree.jquery.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.3.0/bootbox.js"></script>
 <script>
     $(document).ready(function () {
         var data = [
@@ -95,6 +141,10 @@
         });
 
     });
+
+    $("#upload-btn").click(function(){
+       $("#uploadForm").submit();
+    });
 </script>
 </body>
 </html>