Fixes #5859 - add file name/size to file upload UI (#5861)

* Fixes #5859 - add file name/size to file upload UI

* Reverting assetcontroller

Not sure exactly what happened here…

* Production assets

app/Http/Controllers/AssetFilesController.php

@@ -30,8 +30,8 @@ class AssetFilesController extends Controller
 
         $destinationPath = config('app.private_uploads').'/assets';
 
-        if ($request->hasFile('assetfile')) {
+        if ($request->hasFile('file')) {
-            foreach ($request->file('assetfile') as $file) {
+            foreach ($request->file('file') as $file) {
                 $extension = $file->getClientOriginalExtension();
                 $filename = 'hardware-'.$asset->id.'-'.str_random(8);
                 $filename .= '-'.str_slug(basename($file->getClientOriginalName(), '.'.$extension)).'.'.$extension;

app/Http/Controllers/LicensesController.php

@@ -1,6 +1,7 @@
 <?php
 namespace App\Http\Controllers;
 
+use App\Http\Requests\AssetFileRequest;
 use Assets;
 use Illuminate\Support\Facades\Session;
 use Input;
@@ -495,7 +496,7 @@ class LicensesController extends Controller
     * @param int $licenseId
     * @return \Illuminate\Http\RedirectResponse
      */
-    public function postUpload(Request $request, $licenseId = null)
+    public function postUpload(AssetFileRequest $request, $licenseId = null)
     {
         $license = License::find($licenseId);
         // the license is valid
@@ -504,18 +505,9 @@ class LicensesController extends Controller
         if (isset($license->id)) {
             $this->authorize('update', $license);
 
-            if (Input::hasFile('licensefile')) {
+            if (Input::hasFile('file')) {
 
-                foreach (Input::file('licensefile') as $file) {
+                foreach (Input::file('file') as $file) {
-
-                    $rules = array(
-                    'licensefile' => 'required|mimes:png,gif,jpg,jpeg,doc,docx,pdf,txt,zip,rar,rtf,xml,lic'
-                    );
-                    $validator = Validator::make(array('licensefile'=> $file), $rules);
-
-                    if ($validator->fails()) {
-                         return redirect()->back()->with('error', trans('admin/licenses/message.upload.invalidfiles'));
-                    }
                     $extension = $file->getClientOriginalExtension();
                     $filename = 'license-'.$license->id.'-'.str_random(8).'-'.str_slug(basename($file->getClientOriginalName(), '.'.$extension)).'.'.$extension;
                     $upload_success = $file->move($destinationPath, $filename);

app/Http/Requests/AssetFileRequest.php

@@ -25,7 +25,7 @@ class AssetFileRequest extends Request
     {
         $max_file_size = \App\Helpers\Helper::file_upload_max_size();
         return [
-          'file.*' => 'required|mimes:png,gif,jpg,jpeg,doc,docx,pdf,txt,zip,rar|max:'.$max_file_size,
+          'file.*' => 'required|mimes:png,gif,jpg,svg,jpeg,doc,docx,pdf,txt,zip,rar,xls,lic|max:'.$max_file_size,
         ];
     }
 

public/mix-manifest.json

@@ -3,12 +3,12 @@
     "/css/AdminLTE.css": "/css/AdminLTE.css?id=5e72463a66acbcc740d5",
     "/css/app.css": "/css/app.css?id=407edb63cc6b6dc62405",
     "/css/overrides.css": "/css/overrides.css?id=2d81c3704393bac77011",
-    "/js/build/vue.js.map": "/js/build/vue.js.map?id=66ce10b11abd9159c4f7",
+    "/js/build/vue.js.map": "/js/build/vue.js.map?id=0deaf852882fe2d65263",
     "/css/AdminLTE.css.map": "/css/AdminLTE.css.map?id=0be7790b84909dca6a0a",
     "/css/app.css.map": "/css/app.css.map?id=96b5c985e860716e6a16",
     "/css/overrides.css.map": "/css/overrides.css.map?id=f7ce9ca49027594ac402",
     "/css/dist/all.css": "/css/dist/all.css?id=98db4e9b7650453c8b00",
-    "/js/dist/all.js": "/js/dist/all.js?id=8b3cca34ec5a6828bcee",
+    "/js/dist/all.js": "/js/dist/all.js?id=9d02373ef452329336d3",
     "/css/build/all.css": "/css/build/all.css?id=98db4e9b7650453c8b00",
-    "/js/build/all.js": "/js/build/all.js?id=8b3cca34ec5a6828bcee"
+    "/js/build/all.js": "/js/build/all.js?id=9d02373ef452329336d3"
 }

resources/assets/js/snipeit.js

@@ -344,9 +344,9 @@ $(document).ready(function () {
 
     function formatBytes(bytes) {
         if(bytes < 1024) return bytes + " Bytes";
-        else if(bytes < 1048576) return(bytes / 1024).toFixed(3) + " KB";
+        else if(bytes < 1048576) return(bytes / 1024).toFixed(2) + " KB";
-        else if(bytes < 1073741824) return(bytes / 1048576).toFixed(3) + " MB";
+        else if(bytes < 1073741824) return(bytes / 1048576).toFixed(2) + " MB";
-        else return(bytes / 1073741824).toFixed(3) + " GB";
+        else return(bytes / 1073741824).toFixed(2) + " GB";
     };
 
      // File size validation
@@ -356,18 +356,24 @@ $(document).ready(function () {
         $('.badfile').remove();
         $('.badfile').remove();
         $('.previewSize').hide();
+        $('#upload-file-info').html('');
 
         var max_size = $('#uploadFile').data('maxsize');
-        var actual_size = this.files[0].size;
+        var total_size = 0;
 
-        if (actual_size > max_size) {
+        for (var i = 0; i < this.files.length; 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>');
+            total_size += this.files[i].size;
+            $('#upload-file-info').append('<span class="label label-default">' + this.files[i].name + ' (' + formatBytes(this.files[i].size) + ')</span> ');
+        }
+
+        if (total_size > max_size) {
+            $('#upload-file-status').addClass('text-danger').removeClass('help-block').prepend('<i class="badfile fa fa-times"></i> ').append('<span class="previewSize"> Upload is ' + formatBytes(total_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);
+
 
     });
 

resources/lang/en/general.php

@@ -206,7 +206,7 @@
     'unknown_admin'			=> 'Unknown Admin',
     'username_format'		=> 'Username Format',
     'update'                => 'Update',
-    'upload_filetypes_help'      => 'Allowed filetypes are png, gif, jpg, jpeg, doc, docx, pdf, txt, zip, and rar. Max upload size allowed is :size.',
+    'upload_filetypes_help'      => 'Allowed filetypes are png, gif, jpg, jpeg, doc, docx, pdf, xls, txt, lic, zip, and rar. Max upload size allowed is :size.',
     'uploaded'              => 'Uploaded',
     'user'					=> 'User',
     'accepted'			    => 'accepted',

resources/views/hardware/view.blade.php

@@ -94,9 +94,11 @@
         <li>
           <a href="#files" data-toggle="tab"><span class="hidden-lg hidden-md"><i class="fa fa-files-o"></i></span> <span class="hidden-xs hidden-sm">{{ trans('general.files') }}</span></a>
         </li>
-        <li class="pull-right">
+        @can('update', \App\Models\Asset::class)
-          <!-- <a href="#" data-toggle="modal" data-target="#uploadFileModal"><i class="fa fa-paperclip"></i> </a> -->
+        <li class="pull-right"><a href="#" data-toggle="modal" data-target="#uploadFileModal">
+            <i class="fa fa-paperclip"></i> {{ trans('button.upload') }}</a>
         </li>
+        @endcan
       </ul>
       <div class="tab-content">
         <div class="tab-pane fade in active" id="details">
@@ -769,33 +771,6 @@
 
         <div class="tab-pane fade" id="files">
           <div class="row">
-
-            @can('update', \App\Models\Asset::class)
-              {{ Form::open([
-              'method' => 'POST',
-              'route' => ['upload/asset', $asset->id],
-              'files' => true, 'class' => 'form-horizontal' ]) }}
-
-              <div class="col-md-2">
-                <span class="btn btn-default btn-file">Browse for file...
-                    {{ Form::file('assetfile[]', ['multiple' => 'multiple']) }}
-                </span>
-              </div>
-              <div class="col-md-7">
-                {{ Form::text('notes', Input::old('notes', Input::old('notes')), array('class' => 'form-control','placeholder' => 'Notes')) }}
-              </div>
-              <div class="col-md-3">
-                <button type="submit" class="btn btn-primary">{{ trans('button.upload') }}</button>
-              </div>
-
-              <div class="col-md-12">
-                <p>{{ trans('general.upload_filetypes_help', ['size' => \App\Helpers\Helper::file_upload_max_size_readable()]) }}</p>
-                <hr>
-              </div>
-
-              {{ Form::close() }}
-            @endcan
-
             <div class="col-md-12">
               <table
                       class="table table-striped snipe-table"
@@ -881,11 +856,14 @@
     </div> <!-- /.nav-tabs-custom -->
   </div> <!-- /. col-md-12 -->
 </div> <!-- /. row -->
+
+@can('update', \App\Models\Asset::class)
+  @include ('modals.upload-file', ['item_type' => 'asset', 'item_id' => $asset->id])
+@endcan
+
 @stop
 
 @section('moar_scripts')
   @include ('partials.bootstrap-table')
 
-
-
 @stop

resources/views/licenses/view.blade.php

@@ -270,10 +270,6 @@
 
         <div class="tab-pane" id="uploads">
           <div class="table-responsive">
-            <div id="upload-toolbar">
-              <a href="#" data-toggle="modal" data-target="#uploadFileModal" class="btn btn-default"><i class="fa fa-paperclip"></i> {{ trans('button.upload') }}</a>
-            </div>
-
             <table
                 data-cookie-id-table="licenseUploadsTable"
                 data-id-table="licenseUploadsTable"
@@ -390,41 +386,9 @@
   </div>  <!-- /.col -->
 </div> <!-- /.row -->
 
-
+@can('update', \App\Models\License::class)
-<!-- Modal -->
+  @include ('modals.upload-file', ['item_type' => 'license', 'item_id' => $license->id])
-<div class="modal fade" id="uploadFileModal" tabindex="-1" role="dialog" aria-labelledby="uploadFileModalLabel" aria-hidden="true">
+@endcan
-  <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="uploadFileModalLabel">Upload File</h4>
-      </div>
-      {{ Form::open([
-      'method' => 'POST',
-      'route' => ['upload/license', $license->id],
-      'files' => true, 'class' => 'form-horizontal' ]) }}
-      <input type="hidden" name="_token" value="{{ csrf_token() }}" />
-        <div class="modal-body">
-          <p>{{ trans('general.upload_filetypes_help', ['size' => \App\Helpers\Helper::file_upload_max_size_readable()]) }}</p>
-          <div class="form-group col-md-12">
-            <div class="input-group col-md-12">
-              <input class="col-md-12 form-control" type="text" name="notes" id="notes" placeholder="Notes">
-            </div>
-          </div>
-          <div class="form-group col-md-12">
-            <div class="input-group col-md-12">
-             {{ Form::file('licensefile[]', ['multiple' => 'multiple']) }}
-            </div>
-          </div>
-        </div> <!-- /.modal-body-->
-        <div class="modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">{{ trans('button.cancel') }}</button>
-          <button type="submit" class="btn btn-primary btn-sm">{{ trans('button.upload') }}</button>
-        </div>
-      {{ Form::close() }}
-    </div>
-  </div>
-</div>
 
 @stop
 

resources/views/modals/upload-file.blade.php

@@ -0,0 +1,46 @@
+<!-- Modal -->
+<div class="modal fade" id="uploadFileModal" tabindex="-1" role="dialog" aria-labelledby="uploadFileModalLabel" 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="uploadFileModalLabel">Upload File</h4>
+            </div>
+            {{ Form::open([
+            'method' => 'POST',
+            'route' => ['upload/'.$item_type, $item_id],
+            'files' => true,
+            'class' => 'form-horizontal' ]) }}
+            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
+            <div class="modal-body">
+
+                <div class="row">
+                    <div class="col-md-3">
+
+                        <label class="btn btn-default">
+                            {{ trans('button.select_file')  }}
+                            <input type="file" name="file[]" multiple="true" id="uploadFile" data-maxsize="{{ \App\Helpers\Helper::file_upload_max_size() }}" accept="image/*,.csv,.zip,.rar,.doc,.docx,.xls,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,text/plain,.pdf" style="display:none">
+                        </label>
+
+                    </div>
+                    <div class="col-md-9">
+                        <span id="upload-file-info"></span>
+                    </div>
+                    <div class="col-md-12">
+                        <p class="help-block" id="upload-file-status">{{ trans('general.upload_filetypes_help', ['size' => \App\Helpers\Helper::file_upload_max_size_readable()]) }}</p>
+                    </div>
+
+                    <div class="col-md-12">
+                        {{ Form::textarea('notes', Input::old('notes', Input::old('notes')), ['class' => 'form-control','placeholder' => 'Notes (Optional)', 'rows'=>3]) }}
+                    </div>
+                </div>
+
+            </div> <!-- /.modal-body-->
+            <div class="modal-footer">
+                <a href="#" class="pull-left" data-dismiss="modal">{{ trans('button.cancel') }}</a>
+                <button type="submit" class="btn btn-primary">{{ trans('button.upload') }}</button>
+            </div>
+            {{ Form::close() }}
+        </div>
+    </div>
+</div>