Added image preview for uploads

public/mix-manifest.json

@@ -2,13 +2,13 @@
     "/js/build/vue.js": "/js/build/vue.js?id=25049a0c0eb736e1c883",
     "/css/AdminLTE.css": "/css/AdminLTE.css?id=b8be19a285eaf44eec37",
     "/css/app.css": "/css/app.css?id=407edb63cc6b6dc62405",
-    "/css/overrides.css": "/css/overrides.css?id=33d8f8fea649acea5f9c",
+    "/css/overrides.css": "/css/overrides.css?id=c289c71c08df753ebc45",
     "/js/build/vue.js.map": "/js/build/vue.js.map?id=6b79d08f1decca72957c",
     "/css/AdminLTE.css.map": "/css/AdminLTE.css.map?id=99f5a5a03c4155cf69f6",
     "/css/app.css.map": "/css/app.css.map?id=bdbe05e6ecd70ccfac72",
     "/css/overrides.css.map": "/css/overrides.css.map?id=898c91d4a425b01b589b",
-    "/css/dist/all.css": "/css/dist/all.css?id=dc1449877e0f8abedc47",
+    "/css/dist/all.css": "/css/dist/all.css?id=5fdad90c2d445e4a1a2c",
-    "/js/dist/all.js": "/js/dist/all.js?id=d3af8331997bd82e4ec4",
+    "/js/dist/all.js": "/js/dist/all.js?id=6e959b16034ab00e3007",
-    "/css/build/all.css": "/css/build/all.css?id=dc1449877e0f8abedc47",
+    "/css/build/all.css": "/css/build/all.css?id=5fdad90c2d445e4a1a2c",
-    "/js/build/all.js": "/js/build/all.js?id=d3af8331997bd82e4ec4"
+    "/js/build/all.js": "/js/build/all.js?id=6e959b16034ab00e3007"
 }

resources/assets/js/snipeit.js

@@ -322,19 +322,42 @@ $(document).ready(function () {
     // ------------------------------------------------
 
 
+
+    // Image preview
+    function readURL(input) {
+        if (input.files && input.files[0]) {
+            var reader = new FileReader();
+            reader.onload = function(e) {
+                $('#imagePreview').attr('src', e.target.result);
+            }
+            reader.readAsDataURL(input.files[0]);
+        }
+    }
+
+    function formatBytes(bytes) {
+        if(bytes < 1024) return bytes + " Bytes";
+        else if(bytes < 1048576) return(bytes / 1024).toFixed(3) + " KB";
+        else if(bytes < 1073741824) return(bytes / 1048576).toFixed(3) + " MB";
+        else return(bytes / 1073741824).toFixed(3) + " GB";
+    };
+
      // File size validation
     $('#uploadFile').bind('change', function() {
         $('#upload-file-status').removeClass('text-success').removeClass('text-danger');
         $('.goodfile').remove();
         $('.badfile').remove();
+        $('.badfile').remove();
+        $('.previewSize').hide();
 
         var max_size = $('#uploadFile').data('maxsize');
         var actual_size = this.files[0].size;
 
         if (actual_size > max_size) {
-            $('#upload-file-status').addClass('text-danger').removeClass('help-block').prepend('<i class="badfile fa fa-times"></i> ');
+            $('#upload-file-status').addClass('text-danger').removeClass('help-block').prepend('<i class="badfile fa fa-times"></i> ').append('<span class="previewSize">This file is ' + formatBytes(actual_size) + '.</span>');
         } else {
             $('#upload-file-status').addClass('text-success').removeClass('help-block').prepend('<i class="goodfile fa fa-check"></i> ');
+            readURL(this);
+            $('#imagePreview').fadeIn();
         }
         $('#upload-file-info').html(this.files[0].name);
 
@@ -344,4 +367,9 @@ $(document).ready(function () {
 
 
 
+
+
+
+
+
 });

resources/assets/less/overrides.less

@@ -330,3 +330,9 @@ img.navbar-brand-img, .navbar-brand>img {
 #toolbar {
   margin-top: 10px;
 }
+
+#uploadPreview {
+  border-color: grey;
+  border-width: 1px;
+  border-style: solid
+}

resources/views/partials/forms/edit/image-upload.blade.php

@@ -1,6 +1,6 @@
 <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-9">
+    <div class="col-md-5">
         <label class="btn btn-default">
             {{ trans('button.select_file')  }}
             <input type="file" name="image" id="uploadFile" data-maxsize="{{ \App\Helpers\Helper::file_upload_max_size() }}" accept="image/gif,image/jpeg,image/png,image/svg" style="display:none">
@@ -10,5 +10,8 @@
         <p class="help-block" id="upload-file-status">{{ trans('general.image_filetypes_help', ['size' => \App\Helpers\Helper::file_upload_max_size_readable()]) }}</p>
         {!! $errors->first('image', '<span class="alert-msg">:message</span>') !!}
     </div>
+    <div class="col-md-4">
+        <img id="imagePreview" style="max-width: 200px;">
+    </div>
 </div>