changes to allow preview of image first

public/js/app.js

@@ -45,6 +45,23 @@ $.when( $.ready ).then(function() {
 
     }
 
+    function readURL(input) {
+
+        if (input.files && input.files[0]) {
+          var reader = new FileReader();
+      
+          reader.onload = function(e) {
+            $('#appimage img').attr('src', e.target.result);
+          }
+      
+          reader.readAsDataURL(input.files[0]);
+        }
+      }
+
+      $("#upload").change(function() {
+        readURL(this);
+      });
+
     $( "#sortable" ).sortable({
         stop: function (event, ui) {
             var idsInOrder = $("#sortable").sortable('toArray', {

resources/assets/js/app.js

@@ -36,6 +36,23 @@ $.when( $.ready ).then(function() {
 
     }
 
+    function readURL(input) {
+
+        if (input.files && input.files[0]) {
+          var reader = new FileReader();
+      
+          reader.onload = function(e) {
+            $('#appimage img').attr('src', e.target.result);
+          }
+      
+          reader.readAsDataURL(input.files[0]);
+        }
+      }
+
+      $("#upload").change(function() {
+        readURL(this);
+      });
+
     $( "#sortable" ).sortable({
         stop: function (event, ui) {
             var idsInOrder = $("#sortable").sortable('toArray', {

resources/views/items/form.blade.php

@@ -43,11 +43,13 @@
                     ?>
                     <img src="{{ asset('storage/'.$icon) }}" />
                     {!! Form::hidden('icon', $icon, ['class' => 'form-control']) !!}
+                    @else
+                    <img src="/img/heimdall-icon-small.png" />
                     @endif
                     </div>
                     <div class="upload-btn-wrapper">
                         <button class="btn">{{ __('app.buttons.upload')}} </button>
-                        <input type="file" name="file" />
+                        <input type="file" id="upload" name="file" />
                     </div>
                 </div>
             </div>