Play with a mobile friendly capture-image-from device when adding an asset. This also involved rewriting the upload to be all ajaxy and stuff

app/Http/Controllers/AssetsController.php

@@ -208,15 +208,23 @@ class AssetsController extends Controller
         }
 
         // Create the image (if one was chosen.)
-        if (Input::file('image')) {
+        if (Input::has('image')) {
-            $image = Input::file('image');
+            $image = Input::get('image');
-            $file_name = str_random(25).".".$image->getClientOriginalExtension();
+            $header = explode(';', $image, 2)[0];
+            $extension = substr( $header, strpos($header, '/')+1);
+            $image = substr( $image, strpos($image, ',')+1);
+
+            $file_name = str_random(25).".".$extension;
             $path = public_path('uploads/assets/'.$file_name);
-            Image::make($image->getRealPath())->resize(500, null, function ($constraint) {
+
+            //Currently resizing happens on Client.  Maybe use this for thumbnails in the future?
+            Image::make($image)
+            ->resize(500, 500, function ($constraint) {
                 $constraint->aspectRatio();
                 $constraint->upsize();
-            })->save($path);
+            })
-                $asset->image = $file_name;
+            ->save($path);
+            $asset->image = $file_name;
 
         }
 
@@ -233,11 +241,11 @@ class AssetsController extends Controller
                     $log = $logaction->logaction('checkout');
             }
             // Redirect to the asset listing page
-            return redirect()->to("hardware")->with('success', trans('admin/hardware/message.create.success'));
+            \Session::flash('success', trans('admin/hardware/message.create.success'));
+            return response()->json(['redirect_url' => route('hardware')]);
         }
 
