adding

app/Facades/FileManager.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Facades;
+
+use Illuminate\Support\Facades\Facade;
+
+class FileManager extends Facade
+{
+    protected static function getFacadeAccessor()
+    {
+        return 'fileManager';
+    }
+}

app/Filemanager/Filemanager.php → app/FileManager.php

@@ -1,18 +1,21 @@
 <?php
 
+namespace App;
+
 /**
  *
  *
  *
  */
 
-class Filemanager
+class FileManager
 {
     /**
      *
-     *  
+     *
      *  @param  [type] $path [description]
      *  @return [type]       [description]
+     *
      */
     public function find($path)
     {

app/Http/Controllers/Api/FileController.php

@@ -7,6 +7,11 @@ use Illuminate\Foundation\Bus\DispatchesJobs;
 use Illuminate\Foundation\Validation\ValidatesRequests;
 use Illuminate\Routing\Controller as BaseController;
 
+use Illuminate\Http\Request;
+
+use App\Models\Bucket;
+use App\Facades\FileManager;
+
 class FileController extends BaseController
 {
     use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
@@ -16,11 +21,16 @@ class FileController extends BaseController
      *  @return object
      *
      */
-    public function index($id)
+    public function index(Request $request, $id)
     {
+        $path = $request->get('path');
+
         // create bucket
         $bucket = Bucket::find($id);
 
+        // getting files
+        $files = FileManager::find($bucket->path.'/'.$path);
+
         return response()->json([
             'files' => $files
         ]);

app/Http/Controllers/BucketController.php

@@ -8,23 +8,12 @@ use Illuminate\Foundation\Validation\ValidatesRequests;
 use Illuminate\Routing\Controller as BaseController;
 
 use App\Models\Bucket;
+use App\Facades\FileManager;
 
 class BucketController extends BaseController
 {
     use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
 
-    private function formatBytes($size, $precision = 1)
-    {
-        if ($size === 0) {
-            return '0 bytes';
-        }
-
-        $base = log($size, 1024);
-        $suffixes = array('bytes', 'kB', 'MB', 'G', 'T');
-
-        return round(pow(1024, $base - floor($base)), $precision).' '.$suffixes[floor($base)];
-    }
-
     /**
      *
      *
@@ -37,11 +26,11 @@ class BucketController extends BaseController
         $bucket = Bucket::find($id);
 
         // getting files
-        $files = FileManager::find($bucket->path); 
+        $files = FileManager::find($bucket->path);
 
         return view('bucket.single', [
             'bucket' => $bucket,
-            'files'  => $results
+            'files'  => $files
         ]);
     }
 

app/Providers/AppServiceProvider.php

@@ -3,6 +3,7 @@
 namespace App\Providers;
 
 use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Facades\App;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -13,7 +14,9 @@ class AppServiceProvider extends ServiceProvider
      */
     public function register()
     {
-        //
+        App::bind('fileManager', function(){  //Keep in mind this "check" must be return from facades accessor
+            return new \App\FileManager;
+        });
     }
 
     /**

config/app.php

@@ -227,6 +227,9 @@ return [
         'Validator' => Illuminate\Support\Facades\Validator::class,
         'View' => Illuminate\Support\Facades\View::class,
 
+        // Own
+        'FileManager' =>  App\Facades\FileManager::class
+
     ],
 
 ];

public/spritemap.js

@@ -1,13 +1 @@
-(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["spritemap"],{
-
-/***/ null:
-/*!******************************!*\
-  !*** spritemap-dummy-module ***!
-  \******************************/
-/***/ (function(module, exports) {
-
-
-
-/***/ })
-
-}]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{null:function(n,w){}}]);

resources/js/components/filemanager/directory.riot

@@ -3,7 +3,7 @@
         <div class="file-table__column file-table__column--select" onchange={ (event) => { props.handleMarked(event, this) } }>
             <input type="checkbox" value="true" />
         </div>
-        <div class="file-table__column file-table__column--filename" onclick={ (event) => { props.handleClick(event, this) } }>
+        <div class="file-table__column file-table__column--filename" onclick={ (event) => { props.handleClick(event, props.file.filename) } }>
             <svg class="icon fill-primary mr-2" aria-hidden="true">
                 <use xlink:href="/symbol-defs.svg#icon-folder"></use>
             </svg>

resources/js/components/filemanager/filemanager.riot

@@ -2,17 +2,17 @@
     <div class="bucket-filemanager">
         <div class="file-table">
             <urban-filemanager-parent></urban-filemanager-parent>
-            <template each={ file in props.files }>
+            <template each={ file in state.files }>
                 <urban-filemanager-file
                     if={ file.is_file }
                     file={ file }
-                    handleClick={ handleDirectoryClick }
+                    handleClick={ handleFileClick }
                     handleMarked={ handleMarked }
                 ></urban-filemanager-file>
                 <urban-filemanager-directory
                     if={ !file.is_file }
                     file={ file }
-                    handleClick={ handleFileClick }
+                    handleClick={ handleDirectoryClick }
                     handleMarked={ handleMarked }
                 ></urban-filemanager-directory>
             </template>
@@ -32,6 +32,19 @@
 
     export default {
 
+        state: {
+            files: [
+
+            ],
+            path: [
+
+            ]
+        },
+
+        onBeforeMount(props, state) {
+            state.files = props.files
+        },
+
         handleFileClick() {
 
         },
@@ -42,12 +55,16 @@
          *
          */
         handleDirectoryClick(event, file) {
-            axios.get('/api/', {
+
+            this.state.path.push(file)
+
+            axios.get('/api/file/' + this.props.id, {
                 params: {
-                    filename: file.filename
+                    path: this.state.path.join('/')
                 }
             }).then((response) => {
-
+                this.state.files = response.data.files
+                this.update()
             })
         },
 

resources/views/bucket/single.blade.php

@@ -15,7 +15,7 @@
 @push('scripts')
     <script type="text/javascript" src="/js/bucket-single.js"></script>
     <script type="text/javascript" defer>
-        riot.mount('urban-filemanager', {!! json_encode([ 'files' => $files ]) !!});
+        riot.mount('urban-filemanager', {!! json_encode([ 'files' => $files, 'id' => $bucket->id ]) !!});
     </script>
 @endpush
 @endsection

routes/api.php

@@ -14,6 +14,13 @@ use Illuminate\Support\Facades\Route;
 |
 */
 
-Route::middleware('auth:api')->get('/user', function (Request $request) {
-    return $request->user();
+//Route::middleware('auth:api')->get('/user', function (Request $request) {
+//    return $request->user();
+//});
+
+//  pattern
+Route::pattern('uuid', '[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}');
+
+Route::prefix('file')->group(function() {
+    Route::get('{id}', 'App\Http\Controllers\Api\FileController@index')->name('api.file');
 });