Livewire the importer upload (move away from blueimp)

Signed-off-by: snipe <snipe@snipe.net>

app/Http/Livewire/Importer.php

@@ -7,7 +7,7 @@ use Livewire\Component;
 
 use App\Models\Import;
 use Storage;
-
+use Livewire\WithFileUploads;
 use Log;
 use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
 
@@ -15,17 +15,13 @@ use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
 class Importer extends Component
 {
     use AuthorizesRequests;
+    use WithFileUploads;
 
     public $files;
-
-    public $progress; //upload progress - '-1' means don't show
-    public $progress_message;
-    public $progress_bar_class;
-
     public $message; //status/error message?
     public $message_type; //success/error?
 
-    //originally from ImporterFile
+    // originally from ImporterFile
     public $import_errors; //
     public ?Import $activeFile = null;
     public $importTypes;
@@ -162,8 +158,6 @@ class Importer extends Component
     public function mount()
     {
         $this->authorize('import');
-        $this->progress = -1; // '-1' means 'don't show the progressbar'
-        $this->progress_bar_class = 'progress-bar-warning';
         $this->importTypes = [
             'asset' =>      trans('general.assets'),
             'accessory' =>  trans('general.accessories'),

package.json

@@ -30,7 +30,6 @@
         "admin-lte": "^2.4.18",
         "ajv": "^6.12.6",
         "alpinejs": "^3.10.5",
-        "blueimp-file-upload": "^9.34.0",
         "bootstrap": "^3.4.1",
         "bootstrap-colorpicker": "^2.5.3",
         "bootstrap-datepicker": "^1.10.0",

public/mix-manifest.json

@@ -18,7 +18,7 @@
     "/css/dist/skins/skin-green.css": "/css/dist/skins/skin-green.css?id=0a82a6ae6bb4e58fe62d162c4fb50397",
     "/css/dist/skins/skin-contrast.css": "/css/dist/skins/skin-contrast.css?id=da6c7997d9de2f8329142399f0ce50da",
     "/css/dist/skins/skin-red.css": "/css/dist/skins/skin-red.css?id=44bf834f2110504a793dadec132a5898",
-    "/css/dist/all.css": "/css/dist/all.css?id=391b67f142742a6b11a92b042c6d475c",
+    "/css/dist/all.css": "/css/dist/all.css?id=6bff00f1f704fe70e251c8cda4feb2ff",
     "/css/dist/signature-pad.css": "/css/dist/signature-pad.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/css/dist/signature-pad.min.css": "/css/dist/signature-pad.min.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/css/webfonts/fa-brands-400.ttf": "/css/webfonts/fa-brands-400.ttf?id=a656b2d865fe379d8851757e8e4001ef",
@@ -30,9 +30,9 @@
     "/css/webfonts/fa-v4compatibility.ttf": "/css/webfonts/fa-v4compatibility.ttf?id=70ad875b2378eb850254f01dec991ade",
     "/css/webfonts/fa-v4compatibility.woff2": "/css/webfonts/fa-v4compatibility.woff2?id=d36941873b661076f146b0221f13497d",
     "/css/dist/bootstrap-table.css": "/css/dist/bootstrap-table.css?id=2bd29fa7f9d666800c246a52ce708633",
-    "/js/build/vendor.js": "/js/build/vendor.js?id=917784d6fe54bcfe39656e0ded1b43e4",
+    "/js/build/vendor.js": "/js/build/vendor.js?id=20e512261bc4b8dda5a42190bee53783",
     "/js/dist/bootstrap-table.js": "/js/dist/bootstrap-table.js?id=1f678160a05960c3087fb8263168ff41",
-    "/js/dist/all.js": "/js/dist/all.js?id=1a069f231b257b1ad4e3751302705f97",
+    "/js/dist/all.js": "/js/dist/all.js?id=20a29464572c785e0b25aa6e5dfb5a66",
     "/js/dist/all-defer.js": "/js/dist/all-defer.js?id=07e52318da2cdf3171c4d88113f25fb6",
     "/css/dist/skins/skin-green.min.css": "/css/dist/skins/skin-green.min.css?id=0a82a6ae6bb4e58fe62d162c4fb50397",
     "/css/dist/skins/skin-green-dark.min.css": "/css/dist/skins/skin-green-dark.min.css?id=e36e83c2aa3c3afdbb8ebe2c0309e91d",

resources/views/layouts/default.blade.php

@@ -84,6 +84,14 @@
 
     @livewireStyles
 
+
+    <style>
+        #nprogress .bar {
+            background: red;
+            color: red;
+        }
+    </style>
+
 </head>
 
 @if (($snipeSettings) && ($snipeSettings->allow_user_skin==1) && Auth::check() && Auth::user()->present()->skin != '')

resources/views/livewire/importer.blade.php

@@ -2,6 +2,10 @@
     {{ trans('general.import') }}
     @parent
 @stop
+
+
+
+
 <div>
     {{-- Livewire requires a 'master' <div>, above --}}
         <div class="row">
@@ -65,39 +69,50 @@
             <div class="col-md-9">
                 <div class="box">
                     <div class="box-body">
-                        <div class="row">
 
-                            <div class="col-md-12">
+                        @if (!config('app.lock_passwords'))
+                             <div class="row">
+                                <div class="col-md-12">
+
+                                    <div  style="height: 35px;" x-data="{ isUploading: false, progress: 0 }"
+                                            x-on:livewire-upload-start="isUploading = true"
+                                            x-on:livewire-upload-finish="isUploading = false"
+                                            x-on:livewire-upload-error="isUploading = false"
+                                            x-on:livewire-upload-progress="progress = $event.detail.progress">
+
+                                            <!-- Progress Bar *Container* - not the bar itself-->
+                                            <div x-show="isUploading" class="col-md-10" style="height: 35px;" id="nprogress">
+                                                <progress max="100" x-bind:value="progress" class="col-md-12" style="min-height: 100%">
+                                                    YAY!
+                                                </progress>
+                                            </div>
+
+                                            <div class="col-md-2 col-sm-5 col-xs-12 text-right pull-right">
+
+                                                <!-- Form/File Input -->
+                                                <form wire:submit.prevent="saveUploadedFiles">
+                                                    <label class="btn btn-default col-md-12 col-xs-12" aria-hidden="true">
+                                                        <i class="fas fa-paperclip" aria-hidden="true"></i>
+                                                         {{ trans('button.select_file')  }}
+
+                                                        <input type="file" name="files[]" wire:model="files" class="js-uploadFile" id="uploadFile" data-maxsize="{{ Helper::file_upload_max_size() }}" accept="text/csv" style="display:none;" aria-label="files" aria-hidden="true" multiple>
+                                                    </label>
+
+                                                    @error('files')
+                                                        <span class="error">
+                                                            {{ $message }}
+                                                        </span>
+                                                    @enderror
+                                                </form>
+                                                <!-- End Form/File Input -->
 
-                                @if($progress != -1)
-                                    <div class="col-md-10 col-sm-5 col-xs-12" style="height: 35px;" id='progress-container'>
-                                        <div class="progress progress-striped-active" style="height: 100%;">
-                                            <div id='progress-bar' class="progress-bar {{ $progress_bar_class }}" role="progressbar" style="width: {{ $progress }}%">
-                                                <h4 id="progress-text">{!! $progress_message  !!}</h4>
                                             </div>
-                                        </div>
                                     </div>
-                                @endif
-
-                                <div class="col-md-2 col-sm-5 col-xs-12 text-right pull-right">
-
-                                    <!-- The fileinput-button span is used to style the file input field as button -->
-                                    @if (!config('app.lock_passwords'))
-                                        <span class="btn btn-primary fileinput-button">
-                                        <span>{{ trans('button.select_file') }}</span>
-                                         <!-- The file input field used as target for the file upload widget -->
-                                        <label for="files[]"><span class="sr-only">{{ trans('admin/importer/general.select_file') }}</span></label>
-                                        <input id="fileupload" type="file" name="files[]" data-url="{{ route('api.imports.index') }}" accept="text/csv" aria-label="files[]">
-                                        </span>
-                                    @endif
-
-                                </div>
-
+                               </div>
                             </div>
 
+                        @endif
 
-
-                        </div>
                         <div class="row">
                             <div class="col-md-12 table-responsive" style="padding-top: 30px;">
                                 <table data-pagination="true"
@@ -288,34 +303,6 @@
 @push('js')
     <script>
 
-        {{-- TODO: Maybe change this to the file upload thing that's baked-in to Livewire? --}}
-        $('#fileupload').fileupload({
-            dataType: 'json',
-            done: function(e, data) {
-                @this.progress_bar_class = 'progress-bar-success';
-                @this.progress_message = '<i class="fas fa-check faa-pulse animated"></i> {{ trans('general.notification_success') }}';
-                @this.progress = 100;
-            },
-            add: function(e, data) {
-                data.headers = {
-                    "X-Requested-With": 'XMLHttpRequest',
-                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
-                };
-                data.process().done( function () {data.submit();});
-                @this.progress = 0;
-                @this.clearMessage();
-            },
-            progress: function(e, data) {
-                @this.progress = parseInt((data.loaded / data.total * 100, 10));
-                @this.progress_message = '{{ trans('general.uploading') }}';
-            },
-            fail: function() {
-                @this.progress_bar_class = "progress-bar-danger";
-                @this.progress = 100;
-                @this.progress_message = '<i class="fas fa-exclamation-triangle faa-pulse animated"></i> {{ trans('general.upload_error') }}';
-            }
-        })
-
         // For the importFile part:
         $(function () {
 

webpack.mix.js

@@ -20,8 +20,6 @@ mix
       "./node_modules/jquery-ui-bundle/jquery-ui.css",
       "./node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.standalone.css",
       "./node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css",
-      "./node_modules/blueimp-file-upload/css/jquery.fileupload.css",
-      "./node_modules/blueimp-file-upload/css/jquery.fileupload-ui.css",
       "./node_modules/ekko-lightbox/dist/ekko-lightbox.css",
       "./node_modules/bootstrap-table/dist/bootstrap-table.css",
       "./public/css/build/app.css",
@@ -161,8 +159,6 @@ mix.combine(
     "./node_modules/tether/dist/js/tether.js",
     "./node_modules/jquery-ui-bundle/jquery-ui.js",
     "./node_modules/jquery-slimscroll/jquery.slimscroll.js",
-    "./node_modules/jquery.iframe-transport/jquery.iframe-transport.js",
-    "./node_modules/blueimp-file-upload/js/jquery.fileupload.js",
     "./node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js",
     "./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js",
     "./node_modules/ekko-lightbox/dist/ekko-lightbox.js",