-        return redirect()->back()->withInput()->withErrors($asset->getErrors());
+        return response()->json(['errors' => $asset->getErrors()]);
-
     }
 
     /**

app/Http/Requests/AssetRequest.php

@@ -4,7 +4,7 @@ namespace App\Http\Requests;
 
 use App\Http\Requests\Request;
 use App\Models\AssetModel;
-
+use Session;
 class AssetRequest extends Request
 {
     /**
@@ -53,6 +53,10 @@ class AssetRequest extends Request
 
     public function response(array $errors)
     {
-        return $this->redirector->back()->withInput()->withErrors($errors, $this->errorBag);
+        $this->session()->flash('errors', Session::get('errors', new \Illuminate\Support\ViewErrorBag)
+            ->put('default', new \Illuminate\Support\MessageBag($errors)));
+
+        return parent::response($errors);
+    //     return $this->redirector->back()->withInput()->withErrors($errors, $this->errorBag);
     }
 }

app/Http/Requests/Request.php

@@ -13,9 +13,9 @@ abstract class Request extends FormRequest
         return $this->rules;
     }
 
-    public function response(array $errors)
+    // public function response(array $errors)
-    {
+    // {
-        $this->session->flash('errorMessages', $errors);
+    //     $this->session->flash('errorMessages', $errors);
-        return $this->redirector->back()->withErrors($errors)->withInput();
+    //     return $this->redirector->back()->withErrors($errors)->withInput();
-    }
+    // }
 }

app/Http/routes.php

@@ -162,7 +162,6 @@ Route::group([ 'prefix' => 'api', 'middleware' => 'auth' ], function () {
         );
     });
 
-
 });
 
 /*

resources/views/hardware/edit.blade.php

@@ -15,7 +15,6 @@
   {{ trans('general.back') }}</a>
 @stop
 
-
 {{-- Some room for the modals --}}
 <div class="modal fade" id="createModal">
   <div class="modal-dialog">
@@ -112,9 +111,9 @@
 <div class="row">
   <div class="col-md-8 col-md-offset-2">
     @if ($asset->id)
-     <form class="form-horizontal" method="post" action="{{ route('update/hardware',$asset->id) }}" autocomplete="off" role="form" enctype="multipart/form-data" >
+     <form id="create-form" class="form-horizontal" method="post" action="{{ route('update/hardware',$asset->id) }}" autocomplete="off" role="form" enctype="multipart/form-data" >
    @else
-     <form class="form-horizontal" method="post" action="{{ route('savenew/hardware') }}" autocomplete="off" role="form" enctype="multipart/form-data">
+     <form id="create-form" class="form-horizontal" method="post" action="{{ route('savenew/hardware') }}" autocomplete="off" role="form" enctype="multipart/form-data">
    @endif
 
 
@@ -373,7 +372,8 @@
        <div class="form-group {{ $errors->has('image') ? 'has-error' : '' }}">
            <label class="col-md-3 control-label" for="image">{{ trans('general.image_upload') }}</label>
            <div class="col-md-5">
-               {{ Form::file('image') }}
+               <!-- {{ Form::file('image') }} -->
+               <input type="file" id="file-upload" accept="image/*" capture="camera" name="image">
                {!! $errors->first('image', '<span class="alert-msg">:message</span>') !!}
            </div>
        </div>
@@ -383,7 +383,7 @@
       </div><!-- /.box-body -->
       <div class="box-footer text-right">
         <a class="btn btn-link" href="{{ URL::previous() }}" method="post" enctype="multipart/form-data">{{ trans('button.cancel') }}</a>
-        <button type="submit" class="btn btn-success"><i class="fa fa-check icon-white"></i> {{ trans('general.save') }}</button>
+        <button type="submit" class="btn btn-success" id="submit-button"><i class="fa fa-check icon-white"></i> {{ trans('general.save') }}</button>
       </div><!-- /.box-footer -->
     </div><!-- /.box -->
 
@@ -427,7 +427,6 @@
     	    $.ajax({
     	        url: "{{config('app.url') }}/api/statuslabels/"+status_id+"/deployable",
     	        success: function(data) {
-                    //console.log(data);
                     $(".status_spinner").css("display", "none");
 
     	            if(data == true){
@@ -435,7 +434,7 @@
     	            } else {
     	                 $("#assigned_user").css("display", "none");
     	            }
-    	        }
+                }
     	    });
         }
 	};
@@ -491,6 +490,124 @@ $(function () {
     //console.warn("The Model is: "+model+" and the select is: "+select);
   });
 
+   $("form").submit( function(event) {
+    event.preventDefault();
+    return sendForm();
+  });
+
+  // Resize Files when chosen
+
+
+
+    //First check to see if there is a file before doing anything else
+
+    var imageData = "";
+    var $fileInput = $('#file-upload'); 
+    $fileInput.on('change', function(e) {
+      if( $fileInput != '' ) {
+        if(window.File && window.FileReader && window.FormData) {
+          var file = e.target.files[0];
+          if(file) {
+            if(/^image\//i.test(file.type)) {
+              readFile(file);
+            } else {
+              alert('Invalid Image File :(');
+            }
+          }
+        }
+        else {
+          console.log("File API not supported, not resizing");
+        } 
+      }
+    });
+
+
+  function readFile(file) {
+    var reader = new FileReader();
+
+    reader.onloadend = function() {
+      processFile(reader.result, file.type);
+    }
+
+    reader.onerror = function() { 
+      alert("Unable to read file");
+    }
+
+    reader.readAsDataURL(file);
+  }
+
+  function processFile(dataURL, fileType) {
+    var maxWidth = 800;
+    var maxHeight = 800;
+
+    var image = new Image();
+    image.src = dataURL;
+
+    image.onload = function() {
+      var width = image.width;
+      var height = image.height;
+      var shouldResize = (width > maxWidth) || (height > maxHeight);
+
+      if(!shouldResize) {
+        imageData = dataURL;
+        return;
+      }
+
+      var newWidth;
+      var newHeight;
+
+      if( width > height) {
+        newHeight = height * (maxWidth/width);
+        newWidth = maxWidth;
+      } else {
+        newWidth = width * (maxHeight/height);
+        newHeight = height;
+      }
+      var canvas = document.createElement('canvas');
+
+      canvas.width = newWidth;
+      canvas.height = newHeight;
+
+      var context = canvas.getContext('2d');
+
+      context.drawImage(this, 0, 0, newWidth, newHeight);
+
+      dataURL = canvas.toDataURL( fileType );
+
+      imageData = dataURL;
+
+    };
+
+    image.onerror = function () {
+      alert('Unable to process file :(');
+    }
+  }
+
+  function sendForm() {
+    var form = $("#create-form").get(0);
+    var successRoute = "{{route('hardware')}}";
+    var formData = $('#create-form').serializeArray();
+    formData.push({name:'image', value:imageData});
+    $.ajax({
+      type: 'POST',
+      url: form.action,
+      headers:{"X-Requested-With": 'XMLHttpRequest'},
+      data: formData,
+      dataType: 'json',
+      success: function(data) {
+        // AssetController flashes success to session, redirect to hardware page.
+        window.location.href = successRoute;
+      },
+      error: function(data) {
+        // AssetRequest Validator will flash all errors to session, this just refreshes to see them.
+        window.location.reload();
+      }
+    });
+
+    return false;
+  }
+
+
   $('#modal-save').on('click',function () {
     var data={};
     //console.warn("We are about to SAVE!!! for model: "+model+" and select ID: "+select);