frontend build

# Conflicts:
#	public/mix-manifest.json
#	resources/js/helpers.js
#	resources/js/i18n/lang/cn.json
#	resources/js/i18n/lang/en.json
#	resources/js/i18n/lang/sk.json
#	resources/js/store/modules/fileFunctions.js
#	resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue

.gitignore

@@ -1,3 +1,4 @@
+/app/Console/Commands/SetupDevelopmentEnvironment.php
 /node_modules
 /public/hot
 /public/storage
@@ -11,8 +12,10 @@
 .env.backup
 .phpunit.result.cache
 .phpstorm.meta.php
+.vscode/
 _ide_helper.php
 Homestead.json
 Homestead.yaml
 npm-debug.log
 yarn-error.log
+prettier.json

README.md

@@ -1,16 +1,6 @@
 ![logo](https://vuefilemanager.com/assets/images/vuefilemanager-horizontal-logo.svg)
 # Private Cloud Storage Build on Laravel & Vue.js
 
-## Supporting VueFileManager
-Hi, we are trying make the best experience with VueFileManager. There is a lot things to do, and a lot of features we can make. 
-
-But, it can't be done without you, development is more and more complicated and we have to hire new colleagues to help with it. There is couple way you can support us, and then, we support you with all great new features which can be. Thanks you for participating on this awesome software!
-
-- [Buy me a Coffe](https://www.buymeacoffee.com/pepe)
-- [One-time donation via PayPal](https://www.paypal.me/peterpapp)
-- [Become a backer or sponsor on Patreon](https://www.patreon.com/vuefilemanager)
-- [Purchase Licence on CodeCanyon](https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986)
-
 ## Contents
 
 - [Installation](#installation)
@@ -18,13 +8,14 @@ But, it can't be done without you, development is more and more complicated and
     - [Installation](#installation)
     - [PHP Configuration](#php-configuration)
     - [Chunk Upload](#chunk-upload)
+    - [Upgrade Guide](#upgrade-guide)
+        - [Common Instructions](#common-instructions)
+        - [Update from 1.7.10 to 1.7.11](#update-from-1710-to-1711)
+        - [Update from 1.7.8 to 1.7.9](#update-from-178-to-179)
+        - [Update from 1.7.x to 1.7.8](#update-from-17x-to-178)
+        - [Update from 1.6.x to 1.7](#update-from-16x-to-17)
     - [Nginx Configuration](#nginx-configuration)
     - [Apache Configuration](#apache-configuration)
-    - [Recover Failed Installation](#installation-failed)
-    - [Update Guide](#update-guide)
-        - [Instructions](#instructions)
-        - [Update from 1.7.x to 1.7.7](#update-from-17x-to-177)
-        - [Update from 1.6.x to 1.7](#update-from-16x-to-17)
 - [Payments](#payments)
     - [Get your active plans](#get-your-active-plans)
     - [Manage Failed Payments](#manage-failed-payments)
@@ -70,7 +61,7 @@ But, it can't be done without you, development is more and more complicated and
 ## Installation
 
 #### 1. Upload files on your server
-Copy project files to web root folder of your domain. It's mostly located in `html`, `www` or `public_html` folder name.
+Upload project files to web root folder of your domain. It's mostly located in `html`, `www` or `public_html` folder name.
 
 #### 2. Configure your web root folder
 Configure your web server's document root to point to the public directory of the files you previously uploaded. For example, if you've uploaded the files in `html` folder, your domain root directory should be changed to `html/project_files/public` folder or anything else where domain root is in project `/public` directory. 
@@ -104,6 +95,14 @@ At first step you have to verify your purchase code. **Subscription service with
 
 That was the hardest part of installation proces. Please follow instructions in every step of Setup Wizard to successfully install VueFileManager.
 
+#### 7. Set up Cron
+
+Add the following Cron entry to your server. Just update your php path (if it's different) and project path:
+```
+* * * * *  /usr/local/bin/php /path-to-your-project/artisan schedule:run >> /dev/null 2>&1
+
+```
+
 ## PHP Configuration
 There are several PHP settings good to know to setup before you try upload any file. Please set these values in your php.ini, we provide minimal setup for you. When you set `-1` then you set infinity limits.
 
@@ -116,10 +115,47 @@ max_execution_time = 3600
 ```
 
 ## Chunk & Multipart Upload
-VueFileManager in default supporting chunk upload. Default chunk upload size is `128MB`. If you wish change this default value, go to `/config/vuefilemanager.php` and change `chunk_size` attribute.
+VueFileManager in default supporting chunk upload. Default chunk upload size is `128MB`. If you wish change this default value, go to your `.env` and change `CHUNK_SIZE` attribute.
 
 When you use external storage, and upload large files, to prevent failing upload process make sure you have enough space in your application space and set higher `max_execution_time` in your php.ini to move your files to external storage. 
 
+## Upgrade Guide
+
+### Common Instructions
+`Don't forget create backup of your database before make any changes in your production application. If you serve your files in local storage driver pay attention and don't delete your /storage folder!`
+
+These instructions is applicable for all updates. Please follow this step:
+
+- Just rewrite all project files with new excluded `/.env` file and `/storage` folder. These items must be preserved!
+
+### Update from 1.7.10 to 1.7.11
+Before upload new files to your hosting, log in to VueFileManager as Admin. After uploading new files on your webhosting, visit this url `your-domain.com/service/upgrade-database` for upgrading your database.
+
+### Update from 1.7.8 to 1.7.9
+After rewrited old files with new files, log in as admin to the app and go to `your-domain.com/service/upgrade-database`. This will upgrade your database on the background.
+
+Add the following Cron entry to your server. Just update your php path (if it's different) and project path:
+```
+* * * * *  /usr/local/bin/php /path-to-your-project/artisan schedule:run >> /dev/null 2>&1
+
+```
+
+### Update from 1.7.x to 1.7.8
+For those who have installed VueFileManager via git or any other repository synchronization tool, dont't forget after updated code run `composer update` command to update your vendors.
+
+### Update from 1.6.x to 1.7
+
+For those, who purchase extended licence, place these lines at the end of your `/.env` file:
+```
+CASHIER_LOGGER=stack
+CASHIER_CURRENCY=
+STRIPE_KEY=
+STRIPE_SECRET=
+STRIPE_WEBHOOK_SECRET=
+CASHIER_PAYMENT_NOTIFICATION=App\Notifications\ConfirmPayment
+```
+
+Then go to https://your-domain.com/upgrade and follow the setup wizard instructions.
 
 ## Nginx Configuration
 If you running VueFileManager undex Nginx, don't forget set this value in your `nginx.conf` file:
@@ -182,44 +218,6 @@ Make sure you have enabled mod_rewrite. There is an example config for running V
 </VirtualHost>
 ```
 
-## Installation Failed
-
-What to do when installation fail and you can't continue, at first, try to fix issue why installation fail. Probably missing PHP extension or permissions wasn't set correctly.
-
-At worst scenarios, to reset Setup Wizard, delete all tables in your previously created database, delete content of `/storage/framework/cache`. Then replace content in your `.env` file from `.env.example` file. 
-
-After these steps, installation will be reseted.
-
-## Update Guide
-
-### Instructions
-`Don't forget create backup of your database and storage before make any changes in your production application.`
-
-`If you serve your files in local storage driver pay attention and don't delete your /storage folder`
-
-Follow this steps:
-
-- Make a backup of the .env config file located on your server.
-- Upload and replace all the files on your server with what's inside the app folder.
-- Restore your `.env` config file on your server.
-
-## Update from 1.7.x to 1.7.7
-If you are upgrading app to 1.7.7 from 1.7.x, make sure you have copied new /vendor folder or if you are using terminal or git, run `composer update` command to update your vendors.
-
-## Update from 1.6.x to 1.7
-
-For those, who purchase extended licence, place these lines at the end of your `/.env` file:
-```
-CASHIER_LOGGER=stack
-CASHIER_CURRENCY=
-STRIPE_KEY=
-STRIPE_SECRET=
-STRIPE_WEBHOOK_SECRET=
-CASHIER_PAYMENT_NOTIFICATION=App\Notifications\ConfirmPayment
-```
-
-Then go to https://your-domain.com/upgrade and follow the setup wizard instructions.
-
 # Payments
 VueFileManager is packed with **Stripe** payment options. To configure Stripe, you will be asked in Setup Wizard to set up. Or, if you skip this installation process, you will find stripe set up in you admin `Dashboard / Settings / Payments`.
 
@@ -359,6 +357,14 @@ The following support channels are available at your fingertips:
 - [CodeCanyon support message](https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986/support)
 - [GitHub repository](https://vuefilemanager.com/github-access)
 
+## Supporting VueFileManager
+Hi, we are trying make the best experience with VueFileManager. There is a lot things to do, and a lot of features we can make. 
+
+But, it can't be done without you, development is more and more complicated and we have to hire new colleagues to help with it. There is couple way you can support us, and then, we support you with all great new features which can be. Thanks you for participating on this awesome software!
+
+- [Buy me a Coffe](https://www.buymeacoffee.com/pepe)
+- [One-time donation via PayPal](https://www.paypal.me/peterpapp)
+
 ## Security Vulnerabilities
 
 If you discover a security vulnerability within this project, please send an e-mail to [peterpapp@makingcg.com](peterpapp@makingcg.com). All security vulnerabilities will be promptly addressed.

app/Console/Kernel.php

@@ -3,9 +3,9 @@
 namespace App\Console;
 
 use App\Console\Commands\Deploy;
-use App\Console\Commands\SetupDevEnvironment;
-use App\Console\Commands\SetupProductionEnvironment;
-use App\Console\Commands\UpgradeApp;
+//use App\Console\Commands\SetupDevelopmentEnvironment;
+use App\Share;
+use Carbon\Carbon;
 use Illuminate\Console\Scheduling\Schedule;
 use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
 
@@ -18,18 +18,20 @@ class Kernel extends ConsoleKernel
      */
     protected $commands = [
         Deploy::class,
+        //SetupDevelopmentEnvironment::class,
     ];
 
     /**
      * Define the application's command schedule.
      *
-     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
+     * @param \Illuminate\Console\Scheduling\Schedule $schedule
      * @return void
      */
     protected function schedule(Schedule $schedule)
     {
-        // $schedule->command('inspire')
-        //          ->hourly();
+        $schedule->call(function () {
+            $this->delete_expired_shared_links();
+        })->everyMinute();
     }
 
     /**
@@ -39,8 +41,28 @@ class Kernel extends ConsoleKernel
      */
     protected function commands()
     {
-        $this->load(__DIR__.'/Commands');
+        $this->load(__DIR__ . '/Commands');
 
         require base_path('routes/console.php');
     }
+
+    /**
+     * Get and delete expired shared links
+     */
+    protected function delete_expired_shared_links(): void
+    {
+        // Get all shares with expiration time
+        $shares = Share::whereNotNull('expire_in')->get();
+
+        $shares->each(function ($share) {
+
+            // Get dates
+            $created_at = Carbon::parse($share->created_at);
+
+            // If time was over, then delete share record
+            if ($created_at->diffInHours(Carbon::now()) >= $share->expire_in) {
+                $share->delete();
+            }
+        });
+    }
 }

app/FileManagerFile.php

@@ -67,6 +67,10 @@ class FileManagerFile extends Model
         'file_url'
     ];
 
+    protected $casts = [
+        'metadata' => 'array',
+    ];
+
     /**
      * Set routes with public access
      *
@@ -148,7 +152,9 @@ class FileManagerFile extends Model
         // Get file from external storage
         if (is_storage_driver(['s3', 'spaces', 'wasabi', 'backblaze'])) {
 
-            $file_pretty_name = get_pretty_name($this->attributes['basename'], $this->attributes['name'], $this->attributes['mimetype']);
+            $file_pretty_name = is_storage_driver('backblaze')
+                ? Str::snake(mb_strtolower($this->attributes['name']))
+                : get_pretty_name($this->attributes['basename'], $this->attributes['name'], $this->attributes['mimetype']);
 
             $header = [
                 "ResponseAcceptRanges"       => "bytes",

app/Http/Controllers/AppFunctionsController.php

@@ -157,7 +157,7 @@ class AppFunctionsController extends Controller
 
         // Return view
         return view("og-view")
-            ->with('settings', $settings)
+            ->with('settings', json_decode($settings->pluck('value', 'name')->toJson()))
             ->with('metadata', $metadata);
     }
 

app/Http/Controllers/FileAccessController.php

@@ -101,7 +101,7 @@ class FileAccessController extends Controller
         $shared = get_shared($token);
 
         // Abort if shared is protected
-        if ((int) $shared->protected) {
+        if ((int)$shared->protected) {
             abort(403, "Sorry, you don't have permission");
         }
 
@@ -154,7 +154,7 @@ class FileAccessController extends Controller
         $shared = get_shared($token);
 
         // Abort if thumbnail is protected
-        if ((int) $shared->protected) {
+        if ((int)$shared->protected) {
             abort(403, "Sorry, you don't have permission");
         }
 

app/Http/Controllers/FileBrowser/BrowseController.php

@@ -69,12 +69,12 @@ class BrowseController extends Controller
             ->pluck('item_id');
 
         // Get folders and files
-        $folders = FileManagerFolder::with(['parent', 'shared:token,id,item_id,permission,protected'])
+        $folders = FileManagerFolder::with(['parent', 'shared:token,id,item_id,permission,protected,expire_in'])
             ->where('user_id', $user_id)
             ->whereIn('unique_id', $folder_ids)
             ->get();
 
-        $files = FileManagerFile::with(['parent', 'shared:token,id,item_id,permission,protected'])
+        $files = FileManagerFile::with(['parent', 'shared:token,id,item_id,permission,protected,expire_in'])
             ->where('user_id', $user_id)
             ->whereIn('unique_id', $file_ids)
             ->get();
@@ -145,13 +145,13 @@ class BrowseController extends Controller
         }
 
         // Get folders and files
-        $folders = FileManagerFolder::with(['parent', 'shared:token,id,item_id,permission,protected'])
+        $folders = FileManagerFolder::with(['parent', 'shared:token,id,item_id,permission,protected,expire_in'])
             ->where('user_id', $user_id)
             ->where('parent_id', $unique_id)
             ->orderBy('created_at', 'DESC')
             ->get();
 
-        $files = FileManagerFile::with(['parent', 'shared:token,id,item_id,permission,protected'])
+        $files = FileManagerFile::with(['parent', 'shared:token,id,item_id,permission,protected,expire_in'])
             ->where('user_id', $user_id)
             ->where('folder_id', $unique_id)
             ->orderBy('created_at', 'DESC')
@@ -217,7 +217,7 @@ class BrowseController extends Controller
         // Get user id
         $user_id = Auth::id();
 
-        return FileManagerFile::with(['shared:token,id,item_id,permission,protected'])
+        return FileManagerFile::with(['shared:token,id,item_id,permission,protected,expire_in'])
             ->where('user_id', $user_id)
             ->where('unique_id', $unique_id)
             ->firstOrFail();

app/Http/Controllers/FileFunctions/ShareController.php

@@ -51,6 +51,7 @@ class ShareController extends Controller
             'protected'  => $request->isPassword,
             'permission' => $request->permission,
             'item_id'    => $request->unique_id,
+            'expire_in'  => $request->expiration,
             'user_id'    => Auth::id(),
             'token'      => $token,
         ];
@@ -77,6 +78,7 @@ class ShareController extends Controller
         $shared->update([
             'permission' => $request->permission,
             'protected'  => $request->protected,
+            'expire_in'  => $request->expiration,
             'password'   => $request->password ? Hash::make($request->password) : $shared->password,
         ]);
 

app/Http/Controllers/General/UpgradeAppController.php

@@ -7,6 +7,7 @@ use App\Page;
 use App\Setting;
 use Artisan;
 use Illuminate\Http\Request;
+use Schema;
 
 class UpgradeAppController extends Controller
 {
@@ -123,4 +124,72 @@ class UpgradeAppController extends Controller
 
         return response('Done', 200);
     }
+
+    /**
+     *  Start maintenance mode
+     */
+    public function up() {
+        $command = Artisan::call('up');
+
+        if ($command === 0) {
+            echo 'System is in production mode';
+        }
+    }
+
+    /**
+     *  End maintenance mode
+     */
+    public function down() {
+        $command = Artisan::call('down');
+
+        if ($command === 0) {
+            echo 'System is in maintenance mode';
+        }
+    }
+
+    /**
+     *  Upgrade database
+     */
+    public function upgrade_database()
+    {
+        /*
+         * Upgrade expire_in in shares table
+         *
+         * @since v1.7.9
+        */
+        if (! Schema::hasColumn('shares', 'expire_in')) {
+
+            $command = Artisan::call('migrate', [
+                '--force' => true
+            ]);
+
+            if ($command === 0) {
+                echo 'Operation was successful.';
+            }
+
+            if ($command === 1) {
+                echo 'Operation failed.';
+            }
+        }
+
+        /*
+         * Upgrade expire_in in shares table
+         *
+         * @since v1.7.11
+        */
+        if (! Schema::hasColumn('file_manager_files', 'metadata')) {
+
+            $command = Artisan::call('migrate', [
+                '--force' => true
+            ]);
+
+            if ($command === 0) {
+                echo 'Operation was successful.';
+            }
+
+            if ($command === 1) {
+                echo 'Operation failed.';
+            }
+        }
+    }
 }

app/Http/Controllers/Sharing/FileSharingController.php

@@ -32,7 +32,8 @@ class FileSharingController extends Controller
     public function index($token)
     {
         // Get shared token
-        $shared = get_shared($token);
+        $shared = Share::where(\DB::raw('BINARY `token`'), $token)
+            ->first();
 
         if (! $shared) {
             return view("index");

app/Http/Helpers/helpers.php

@@ -355,6 +355,25 @@ function format_gigabytes($gigabytes)
     }
 }
 
+/**
+ * Format string to formated megabytes string
+ *
+ * @param $megabytes
+ * @return string
+ */
+function format_megabytes($megabytes)
+{
+    if ($megabytes >= 1000) {
+        return $megabytes / 1000 . 'GB';
+    }
+
+    if ($megabytes >= 1000000) {
+        return $megabytes / 1000000 . 'TB';
+    }
+
+    return $megabytes . 'MB';
+}
+
 /**
  * Convert megabytes to bytes
  *
@@ -528,4 +547,17 @@ function get_pretty_name($basename, $name, $mimetype)
     }
 
     return $name . '.' . $mimetype;
-}
+}
+
+/**
+ * Read exif data from jpeg image file
+ *
+ * @param $file
+ * @return array
+ */
+function get_image_meta_data($file)
+{
+    if(get_file_type_from_mimetype($file->getMimeType()) === 'jpeg') {
+       return  exif_read_data($file);
+    }
+}

app/Http/Middleware/CheckForMaintenanceMode.php

@@ -12,6 +12,8 @@ class CheckForMaintenanceMode extends Middleware
      * @var array
      */
     protected $except = [
-        //
+        '/service/upgrade-database',
+        '/service/down',
+        '/service/up',
     ];
 }

app/Http/Requests/FileFunctions/UploadRequest.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Requests\FileFunctions;
 
+use App\Rules\MimetypeBlacklistValidation;
 use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Support\Facades\Auth;
 
@@ -26,7 +27,7 @@ class UploadRequest extends FormRequest
     {
         return [
             'parent_id' => 'required|integer',
-            'file'      => 'required|file',
+            'file'      => ['required','file' ,  new MimetypeBlacklistValidation]
         ];
     }
 }

app/Http/Requests/Share/CreateShareRequest.php

@@ -28,6 +28,7 @@ class CreateShareRequest extends FormRequest
             'isPassword' => 'required|boolean',
             'unique_id'  => 'required|integer',
             'type'       => 'required|string',
+            'expiration' => 'integer|nullable',
             'permission' => 'string',
             'password'   => 'string',
         ];

app/Http/Requests/Share/UpdateShareRequest.php

@@ -27,6 +27,7 @@ class UpdateShareRequest extends FormRequest
         return [
             'protected'  => 'required|boolean',
             'permission' => 'nullable|string',
+            'expiration' => 'integer|nullable',
             'password'   => 'string',
         ];
     }

app/Http/Requests/Subscription/StoreUpgradeAccountRequest.php

@@ -46,7 +46,7 @@ class StoreUpgradeAccountRequest extends FormRequest
             'plan.data.attributes.capacity'           => 'required|digits_between:1,9',
             'plan.data.attributes.capacity_formatted' => 'required|string',
             'plan.data.attributes.currency'           => 'required|string',
-            'plan.data.attributes.description'        => 'required|string',
+            'plan.data.attributes.description'        => 'sometimes|string|nullable',
             'plan.data.attributes.name'               => 'required|string',
             'plan.data.attributes.price'              => 'required|string',
             'plan.data.id'                            => 'required|string',

app/Http/Resources/ShareResource.php

@@ -22,6 +22,7 @@ class ShareResource extends JsonResource
                     'permission' => $this->permission,
                     'protected'  => (int) $this->protected,
                     'item_id'    => (int) $this->item_id,
+                    'expire_in'  => (int) $this->expire_in,
                     'token'      => $this->token,
                     'link'       => $this->link,
                     'type'       => $this->type,

app/Http/Tools/Editor.php

@@ -251,12 +251,26 @@ class Editor
         $disk_file_name = basename('chunks/' . $file->getClientOriginalName(), '.part');
         $temp_filename = $file->getClientOriginalName();
 
-        // Generate file
-        File::append(config('filesystems.disks.local.root') . '/chunks/' . $temp_filename, $file->get());
+        // File Path
+        $file_path = config('filesystems.disks.local.root') . '/chunks/' . $temp_filename;\
 
+        // Generate file
+        File::append($file_path, $file->get());
+
+        // Size of file
+        $file_size = File::size($file_path);
+
+        // Size of limit
+        $limit = get_setting('upload_limit');
+
+        // File size handling
+        if( $limit && $file_size > format_bytes($limit)) abort(413);
+    
         // If last then process file
         if ($request->boolean('is_last')) {
 
+            $metadata = get_image_meta_data($file);
+
             $disk_local = Storage::disk('local');
             $unique_id = get_unique_id();
 
@@ -292,6 +306,7 @@ class Editor
                 'mimetype'   => get_file_type_from_mimetype($file_mimetype),
                 'type'       => get_file_type($file_mimetype),
                 'folder_id'  => $request->parent_id,
+                'metadata'   => $metadata,
                 'name'       => $user_file_name,
                 'unique_id'  => $unique_id,
                 'basename'   => $disk_file_name,

app/Rules/MimetypeBlacklistValidation.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Rules;
+use Illuminate\Contracts\Validation\Rule;
+
+class MimetypeBlacklistValidation implements Rule
+{
+    /**
+     * Create a new rule instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Determine if the validation rule passes.
+     *
+     * @param  string  $attribute
+     * @param  mixed  $value
+     * @return bool
+     */
+    public function passes($attribute, $value)
+    {
+        $mimetype_blacklist = explode(',' ,get_setting('mimetypes_blacklist'));
+        $file_mimetype = explode('/' ,$value->getMimeType());
+        
+        return !array_intersect($file_mimetype , $mimetype_blacklist);
+    }
+
+    /**
+     * Get the validation error message.
+     *
+     * @return string
+     */
+    public function message()
+    {
+       abort (415,'Type of this mime type is not allowed.');
+    }
+}

app/User.php

@@ -194,7 +194,7 @@ class User extends Authenticatable
      */
     public function getFolderTreeAttribute()
     {
-        return FileManagerFolder::with(['folders.shared', 'shared:token,id,item_id,permission,protected'])
+        return FileManagerFolder::with(['folders.shared', 'shared:token,id,item_id,permission,protected,expire_in'])
             ->where('parent_id', 0)
             ->where('user_id', $this->id)
             ->get();
@@ -259,7 +259,7 @@ class User extends Authenticatable
      */
     public function favourite_folders()
     {
-        return $this->belongsToMany(FileManagerFolder::class, 'favourite_folder', 'user_id', 'folder_unique_id', 'id', 'unique_id')->with('shared:token,id,item_id,permission,protected');
+        return $this->belongsToMany(FileManagerFolder::class, 'favourite_folder', 'user_id', 'folder_unique_id', 'id', 'unique_id')->with('shared:token,id,item_id,permission,protected,expire_in');
     }
 
     /**

config/vuefilemanager.php

@@ -2,8 +2,8 @@
 
 return [
 
-    'version'    => '1.7.8',
+    'version'    => '1.7.12',
 
     // Define size of chunk uploaded by MB. E.g. integer 128 means chunk size will be 128MB.
     'chunk_size' => env('CHUNK_SIZE', '128'),
-];
+];

database/migrations/2020_08_25_143449_add_expiration_at_attribute_to_shares_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddExpirationAtAttributeToSharesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('shares', function (Blueprint $table) {
+            $table->integer('expire_in')->after('password')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('shares', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2020_09_04_085714_add_exif_data_to_file_manager_files_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddExifDataToFileManagerFilesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('file_manager_files', function (Blueprint $table) {
+            $table->longText('metadata')->after('type')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('file_manager_files', function (Blueprint $table) {
+            //
+        });
+    }
+}

package.json

@@ -24,7 +24,7 @@
         "lodash": "^4.17.20",
         "node-sass": "^4.14.1",
         "vee-validate": "^3.3.9",
-        "vue": "^2.6.10",
+        "vue": "^2.6.11",
         "vue-feather-icons": "^5.1.0",
         "vue-i18n": "^8.21.0",
         "vue-router": "^3.4.3",

public/.htaccess

@@ -8,6 +8,7 @@
     AddType video/ogg .ogv
     AddType video/mp4 .mp4
     AddType video/webm .webm
+
     <ifModule mod_headers.c>
         Header set Connection keep-alive
     </ifModule>

public/chunks/setup-wizard.js

@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{584:function(e,t,r){"use strict";r.r(t);var n=r(7);function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var c={name:"SetupWizard",computed:function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},Object(n.b)(["config"])),mounted:function(){"setup-done"!==this.config.installation&&"quiet-update"!==this.config.installation||this.$router.push({name:"SignIn"})}},u=r(0),a=Object(u.a)(c,(function(){var e=this.$createElement;return(this._self._c||e)("router-view")}),[],!1,null,null,null);t.default=a.exports}}]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{oBQg:function(e,t,r){"use strict";r.r(t);var n=r("L2JU");function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var c={name:"SetupWizard",computed:function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},Object(n.b)(["config"])),mounted:function(){"setup-done"!==this.config.installation&&"quiet-update"!==this.config.installation||this.$router.push({name:"SignIn"})}},u=r("KHd+"),a=Object(u.a)(c,(function(){var e=this.$createElement;return(this._self._c||e)("router-view")}),[],!1,null,null,null);t.default=a.exports}}]);

public/js/main.js.LICENSE.txt

@@ -5,7 +5,7 @@
  */
 
 /*!
- * vue-i18n v8.18.2 
+ * vue-i18n v8.21.0 
  * (c) 2020 kazuya kawaguchi
  * Released under the MIT License.
  */
@@ -17,7 +17,7 @@
  */
 
 /**
-  * vee-validate v3.3.7
+  * vee-validate v3.3.9
   * (c) 2020 Abdelrahman Awad
   * @license MIT
   */

public/mix-manifest.json

@@ -1,66 +1,66 @@
 {
-    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js",
-    "/js/main.js": "/js/main.js",
-    "/css/app.css": "/css/app.css",
-    "/chunks/admin.js": "/chunks/admin.js",
-    "/chunks/admin-account.js": "/chunks/admin-account.js",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js",
-    "/chunks/app-billings.js": "/chunks/app-billings.js",
-    "/chunks/app-email.js": "/chunks/app-email.js",
-    "/chunks/app-index.js": "/chunks/app-index.js",
-    "/chunks/app-others.js": "/chunks/app-others.js",
-    "/chunks/app-payments.js": "/chunks/app-payments.js",
-    "/chunks/app-settings.js": "/chunks/app-settings.js",
-    "/chunks/app-setup.js": "/chunks/app-setup.js",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js",
-    "/chunks/contact-us.js": "/chunks/contact-us.js",
-    "/chunks/create-new-password.js": "/chunks/create-new-password.js",
-    "/chunks/dashboard.js": "/chunks/dashboard.js",
-    "/chunks/database.js": "/chunks/database.js",
-    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js",
-    "/chunks/files.js": "/chunks/files.js",
-    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js",
-    "/chunks/invoices.js": "/chunks/invoices.js",
-    "/chunks/landing-page.js": "/chunks/landing-page.js",
-    "/chunks/not-found-shared.js": "/chunks/not-found-shared.js",
-    "/chunks/page-edit.js": "/chunks/page-edit.js",
-    "/chunks/pages.js": "/chunks/pages.js",
-    "/chunks/plan.js": "/chunks/plan.js",
-    "/chunks/plan-create.js": "/chunks/plan-create.js",
-    "/chunks/plan-delete.js": "/chunks/plan-delete.js",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js",
-    "/chunks/plans.js": "/chunks/plans.js",
-    "/chunks/profile.js": "/chunks/profile.js",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js",
-    "/chunks/settings.js": "/chunks/settings.js",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js",
-    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js",
-    "/chunks/settings-password.js": "/chunks/settings-password.js",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js",
-    "/chunks/settings-storage.js": "/chunks/settings-storage.js",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js",
-    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js",
-    "/chunks/shared-files.js": "/chunks/shared-files.js",
-    "/chunks/shared-page.js": "/chunks/shared-page.js",
-    "/chunks/sign-in.js": "/chunks/sign-in.js",
-    "/chunks/sign-up.js": "/chunks/sign-up.js",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js",
-    "/chunks/subscription-service.js": "/chunks/subscription-service.js",
-    "/chunks/trash.js": "/chunks/trash.js",
-    "/chunks/upgrade.js": "/chunks/upgrade.js",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js",
-    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js",
-    "/chunks/user.js": "/chunks/user.js",
-    "/chunks/user-create.js": "/chunks/user-create.js",
-    "/chunks/user-delete.js": "/chunks/user-delete.js",
-    "/chunks/user-detail.js": "/chunks/user-detail.js",
-    "/chunks/user-invoices.js": "/chunks/user-invoices.js",
-    "/chunks/user-password.js": "/chunks/user-password.js",
-    "/chunks/user-storage.js": "/chunks/user-storage.js",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js",
-    "/chunks/users.js": "/chunks/users.js"
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=332a46c505c3e4f8a739",
+    "/js/main.js": "/js/main.js?id=768d27992eafd9795e69",
+    "/css/app.css": "/css/app.css?id=dbf49843b327d3936c06",
+    "/chunks/admin.js": "/chunks/admin.js?id=bd7dce5ddfbb8ebeb7a8",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=ed4d3b5d0e9da3b70862",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=046065efc4a67ad8587f",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=0d1e25be91f67ffab63f",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=b7a3bca09764ae780d6c",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=e1544ff1341ca6416bab",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=1396078f7c5e8fc929e4",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=a1a84878ec6f645946f5",
+    "/chunks/app-settings.js": "/chunks/app-settings.js?id=424c67c7d7f6b9109a99",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=3ac1935129bff281257d",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=e6434e402adec1cf8ba1",
+    "/chunks/contact-us.js": "/chunks/contact-us.js?id=fa10e7582a311ab12c1f",
+    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=b33f6ac5e174f51a443b",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=a61fe2622dca51ca1396",
+    "/chunks/database.js": "/chunks/database.js?id=ac688c888342c5cf4c53",
+    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=08a0c2de8f93e0222600",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=fb825f5ace1deeac3509",
+    "/chunks/files.js": "/chunks/files.js?id=bc21124b8956b99ab01f",
+    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=9a8acda895c0c40ea30b",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=59450c310fb5af95b9a1",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=6dd9f68419f741465844",
+    "/chunks/landing-page.js": "/chunks/landing-page.js?id=4dbec1937d1f5b71d17d",
+    "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=af1fa088daae3fe7a3a8",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=30e6227554f2f26e0419",
+    "/chunks/pages.js": "/chunks/pages.js?id=8dc613c3a82637e99dc2",
+    "/chunks/plan.js": "/chunks/plan.js?id=6de54ce130dd2766f4c6",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=efaeb3ebdf30ba62c613",
+    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=93b6dfdf61caa4335a7c",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=d1457670c217e13e97f9",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=fba30dc476ddcd0c4b22",
+    "/chunks/plans.js": "/chunks/plans.js?id=f03834c110c677b6db0d",
+    "/chunks/profile.js": "/chunks/profile.js?id=23e34e6d7d73abcf317d",
+    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=f74384a387ce82e7751f",
+    "/chunks/settings.js": "/chunks/settings.js?id=a3b1c88c6b6af9b6308c",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=543b594932039ef2b061",
+    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=b26452dbf79dcc6e2787",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=919f57ae52204ea5ee54",
+    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=4cb65919f0627c8f9db1",
+    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=1a45b3cee17b17a7598d",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=34e34dcb29cb84ab53bf",
+    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=47090233afc7b0cdf855",
+    "/chunks/shared-files.js": "/chunks/shared-files.js?id=bb6943a620f520324003",
+    "/chunks/shared-page.js": "/chunks/shared-page.js?id=2414f43c0129d239b907",
+    "/chunks/sign-in.js": "/chunks/sign-in.js?id=a0e2b7e58484e778848b",
+    "/chunks/sign-up.js": "/chunks/sign-up.js?id=774e43bc25ae4e3893a2",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=e3639ebc187c3e568a20",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=24f8053a0d89684699ad",
+    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=e0c770e988a664a18f76",
+    "/chunks/trash.js": "/chunks/trash.js?id=1ee3dde0c9d1a700c7f2",
+    "/chunks/upgrade.js": "/chunks/upgrade.js?id=77386550d2ac446e4ac1",
+    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=8bc53a77111144319a0d",
+    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=06718f96dbec2820c6fc",
+    "/chunks/user.js": "/chunks/user.js?id=7af75cb8c2c899fec9d5",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=8483ffcbd12c68856186",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=406c10bd53f7d33d85a7",
+    "/chunks/user-detail.js": "/chunks/user-detail.js?id=32f97c1bd9d9137ba5f0",
+    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=cfef95004b9346be2c3e",
+    "/chunks/user-password.js": "/chunks/user-password.js?id=227291c743ecc58681a5",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=2592e0d43a710c5b197f",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=93f76f47f1f8c8c9425d",
+    "/chunks/users.js": "/chunks/users.js?id=960ae7b595d7b5d9394b"
 }

public/phpinfo.php

@@ -0,0 +1,6 @@
+<?php
+
+// Show all information, defaults to INFO_ALL
+phpinfo();
+
+?>

resources/js/App.vue

@@ -6,6 +6,9 @@
 
         <div id="application-wrapper" v-if="! isGuestLayout">
 
+            <!-- Full File Preview -->
+            <FileFullPreview />
+
             <!--Mobile Navigation-->
             <MobileNavigation />
 
@@ -45,6 +48,7 @@
 
 <script>
     import ToastrWrapper from '@/components/Others/Notifications/ToastrWrapper'
+    import FileFullPreview from '@/components/FilesView/FileFullPreview'
     import MobileNavigation from '@/components/Others/MobileNavigation'
     import CookieDisclaimer from '@/components/Others/CookieDisclaimer'
     import MobileMenu from '@/components/FilesView/MobileMenu'
@@ -64,6 +68,7 @@
         components: {
             MobileNavigation,
             CookieDisclaimer,
+            FileFullPreview,
             ToastrWrapper,
             ShareCreate,
             MobileMenu,
@@ -80,27 +85,27 @@
             ]),
             isGuestLayout() {
                 return (includes([
-                    'InstallationDisclaimer',
-                    'SubscriptionService',
-                    'StripeCredentials',
-                    'SubscriptionPlans',
-                    'ForgottenPassword',
-                    'CreateNewPassword',
-                    'EnvironmentSetup',
-                    'VerifyByPassword',
-                    'SaaSLandingPage',
-                    'BillingsDetail',
-                    'NotFoundShared',
-                    'AdminAccount',
-                    'PurchaseCode',
-                    'DynamicPage',
-                    'SharedPage',
-                    'ContactUs',
-                    'AppSetup',
-                    'Database',
-                    'Upgrade',
-                    'SignIn',
-                    'SignUp',
+                        'InstallationDisclaimer',
+                        'SubscriptionService',
+                        'StripeCredentials',
+                        'SubscriptionPlans',
+                        'ForgottenPassword',
+                        'CreateNewPassword',
+                        'EnvironmentSetup',
+                        'VerifyByPassword',
+                        'SaaSLandingPage',
+                        'BillingsDetail',
+                        'NotFoundShared',
+                        'AdminAccount',
+                        'PurchaseCode',
+                        'DynamicPage',
+                        'SharedPage',
+                        'ContactUs',
+                        'AppSetup',
+                        'Database',
+                        'Upgrade',
+                        'SignIn',
+                        'SignUp',
                     ], this.$route.name)
                 )
             }
@@ -147,7 +152,7 @@
 </script>
 
 <style lang="scss">
-    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
 

resources/js/components/FilesView/ContextMenu.vue

@@ -1,13 +1,53 @@
 <template>
-    <div
-            :style="{ top: positionY + 'px', left: positionX + 'px' }"
-            @click="closeAndResetContextMenu"
-            class="contextmenu"
-            v-show="isVisible"
-            ref="contextmenu"
-    >
+    <div :style="{ top: positionY + 'px', left: positionX + 'px' }" @click="closeAndResetContextMenu" class="contextmenu" v-show="isVisible || showFromPreview" ref="contextmenu" :class="{ 'filePreviewFixed' : showFromPreview}">
+        <!-- ContextMenu for File Preview -->
+        <div class="menu-options" id="menu-list" v-if="showFromPreview">
+            <ul class="menu-option-group">
+                <li class="menu-option" @click="moveItem">
+                    <div class="icon">
+                        <corner-down-right-icon size="17"></corner-down-right-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.move') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="shareItem">
+                    <div class="icon">
+                        <link-icon size="17"></link-icon>
+                    </div>
+                    <div class="text-label">
+                        {{
+                            item.shared
+                                ? $t('context_menu.share_edit')
+                                : $t('context_menu.share')
+                        }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="deleteItem">
+                    <div class="icon">
+                        <trash-2-icon size="17"></trash-2-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.delete') }}
+                    </div>
+                </li>
+            </ul>
+            <ul class="menu-option-group">
+                <li class="menu-option" @click="downloadItem" v-if="!isFolder">
+                    <div class="icon">
+                        <download-cloud-icon size="17"></download-cloud-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.download') }}
+                    </div>
+                </li>
+            </ul>
+        </div>
+
         <!--ContextMenu for trash location-->
-        <div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" id="menu-list" class="menu-options">
+        <div v-if="
+          $isThisLocation(['trash', 'trash-root']) && $checkPermission('master') && !showFromPreview
+        " id="menu-list" class="menu-options">
             <ul class="menu-option-group">
                 <li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item">
                     <div class="icon">
@@ -43,7 +83,7 @@
                         {{ $t('context_menu.detail') }}
                     </div>
                 </li>
-                <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                <li class="menu-option" @click="downloadItem" v-if="!isFolder">
                     <div class="icon">
                         <download-cloud-icon size="17"></download-cloud-icon>
                     </div>
@@ -55,14 +95,18 @@
         </div>
 
         <!--ContextMenu for Base location with MASTER permission-->
-        <div v-if="$isThisLocation(['shared']) && $checkPermission('master')" id="menu-list" class="menu-options">
+        <div v-if="$isThisLocation(['shared']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
             <ul class="menu-option-group" v-if="item && isFolder">
                 <li class="menu-option" @click="addToFavourites">
                     <div class="icon">
                         <star-icon size="17"></star-icon>
                     </div>
                     <div class="text-label">
-                        {{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
+                        {{
+                            isInFavourites
+                                ? $t('context_menu.remove_from_favourites')
+                                : $t('context_menu.add_to_favourites')
+                        }}
                     </div>
                 </li>
             </ul>
@@ -72,7 +116,11 @@
                         <link-icon size="17"></link-icon>
                     </div>
                     <div class="text-label">
-                        {{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
+                        {{
+                            item.shared
+                                ? $t('context_menu.share_edit')
+                                : $t('context_menu.share')
+                        }}
                     </div>
                 </li>
                 <li class="menu-option" @click="deleteItem">
@@ -93,7 +141,7 @@
                         {{ $t('context_menu.detail') }}
                     </div>
                 </li>
-                <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                <li class="menu-option" @click="downloadItem" v-if="!isFolder">
                     <div class="icon">
                         <download-cloud-icon size="17"></download-cloud-icon>
                     </div>
@@ -105,15 +153,21 @@
         </div>
 
         <!--ContextMenu for Base location with MASTER permission-->
-        <div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master')" id="menu-list" class="menu-options">
-
-            <ul class="menu-option-group" v-if="! $isThisLocation(['participant_uploads', 'latest'])">
+        <div v-if="
+          $isThisLocation(['base', 'participant_uploads', 'latest']) &&
+          $checkPermission('master') && !showFromPreview
+        " id="menu-list" class="menu-options">
+            <ul class="menu-option-group" v-if="!$isThisLocation(['participant_uploads', 'latest'])">
                 <li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
                     <div class="icon">
                         <star-icon size="17"></star-icon>
                     </div>
                     <div class="text-label">
-                        {{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
+                        {{
+                            isInFavourites
+                                ? $t('context_menu.remove_from_favourites')
+                                : $t('context_menu.add_to_favourites')
+                        }}
                     </div>
                 </li>
                 <li class="menu-option" @click="createFolder">
@@ -139,7 +193,11 @@
                         <link-icon size="17"></link-icon>
                     </div>
                     <div class="text-label">
-                        {{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
+                        {{
+                            item.shared
+                                ? $t('context_menu.share_edit')
+                                : $t('context_menu.share')
+                        }}
                     </div>
                 </li>
                 <li class="menu-option" @click="deleteItem">
@@ -160,7 +218,7 @@
                         {{ $t('context_menu.detail') }}
                     </div>
                 </li>
-                <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                <li class="menu-option" @click="downloadItem" v-if="!isFolder">
                     <div class="icon">
                         <download-cloud-icon size="17"></download-cloud-icon>
                     </div>
@@ -172,7 +230,7 @@
         </div>
 
         <!--ContextMenu for Base location with EDITOR permission-->
-        <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" id="menu-list" class="menu-options">
+        <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor') && !showFromPreview" id="menu-list" class="menu-options">
             <ul class="menu-option-group">
                 <li class="menu-option" @click="createFolder">
                     <div class="icon">
@@ -210,7 +268,7 @@
                         {{ $t('context_menu.detail') }}
                     </div>
                 </li>
-                <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                <li class="menu-option" @click="downloadItem" v-if="!isFolder">
                     <div class="icon">
                         <download-cloud-icon size="17"></download-cloud-icon>
                     </div>
@@ -222,7 +280,9 @@
         </div>
 
         <!--ContextMenu for Base location with VISITOR permission-->
-        <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" id="menu-list" class="menu-options">
+        <div v-if="
+          $isThisLocation(['base', 'public']) && $checkPermission('visitor') && !showFromPreview
+        " id="menu-list" class="menu-options">
             <ul class="menu-option-group" v-if="item">
                 <li class="menu-option" @click="ItemDetail">
                     <div class="icon">
@@ -232,7 +292,7 @@
                         {{ $t('context_menu.detail') }}
                     </div>
                 </li>
-                <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                <li class="menu-option" @click="downloadItem" v-if="!isFolder">
                     <div class="icon">
                         <download-cloud-icon size="17"></download-cloud-icon>
                     </div>
@@ -246,273 +306,345 @@
 </template>
 
 <script>
-    import {
+import {
+    CornerDownRightIcon,
+    DownloadCloudIcon,
+    FolderPlusIcon,
+    LifeBuoyIcon,
+    Trash2Icon,
+    Edit2Icon,
+    TrashIcon,
+    StarIcon,
+    LinkIcon,
+    EyeIcon
+} from 'vue-feather-icons'
+import { mapGetters } from 'vuex'
+import { events } from '@/bus'
+
+export default {
+    name: 'ContextMenu',
+    components: {
         CornerDownRightIcon,
         DownloadCloudIcon,
         FolderPlusIcon,
         LifeBuoyIcon,
         Trash2Icon,
+        Edit2Icon,
         TrashIcon,
-        StarIcon,
         LinkIcon,
-        EyeIcon,
-    } from 'vue-feather-icons'
-    import {mapGetters} from 'vuex'
-    import {events} from '@/bus'
-
-    export default {
-        name: 'ContextMenu',
-        components: {
-            CornerDownRightIcon,
-            DownloadCloudIcon,
-            FolderPlusIcon,
-            LifeBuoyIcon,
-            Trash2Icon,
-            TrashIcon,
-            LinkIcon,
-            StarIcon,
-            EyeIcon,
+        StarIcon,
+        EyeIcon
+    },
+    computed: {
+        ...mapGetters(['user']),
+        favourites() {
+            return this.user.relationships.favourites.data.attributes.folders
         },
-        computed: {
-            ...mapGetters(['user']),
-            favourites() {
-                return this.user.relationships.favourites.data.attributes.folders
-            },
-            isFolder() {
-                return this.item && this.item.type === 'folder'
-            },
-            isFile() {
-                return (this.item && this.item.type !== 'folder') && (this.item && this.item.type !== 'image')
-            },
-            isImage() {
-                return this.item && this.item.type === 'image'
-            },
-            isInFavourites() {
-                return this.favourites.find(el => el.unique_id == this.item.unique_id)
-            },
+        isFolder() {
+            return this.item && this.item.type === 'folder'
         },
-        data() {
-            return {
-                item: undefined,
-                isVisible: false,
-                positionX: 0,
-                positionY: 0
-            }
+        isFile() {
+            return (
+                this.item &&
+                this.item.type !== 'folder' &&
+                this.item &&
+                this.item.type !== 'image'
+            )
         },
-        methods: {
-            moveItem() {
-                // Open move item popup
-                events.$emit('popup:open', {name: 'move', item: this.item})
-            },
-            shareItem() {
-                if (this.item.shared) {
-                    // Open share item popup
-                    events.$emit('popup:open', {name: 'share-edit', item: this.item})
-                } else {
-                    // Open share item popup
-                    events.$emit('popup:open', {name: 'share-create', item: this.item})
-                }
-            },
-            addToFavourites() {
-                // Check if folder is in favourites and then add/remove from favourites
-                if (this.favourites && !this.favourites.find(el => el.unique_id == this.item.unique_id)) {
-                    this.$store.dispatch('addToFavourites', this.item)
-                } else {
-                    this.$store.dispatch('removeFromFavourites', this.item)
-                }
-            },
-            downloadItem() {
-                // Download file
-                this.$downloadFile(
-                    this.item.file_url,
-                    this.item.name + '.' + this.item.mimetype
-                )
-            },
-            ItemDetail() {
-
-                // Dispatch load file info detail
-                this.$store.commit('GET_FILEINFO_DETAIL', this.item)
-
-                // Show panel if is not open
-                this.$store.dispatch('fileInfoToggle', true)
-            },
-            deleteItem() {
-                // Dispatch remove item
-                this.$store.dispatch('deleteItem', this.item)
-            },
-            createFolder() {
-                // Create folder
-                this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
-            },
-            closeAndResetContextMenu() {
-                // Close context menu
-                this.isVisible = false
-
-                // Reset item container
-                this.item = undefined
-            },
-            showFolderActionsMenu() {
-                let container = document.getElementById('folder-actions')
-
-                this.positionX = container.offsetLeft + 16
-                this.positionY = container.offsetTop + 30
-
-                // Show context menu
-                this.isVisible = true
-            },
-            showContextMenu(event) {
-                let parent = document.getElementById('menu-list')
-                let nodesSameClass = parent.getElementsByClassName("menu-option")
-
-                let VerticalOffsetArea = nodesSameClass.length * 50
-                let HorizontalOffsetArea = 190
-
-                let container = document.getElementById('files-view')
-
-                var offset = container.getClientRects()[0];
-
-                let x = event.clientX - offset.left
-                let y = event.clientY - offset.top
-
-                // Set position Y
-                if ((container.offsetHeight - y) < VerticalOffsetArea) {
-                    this.positionY = y - VerticalOffsetArea
-                } else {
-                    this.positionY = y
-                }
-
-                // Set position X
-                if ((container.offsetWidth - x) < HorizontalOffsetArea) {
-                    this.positionX = x - HorizontalOffsetArea
-                } else {
-                    this.positionX = x
-                }
-
-                // Show context menu
-                this.isVisible = true
-            }
+        isImage() {
+            return this.item && this.item.type === 'image'
         },
-        created() {
-            events.$on('contextMenu:show', (event, item) => {
-
-                // Store item
-                this.item = item
-
-                // Show context menu
-                setTimeout(() => this.showContextMenu(event, item), 10)
-            })
-
-            events.$on('contextMenu:hide', () => (this.closeAndResetContextMenu()))
-
-            events.$on('folder:actions', folder => {
-
-                // Store item
-                this.item = folder
-
-                if (this.isVisible)
-                    this.isVisible = false
-                else
-                    this.showFolderActionsMenu()
-
-            })
+        isInFavourites() {
+            return this.favourites.find((el) => el.unique_id == this.item.unique_id)
         }
+    },
+    data() {
+        return {
+            showFromPreview: false,
+            item: undefined,
+            isVisible: false,
+            positionX: 0,
+            positionY: 0
+        }
+    },
+
+    methods: {
+        renameItem() {
+            let itemName = prompt(this.$t('popup_rename.title'), this.item.name)
+
+            if (itemName && itemName !== '') {
+                let item = {
+                    unique_id: this.item.unique_id,
+                    type: this.item.type,
+                    name: itemName
+                }
+
+                this.$store.dispatch('renameItem', item)
+
+                // Change item name if is mobile device or prompted
+                if (this.$isMobile()) {
+                    events.$emit('change:name', item)
+                }
+            }
+        },
+        moveItem() {
+            // Open move item popup
+            events.$emit('popup:open', { name: 'move', item: this.item })
+        },
+        shareItem() {
+            if (this.item.shared) {
+                // Open share item popup
+                events.$emit('popup:open', { name: 'share-edit', item: this.item })
+            } else {
+                // Open share item popup
+                events.$emit('popup:open', { name: 'share-create', item: this.item })
+            }
+        },
+        addToFavourites() {
+            // Check if folder is in favourites and then add/remove from favourites
+            if (
+                this.favourites &&
+                !this.favourites.find((el) => el.unique_id == this.item.unique_id)
+            ) {
+                this.$store.dispatch('addToFavourites', this.item)
+            } else {
+                this.$store.dispatch('removeFromFavourites', this.item)
+            }
+        },
+        downloadItem() {
+            // Download file
+            this.$downloadFile(
+                this.item.file_url,
+                this.item.name + '.' + this.item.mimetype
+            )
+        },
+        ItemDetail() {
+            // Dispatch load file info detail
+            this.$store.commit('GET_FILEINFO_DETAIL', this.item)
+
+            // Show panel if is not open
+            this.$store.dispatch('fileInfoToggle', true)
+        },
+        deleteItem() {
+            // Dispatch remove item
+            this.$store.dispatch('deleteItem', this.item)
+        },
+        createFolder() {
+            // Create folder
+            this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
+        },
+        closeAndResetContextMenu() {
+            // Close context menu
+            this.isVisible = false
+
+            // Reset item container
+            this.item = undefined
+        },
+        showFolderActionsMenu() {
+            let container = document.getElementById('folder-actions')
+
+            this.positionX = container.offsetLeft + 16
+            this.positionY = container.offsetTop + 30
+
+            // Show context menu
+            this.isVisible = true
+        },
+        showContextMenu(event) {
+            let parent = document.getElementById('menu-list')
+            let nodesSameClass = parent.getElementsByClassName('menu-option')
+
+            let VerticalOffsetArea = nodesSameClass.length * 50
+            let HorizontalOffsetArea = 190
+
+            let container = document.getElementById('files-view')
+
+            var offset = container.getClientRects()[0]
+
+            let x = event.clientX - offset.left
+            let y = event.clientY - offset.top
+
+            // Set position Y
+            if (container.offsetHeight - y < VerticalOffsetArea) {
+                this.positionY = y - VerticalOffsetArea
+            } else {
+                this.positionY = y
+            }
+
+            // Set position X
+            if (container.offsetWidth - x < HorizontalOffsetArea) {
+                this.positionX = x - HorizontalOffsetArea
+            } else {
+                this.positionX = x
+            }
+
+            // Show context menu
+            this.isVisible = true
+        },
+        showFilePreviewMenu() {
+            let container = document.getElementById('fast-preview-menu')
+            if (container) {
+                this.positionX = container.offsetLeft + 16
+                this.positionY = container.offsetTop + 51
+            }
+        }
+
+    },
+    watch: {
+        item(newValue, oldValue) {
+            if (oldValue != undefined && this.showFromPreview) {
+                this.showFromPreview = false
+            }
+        }
+    },
+
+    mounted() {
+        events.$on('actualShowingImage:ContextMenu', (item) => {
+            this.item = item
+        })
+    },
+    created() {
+        events.$on('showContextMenuPreview:show', (item) => {
+            if (!this.showFromPreview) {
+                this.item = item
+                this.showFromPreview = true
+                this.showFilePreviewMenu()
+            } else if (this.showFromPreview) {
+                this.showFromPreview = false
+                this.item = undefined
+            }
+        })
+
+        events.$on('showContextMenuPreview:hide', () => {
+            this.isVisible = false
+            this.showFromPreview = false
+            this.item = undefined
+
+        })
+
+
+        events.$on('contextMenu:show', (event, item) => {
+            // Store item
+            this.item = item
+
+            // Show context menu
+            setTimeout(() => this.showContextMenu(event, item), 10)
+        })
+
+        events.$on('contextMenu:hide', () => this.closeAndResetContextMenu())
+
+        events.$on('folder:actions', (folder) => {
+            // Store item
+            this.item = folder
+
+            if (this.isVisible) this.isVisible = false
+            else this.showFolderActionsMenu()
+        })
     }
+}
 </script>
 
 <style scoped lang="scss">
-    @import '@assets/vue-file-manager/_variables';
-    @import '@assets/vue-file-manager/_mixins';
+@import "@assets/vue-file-manager/_variables";
+@import "@assets/vue-file-manager/_mixins";
+
+.filePreviewFixed {
+    position: fixed !important;
+    display: flex;
+}
+
+.menu-option {
+    display: flex;
+    align-items: center;
+
+    .icon {
+        margin-right: 20px;
+        line-height: 0;
+    }
+
+    .text-label {
+        @include font-size(16);
+    }
+}
+
+.contextmenu {
+    min-width: 250px;
+    position: absolute;
+    z-index: 99;
+    box-shadow: $shadow;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+
+    &.showed {
+        display: block;
+    }
+}
+
+.menu-options {
+    list-style: none;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    .menu-option-group {
+        padding: 5px 0;
+        border-bottom: 1px solid $light_mode_border;
+
+        &:first-child {
+            padding-top: 0;
+        }
+
+        &:last-child {
+            padding-bottom: 0;
+            border-bottom: none;
+        }
+    }
 
     .menu-option {
-        display: flex;
-        align-items: center;
-
-        .icon {
-            margin-right: 20px;
-            line-height: 0;
-        }
-
-        .text-label {
-            @include font-size(16);
-        }
-    }
-
-    .contextmenu {
-        min-width: 250px;
-        position: absolute;
-        z-index: 99;
-        box-shadow: $shadow;
-        background: white;
-        border-radius: 8px;
-        overflow: hidden;
-
-        &.showed {
-            display: block;
-        }
-    }
-
-    .menu-options {
-        list-style: none;
+        white-space: nowrap;
+        font-weight: 700;
+        @include font-size(14);
+        padding: 15px 20px;
+        cursor: pointer;
         width: 100%;
-        margin: 0;
-        padding: 0;
+        color: $text;
 
-        .menu-option-group {
-            padding: 5px 0;
-            border-bottom: 1px solid $light_mode_border;
+        &:hover {
+            background: $light_background;
 
-            &:first-child {
-                padding-top: 0;
+            .text-label {
+                color: $theme;
             }
 
-            &:last-child {
-                padding-bottom: 0;
-                border-bottom: none;
+            path,
+            line,
+            polyline,
+            rect,
+            circle,
+            polygon {
+                stroke: $theme;
             }
         }
+    }
+}
 
-        .menu-option {
-            white-space: nowrap;
-            font-weight: 700;
-            @include font-size(14);
-            padding: 15px 20px;
-            cursor: pointer;
-            width: 100%;
-            color: $text;
+@media (prefers-color-scheme: dark) {
+    .contextmenu {
+        background: $dark_mode_foreground;
 
-            &:hover {
-                background: $light_background;
+        .menu-options {
+            .menu-option-group {
+                border-color: $dark_mode_border_color;
+            }
 
-                .text-label {
-                    color: $theme;
-                }
+            .menu-option {
+                color: $dark_mode_text_primary;
 
-                path, line, polyline, rect, circle, polygon {
-                    stroke: $theme;
-                }
-            }
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-        .contextmenu {
-            background: $dark_mode_foreground;
-
-            .menu-options {
-
-                .menu-option-group {
-                    border-color: $dark_mode_border_color;
-                }
-
-                .menu-option {
-                    color: $dark_mode_text_primary;
-
-                    &:hover {
-                        background: rgba($theme, 0.1);
-                    }
+                &:hover {
+                    background: rgba($theme, 0.1);
                 }
             }
         }
     }
+}
 </style>

resources/js/components/FilesView/DesktopToolbar.vue

@@ -1,366 +1,411 @@
 <template>
-    <div id="desktop-toolbar">
-        <div class="toolbar-wrapper">
+  <div id="desktop-toolbar">
+    <div class="toolbar-wrapper">
+      <!-- Go back-->
+      <div class="toolbar-go-back" v-if="homeDirectory">
+        <div @click="goBack" class="go-back-button">
+          <chevron-left-icon
+            size="17"
+            :class="{ 'is-active': browseHistory.length > 1 }"
+            class="icon-back"
+          ></chevron-left-icon>
 
-            <!-- Go back-->
-            <div class="toolbar-go-back" v-if="homeDirectory">
-                <div @click="goBack" class="go-back-button">
-                    <chevron-left-icon size="17" :class="{'is-active': browseHistory.length > 1}" class="icon-back"></chevron-left-icon>
+          <span class="back-directory-title">
+            {{ directoryName }}
+          </span>
 
-                    <span class="back-directory-title">
-                        {{ directoryName }}
-                    </span>
-
-                    <span @click.stop="folderActions" v-if="browseHistory.length > 1 && $isThisLocation(['base', 'public'])" class="folder-options" id="folder-actions">
-                        <more-horizontal-icon size="14" class="icon-more"></more-horizontal-icon>
-                    </span>
-                </div>
-            </div>
-
-            <!-- Tools-->
-            <div class="toolbar-tools">
-                <!--Search bar-->
-                <div class="toolbar-button-wrapper">
-                    <SearchBar/>
-                </div>
-
-                <!--Files controlls-->
-                <div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
-                    <ToolbarButtonUpload
-                            :class="{'is-inactive': canUploadInView || ! hasCapacity}"
-                            :action="$t('actions.upload')"
-                    />
-                    <ToolbarButton
-                            :class="{'is-inactive': canCreateFolderInView}"
-                            @click.native="createFolder"
-                            source="folder-plus"
-                            :action="$t('actions.create_folder')"
-                    />
-                </div>
-
-                <div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
-                    <ToolbarButton
-                            source="move"
-                            :class="{'is-inactive': canMoveInView}"
-                            :action="$t('actions.move')"
-                            @click.native="moveItem"
-                    />
-                    <ToolbarButton
-                            v-if="! $isThisLocation(['public'])"
-                            source="share"
-                            :class="{'is-inactive': canShareInView}"
-                            :action="$t('actions.share')"
-                            @click.native="shareItem"
-                    />
-                    <ToolbarButton
-                            source="trash"
-                            :class="{'is-inactive': canDeleteInView}"
-                            :action="$t('actions.delete')"
-                            @click.native="deleteItem"
-                    />
-                </div>
-
-                <!--View options-->
-                <div class="toolbar-button-wrapper">
-                    <ToolbarButton
-                            :source="preview"
-                            :action="$t('actions.preview')"
-                            @click.native="$store.dispatch('changePreviewType')"
-                    />
-                    <ToolbarButton
-                            :class="{ active: fileInfoVisible }"
-                            @click.native="$store.dispatch('fileInfoToggle')"
-                            source="info"
-                    />
-                </div>
-            </div>
+          <span
+            @click.stop="folderActions"
+            v-if="
+              browseHistory.length > 1 && $isThisLocation(['base', 'public'])
+            "
+            class="folder-options"
+            id="folder-actions"
+          >
+            <more-horizontal-icon
+              size="14"
+              class="icon-more"
+            ></more-horizontal-icon>
+          </span>
         </div>
-        <UploadProgress />
+      </div>
+
+      <!-- Tools-->
+      <div class="toolbar-tools">
+        <!--Search bar-->
+        <div class="toolbar-button-wrapper">
+          <SearchBar />
+        </div>
+
+        <!--Files controlls-->
+        <div
+          class="toolbar-button-wrapper"
+          v-if="$checkPermission(['master', 'editor'])"
+        >
+          <ToolbarButtonUpload
+            :class="{ 'is-inactive': canUploadInView || !hasCapacity }"
+            :action="$t('actions.upload')"
+          />
+          <ToolbarButton
+            :class="{ 'is-inactive': canCreateFolderInView }"
+            @click.native="createFolder"
+            source="folder-plus"
+            :action="$t('actions.create_folder')"
+          />
+        </div>
+
+        <div
+          class="toolbar-button-wrapper"
+          v-if="$checkPermission(['master', 'editor'])"
+        >
+          <ToolbarButton
+            source="move"
+            :class="{ 'is-inactive': canMoveInView }"
+            :action="$t('actions.move')"
+            @click.native="moveItem"
+          />
+          <ToolbarButton
+            v-if="!$isThisLocation(['public'])"
+            source="share"
+            :class="{ 'is-inactive': canShareInView }"
+            :action="$t('actions.share')"
+            @click.native="shareItem"
+          />
+          <ToolbarButton
+            source="trash"
+            :class="{ 'is-inactive': canDeleteInView }"
+            :action="$t('actions.delete')"
+            @click.native="deleteItem"
+          />
+        </div>
+
+        <!--View options-->
+        <div class="toolbar-button-wrapper">
+          <ToolbarButton
+            :source="preview"
+            :action="$t('actions.preview')"
+            @click.native="$store.dispatch('changePreviewType')"
+          />
+          <ToolbarButton
+            :class="{ active: fileInfoVisible }"
+            @click.native="$store.dispatch('fileInfoToggle')"
+            source="info"
+          />
+        </div>
+      </div>
     </div>
+    <UploadProgress />
+  </div>
 </template>
 
 <script>
-    import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
-    import { ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
-    import UploadProgress from '@/components/FilesView/UploadProgress'
-    import ToolbarButton from '@/components/FilesView/ToolbarButton'
-    import SearchBar from '@/components/FilesView/SearchBar'
-    import {mapGetters} from 'vuex'
-    import {events} from '@/bus'
-    import {last} from 'lodash'
+import ToolbarButtonUpload from "@/components/FilesView/ToolbarButtonUpload";
+import { ChevronLeftIcon, MoreHorizontalIcon } from "vue-feather-icons";
+import UploadProgress from "@/components/FilesView/UploadProgress";
+import ToolbarButton from "@/components/FilesView/ToolbarButton";
+import SearchBar from "@/components/FilesView/SearchBar";
+import { mapGetters } from "vuex";
+import { events } from "@/bus";
+import { last } from "lodash";
 
-    export default {
-        name: 'ToolBar',
-        components: {
-            ToolbarButtonUpload,
-            MoreHorizontalIcon,
-            ChevronLeftIcon,
-            UploadProgress,
-            ToolbarButton,
-            SearchBar
-        },
-        computed: {
-            ...mapGetters([
-                'FilePreviewType',
-                'fileInfoVisible',
-                'fileInfoDetail',
-                'currentFolder',
-                'browseHistory',
-                'homeDirectory',
-            ]),
-            hasCapacity() {
+export default {
+  name: "ToolBar",
+  components: {
+    ToolbarButtonUpload,
+    MoreHorizontalIcon,
+    ChevronLeftIcon,
+    UploadProgress,
+    ToolbarButton,
+    SearchBar,
+  },
+  computed: {
+    ...mapGetters([
+      "FilePreviewType",
+      "fileInfoVisible",
+      "fileInfoDetail",
+      "currentFolder",
+      "browseHistory",
+      "homeDirectory",
+    ]),
+    hasCapacity() {
+      // Check if set storage limitation
+      if (!this.$store.getters.config.storageLimit) return true;
 
-                // Check if set storage limitation
-                if (! this.$store.getters.config.storageLimit)
-                    return true
+      // Check if is loaded user
+      if (!this.$store.getters.user) return true;
 
-                // Check if is loaded user
-                if (! this.$store.getters.user )
-                    return true
+      // Check if user has storage
+      return (
+        this.$store.getters.user.relationships.storage.data.attributes.used <=
+        100
+      );
+    },
+    directoryName() {
+      return this.currentFolder
+        ? this.currentFolder.name
+        : this.homeDirectory.name;
+    },
+    preview() {
+      return this.FilePreviewType === "list" ? "th" : "th-list";
+    },
+    canCreateFolderInView() {
+      return !this.$isThisLocation(["base", "public"]);
+    },
+    canDeleteInView() {
+      return !this.$isThisLocation([
+        "trash",
+        "trash-root",
+        "base",
+        "participant_uploads",
+        "latest",
+        "shared",
+        "public",
+      ]);
+    },
+    canUploadInView() {
+      return !this.$isThisLocation(["base", "public"]);
+    },
+    canMoveInView() {
+      return !this.$isThisLocation([
+        "base",
+        "participant_uploads",
+        "latest",
+        "shared",
+        "public",
+      ]);
+    },
+    canShareInView() {
+      return !this.$isThisLocation([
+        "base",
+        "participant_uploads",
+        "latest",
+        "shared",
+        "public",
+      ]);
+    },
+  },
+  methods: {
+    goBack() {
+      // Get previous folder
+      let previousFolder = last(this.browseHistory);
 
-                // Check if user has storage
-                return this.$store.getters.user.relationships.storage.data.attributes.used <= 100
-            },
-            directoryName() {
-                return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
-            },
-            preview() {
-                return this.FilePreviewType === 'list' ? 'th' : 'th-list'
-            },
-            canCreateFolderInView() {
-                return ! this.$isThisLocation(['base', 'public'])
-            },
-            canDeleteInView() {
-                return ! this.$isThisLocation(['trash', 'trash-root', 'base', 'participant_uploads', 'latest', 'shared', 'public'])
-            },
-            canUploadInView() {
-                return ! this.$isThisLocation(['base', 'public'])
-            },
-            canMoveInView() {
-                return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
-            },
-            canShareInView() {
-                return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
-            }
-        },
-        methods: {
-            goBack() {
-                // Get previous folder
-                let previousFolder = last(this.browseHistory)
+      if (!previousFolder) return;
 
-                if (! previousFolder)
-                    return
-
-                if (previousFolder.location === 'trash-root') {
-                    this.$store.dispatch('getTrash')
-
-                } else if (previousFolder.location === 'shared') {
-                    this.$store.dispatch('getShared')
-
-                } else {
-
-                    if ( this.$isThisLocation('public') ) {
-                        this.$store.dispatch('browseShared', [{folder: previousFolder, back: true, init: false}])
-                    } else {
-                        this.$store.dispatch('getFolder', [{folder: previousFolder, back: true, init: false}])
-                    }
-                }
-            },
-            folderActions() {
-                events.$emit('folder:actions', this.currentFolder)
-            },
-            deleteItem() {
-                events.$emit('items:delete')
-            },
-            createFolder() {
-                this.$createFolder()
-            },
-            moveItem() {
-                events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail})
-            },
-            shareItem() {
-                if (this.fileInfoDetail.shared) {
-                    events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail})
-                } else {
-                    events.$emit('popup:open', {name: 'share-create', item: this.fileInfoDetail})
-                }
-            }
-        },
-    }
+      if (previousFolder.location === "trash-root") {
+        this.$store.dispatch("getTrash");
+      } else if (previousFolder.location === "shared") {
+        this.$store.dispatch("getShared");
+      } else {
+        if (this.$isThisLocation("public")) {
+          this.$store.dispatch("browseShared", [
+            { folder: previousFolder, back: true, init: false },
+          ]);
+        } else {
+          this.$store.dispatch("getFolder", [
+            { folder: previousFolder, back: true, init: false },
+          ]);
+        }
+      }
+    },
+    folderActions() {
+      events.$emit("folder:actions", this.currentFolder);
+    },
+    deleteItem() {
+      events.$emit("items:delete");
+    },
+    createFolder() {
+      this.$createFolder();
+    },
+    moveItem() {
+      events.$emit("popup:open", { name: "move", item: this.fileInfoDetail });
+    },
+    shareItem() {
+      if (this.fileInfoDetail) {
+        //ADD BY M
+        if (this.fileInfoDetail.shared) {
+          events.$emit("popup:open", {
+            name: "share-edit",
+            item: this.fileInfoDetail,
+          });
+        } else {
+          events.$emit("popup:open", {
+            name: "share-create",
+            item: this.fileInfoDetail,
+          });
+        }
+      }
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-    @import '@assets/vue-file-manager/_variables';
-    @import '@assets/vue-file-manager/_mixins';
+@import "@assets/vue-file-manager/_variables";
+@import "@assets/vue-file-manager/_mixins";
 
-    .toolbar-wrapper {
-        padding-top: 10px;
-        padding-bottom: 10px;
-        display: flex;
-        position: relative;
-        z-index: 2;
+.toolbar-wrapper {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  display: flex;
+  position: relative;
+  z-index: 2;
 
-        > div {
-            flex-grow: 1;
-            align-self: center;
-            white-space: nowrap;
-        }
+  > div {
+    flex-grow: 1;
+    align-self: center;
+    white-space: nowrap;
+  }
+}
+
+.directory-name {
+  vertical-align: middle;
+  @include font-size(17);
+  color: $text;
+  font-weight: 700;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+
+.icon-back {
+  vertical-align: middle;
+  cursor: pointer;
+  margin-right: 6px;
+  opacity: 0.15;
+  pointer-events: none;
+  @include transition(150ms);
+
+  &.is-active {
+    opacity: 1;
+    pointer-events: initial;
+  }
+}
+
+.toolbar-go-back {
+  cursor: pointer;
+
+  .folder-options {
+    vertical-align: middle;
+    margin-left: 6px;
+    padding: 1px 4px;
+    line-height: 0;
+    border-radius: 3px;
+    @include transition(150ms);
+
+    svg circle {
+      @include transition(150ms);
     }
 
-    .directory-name {
-        vertical-align: middle;
-        @include font-size(17);
-        color: $text;
-        font-weight: 700;
-        max-width: 220px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: inline-block;
+    &:hover {
+      background: $light_background;
+
+      svg circle {
+        stroke: $theme;
+      }
     }
 
-    .icon-back {
-        vertical-align: middle;
-        cursor: pointer;
-        margin-right: 6px;
-        opacity: 0.15;
-        pointer-events: none;
-        @include transition(150ms);
+    .icon-more {
+      vertical-align: middle;
+    }
+  }
 
-        &.is-active {
-            opacity: 1;
-            pointer-events: initial;
+  .back-directory-title {
+    @include font-size(15);
+    line-height: 1;
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    vertical-align: middle;
+    color: $text;
+  }
+}
+
+.toolbar-position {
+  text-align: center;
+
+  span {
+    @include font-size(17);
+    font-weight: 600;
+  }
+}
+
+.toolbar-tools {
+  text-align: right;
+
+  .toolbar-button-wrapper {
+    margin-left: 28px;
+    display: inline-block;
+    vertical-align: middle;
+
+    &:first-child {
+      margin-left: 0 !important;
+    }
+  }
+
+  .button {
+    margin-left: 5px;
+
+    &.active {
+      /deep/ svg {
+        line,
+        circle {
+          stroke: $theme;
         }
+      }
     }
 
-    .toolbar-go-back {
-        cursor: pointer;
-
-        .folder-options {
-            vertical-align: middle;
-            margin-left: 6px;
-            padding: 1px 4px;
-            line-height: 0;
-            border-radius: 3px;
-            @include transition(150ms);
-
-            svg circle {
-                @include transition(150ms);
-            }
-
-            &:hover {
-                background: $light_background;
-
-                svg circle {
-                    stroke: $theme;
-                }
-            }
-
-            .icon-more {
-                vertical-align: middle;
-            }
-        }
-
-
-        .back-directory-title {
-            @include font-size(15);
-            line-height: 1;
-            font-weight: 700;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            vertical-align: middle;
-            color: $text;
-        }
+    &.is-inactive {
+      opacity: 0.25;
+      pointer-events: none;
     }
 
-    .toolbar-position {
-        text-align: center;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
 
-        span {
-            @include font-size(17);
-            font-weight: 600;
-        }
+@media only screen and (max-width: 1024px) {
+  .toolbar-go-back .back-directory-title {
+    max-width: 120px;
+  }
+
+  .toolbar-tools {
+    .button {
+      margin-left: 0;
+      height: 40px;
+      width: 40px;
     }
 
-    .toolbar-tools {
-        text-align: right;
+    .toolbar-button-wrapper {
+      margin-left: 25px;
+    }
+  }
+}
 
-        .toolbar-button-wrapper {
-            margin-left: 28px;
-            display: inline-block;
-            vertical-align: middle;
+@media only screen and (max-width: 960px) {
+  #desktop-toolbar {
+    display: none;
+  }
+}
 
-            &:first-child {
-                margin-left: 0 !important;
-            }
-        }
+@media (prefers-color-scheme: dark) {
+  .toolbar .directory-name {
+    color: $dark_mode_text_primary;
+  }
 
-        .button {
-            margin-left: 5px;
-
-            &.active {
-                /deep/ svg {
-                    line, circle {
-                        stroke: $theme;
-                    }
-                }
-            }
-
-            &.is-inactive {
-                opacity: 0.25;
-                pointer-events: none;
-            }
-
-            &:first-child {
-                margin-left: 0;
-            }
-        }
+  .toolbar-go-back {
+    .back-directory-title {
+      color: $dark_mode_text_primary;
     }
 
-    @media only screen and (max-width: 1024px) {
-
-        .toolbar-go-back .back-directory-title {
-            max-width: 120px;
-        }
-
-        .toolbar-tools {
-
-            .button {
-                margin-left: 0;
-                height: 40px;
-                width: 40px;
-            }
-
-            .toolbar-button-wrapper {
-                margin-left: 25px;
-            }
-        }
-    }
-
-    @media only screen and (max-width: 960px) {
-
-        #desktop-toolbar {
-            display: none;
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .toolbar .directory-name {
-            color: $dark_mode_text_primary;
-        }
-
-        .toolbar-go-back {
-
-            .back-directory-title {
-                color: $dark_mode_text_primary;
-            }
-
-            .folder-options {
-
-                &:hover {
-                    background: $dark_mode_foreground;
-                }
-            }
-        }
+    .folder-options {
+      &:hover {
+        background: $dark_mode_foreground;
+      }
     }
+  }
+}
 </style>

resources/js/components/FilesView/FileFullPreview.vue

@@ -0,0 +1,96 @@
+<template>
+	<div
+		v-if="showFullPreview"
+		class="file-full-preview-wrapper"
+		id="fileFullPreview"
+		ref="filePreview"
+		tabindex="-1"
+		@click="closeContextMenu"
+		@keydown.esc=";(showFullPreview = false), hideContextMenu()"
+		@keydown.right="next"
+		@keydown.left="prev"
+	>
+		<FilePreviewNavigationPanel />
+		<MediaFullPreview />
+		<FilePreviewActions />
+	</div>
+</template>
+
+<script>
+import { events } from '@/bus'
+import { mapGetters } from 'vuex'
+
+import MediaFullPreview from '@/components/FilesView/MediaFullPreview'
+import FilePreviewActions from '@/components/FilesView/FilePreviewActions'
+import FilePreviewNavigationPanel from '@/components/FilesView/FilePreviewNavigationPanel'
+
+export default {
+	name: 'FileFullPreview',
+	components: {
+		MediaFullPreview,
+		FilePreviewNavigationPanel,
+		FilePreviewActions
+	},
+	computed: {
+		...mapGetters(['fileInfoDetail', 'data'])
+	},
+	data() {
+		return {
+			showFullPreview: false
+		}
+	},
+	methods: {
+		closeContextMenu(event) {
+			if ((event.target.parentElement.id || event.target.id) === 'fast-preview-menu') {
+				return
+			} else {
+				events.$emit('showContextMenuPreview:hide')
+			}
+		},
+		next: function() {
+			events.$emit('filePreviewAction:next')
+		},
+		prev: function() {
+			events.$emit('filePreviewAction:prev')
+		},
+		hideContextMenu() {
+			events.$emit('showContextMenuPreview:hide')
+		}
+	},
+
+	updated() {
+		//Focus file preview for key binding
+		if (this.showFullPreview) {
+			this.$refs.filePreview.focus()
+		}
+	},
+	mounted() {
+		events.$on('fileFullPreview:show', () => {
+			this.showFullPreview = true
+		})
+		events.$on('fileFullPreview:hide', () => {
+			this.showFullPreview = false
+
+            events.$emit('hide:mobile-navigation')
+        })
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@assets/vue-file-manager/_variables';
+
+.file-full-preview-wrapper {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 7;
+	background-color: white;
+}
+
+@media (prefers-color-scheme: dark) {
+	.file-full-preview-wrapper {
+		background-color: $dark_mode_background;
+	}
+}
+</style>

resources/js/components/FilesView/FileInfoPanel.vue

@@ -56,12 +56,17 @@
                     <CopyInput class="copy-sharelink" size="small" :value="fileInfoDetail.shared.link"/>
                 </div>
             </ListInfoItem>
+
+            <ListInfoItem v-if="canShowMetaData" :title="$t('file_detail_meta.meta_data')">
+                <ImageMetaData />
+            </ListInfoItem>
         </ListInfo>
     </div>
 </template>
 
 <script>
     import {Edit2Icon, LockIcon, UnlockIcon, ImageIcon, VideoIcon, FolderIcon, FileIcon} from 'vue-feather-icons'
+    import ImageMetaData from '@/components/FilesView/ImageMetaData'
     import FilePreview from '@/components/FilesView/FilePreview'
     import CopyInput from '@/components/Others/Forms/CopyInput'
     import ListInfoItem from '@/components/Others/ListInfoItem'
@@ -72,6 +77,7 @@
     export default {
         name: 'FileInfoPanel',
         components: {
+            ImageMetaData,
             ListInfoItem,
             ListInfo,
             FilePreview,
@@ -88,26 +94,11 @@
             ...mapGetters(['fileInfoDetail', 'permissionOptions']),
             fileType() {
                 return this.fileInfoDetail.type
-                /*                switch () {
-                                    case 'folder':
-                                        return 'folder'
-                                    break;
-                                    case 'file':
-                                        return 'file'
-                                    break;
-                                    case 'image':
-                                        return 'file-image'
-                                    break;
-                                    case 'video':
-                                        return 'file-video'
-                                    break;
-                                    case 'file':
-                                        return 'file-audio'
-                                    break;
-                                }*/
+            },
+            canShowMetaData() {
+                return this.fileInfoDetail.metadata && this.fileInfoDetail.metadata.ExifImageWidth
             },
             sharedInfo() {
-
                 // Get permission title
                 let title = this.permissionOptions.find(option => {
                     return option.value === this.fileInfoDetail.shared.permission

resources/js/components/FilesView/FileItemGrid.vue

@@ -22,15 +22,15 @@
             <div class="icon-item">
 
                 <!--If is file or image, then link item-->
-                <span v-if="isFile" class="file-icon-text">
+                <span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
                     {{ data.mimetype }}
                 </span>
 
                 <!--Folder thumbnail-->
-                <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
+                <FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file"/>
 
                 <!--Image thumbnail-->
-                <img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>
+                <img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
 
                 <!--Else show only folder icon-->
                 <FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
@@ -101,9 +101,19 @@
             isFile() {
                 return this.data.type !== 'folder' && this.data.type !== 'image'
             },
+            isPdf() {
+                return this.data.mimetype === 'pdf'
+            },
             isImage() {
                 return this.data.type === 'image'
             },
+            isVideo() {
+                return this.data.type === 'video'
+            },
+            isAudio() {
+                let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
+                return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
+            },
             canEditName() {
                 return !this.$isMobile()
                     && !this.$isThisLocation(['trash', 'trash-root'])
@@ -166,6 +176,12 @@
                     }
                 }
 
+                if (this.$isMobile()) {
+                    if (this.isImage || this.isVideo || this.isAudio) {
+                        events.$emit('fileFullPreview:show')
+                    }
+                }
+
                 // Load file info detail
                 this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
@@ -180,23 +196,17 @@
                     return
             },
             goToItem() {
-                if (this.isImage) {
-                    this.$openImageOnNewTab(this.data.file_url)
-                }
+                if (this.isImage || this.isVideo || this.isAudio) {
+                    events.$emit('fileFullPreview:show')
 
-                if (this.isFile) {
-                    this.$downloadFile(
-                        this.data.file_url,
-                        this.data.name + '.' + this.data.mimetype
-                    )
-                }
-
-                if (this.isFolder) {
+                } else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) {
+                    this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
 
+                } else if (this.isFolder) {
                     if (this.$isThisLocation('public')) {
-                        this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
+                        this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
                     } else {
-                        this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: false}])
+                        this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
                     }
                 }
             },

resources/js/components/FilesView/FileItemList.vue

@@ -1,473 +1,454 @@
 <template>
-    <div
-            class="file-wrapper"
-            @click.stop="clickedItem"
-            @dblclick="goToItem"
-            spellcheck="false"
-    >
-        <!--List preview-->
-        <div
-                :draggable="canDrag"
-                @dragstart="$emit('dragstart')"
-                @drop="
+	<div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
+		<!--List preview-->
+		<div
+			:draggable="canDrag"
+			@dragstart="$emit('dragstart')"
+			@drop="
 				$emit('drop')
 				area = false
 			"
-                @dragleave="dragLeave"
-                @dragover.prevent="dragEnter"
-                class="file-item"
-                :class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
-        >
-            <!--Thumbnail for item-->
-            <div class="icon-item">
-                <!--If is file or image, then link item-->
-                <span v-if="isFile" class="file-icon-text">
-                    {{ data.mimetype | limitCharacters }}
-                </span>
+			@dragleave="dragLeave"
+			@dragover.prevent="dragEnter"
+			class="file-item"
+			:class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
+		>
+			<!--Thumbnail for item-->
+			<div class="icon-item">
+				<!--If is file or image, then link item-->
+				<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
+					{{ data.mimetype | limitCharacters }}
+				</span>
 
-                <!--Folder thumbnail-->
-                <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
+				<!--Folder thumbnail-->
+				<FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file" />
 
-                <!--Image thumbnail-->
-                <img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>
+				<!--Image thumbnail-->
+				<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name" />
 
-                <!--Else show only folder icon-->
-                <FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
-            </div>
+				<!--Else show only folder icon-->
+				<FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" />
+			</div>
 
-            <!--Name-->
-            <div class="item-name">
-                <!--Name-->
-                <b
-                        ref="name"
-                        @input="renameItem"
-                        :contenteditable="canEditName"
-                        class="name"
-                >
-                    {{ itemName }}
-                </b>
+			<!--Name-->
+			<div class="item-name">
+				<!--Name-->
+				<b ref="name" @input="renameItem" :contenteditable="canEditName" class="name">
+					{{ itemName }}
+				</b>
 
-                <div class="item-info">
+				<div class="item-info">
+					<!--Shared Icon-->
+					<div v-if="$checkPermission('master') && data.shared" class="item-shared">
+						<link-icon size="12" class="shared-icon"></link-icon>
+					</div>
 
-                    <!--Shared Icon-->
-                    <div v-if="$checkPermission('master') && data.shared" class="item-shared">
-                        <link-icon size="12" class="shared-icon"></link-icon>
-                    </div>
+					<!--Participant owner Icon-->
+					<div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
+						<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
+					</div>
 
-                    <!--Participant owner Icon-->
-                    <div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
-                        <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
-                    </div>
+					<!--Filesize and timestamp-->
+					<span v-if="!isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
 
-                    <!--Filesize and timestamp-->
-                    <span v-if="! isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
+					<!--Folder item counts-->
+					<span v-if="isFolder" class="item-length"> {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span>
+				</div>
+			</div>
 
-                    <!--Folder item counts-->
-                    <span v-if="isFolder" class="item-length">
-                        {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
-                    </span>
-                </div>
-            </div>
-
-            <!--Go Next icon-->
-            <div class="actions" v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder )">
+			<!--Go Next icon-->
+			<div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder)">
 				<span @click.stop="showItemActions" class="show-actions">
 					<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
 				</span>
-            </div>
-        </div>
-    </div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-    import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
-    import {debounce} from 'lodash'
-    import {mapGetters} from 'vuex'
-    import {events} from '@/bus'
+import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
+import { debounce } from 'lodash'
+import { mapGetters } from 'vuex'
+import { events } from '@/bus'
 
-    export default {
-        name: 'FileItemList',
-        props: ['data'],
-        components: {
-            UserPlusIcon,
-            LinkIcon,
-        },
-        computed: {
-            ...mapGetters(['FilePreviewType']),
-            isFolder() {
-                return this.data.type === 'folder'
-            },
-            isFile() {
-                return this.data.type !== 'folder' && this.data.type !== 'image'
-            },
-            isImage() {
-                return this.data.type === 'image'
-            },
-            canEditName() {
-                return !this.$isMobile()
-                    && !this.$isThisLocation(['trash', 'trash-root'])
-                    && !this.$checkPermission('visitor')
-                    && !(this.sharedDetail && this.sharedDetail.type === 'file')
-            },
-            canDrag() {
-                return !this.isDeleted && this.$checkPermission(['master', 'editor'])
-            },
-            timeStamp() {
-                return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.data.deleted_at}) : this.data.created_at
-            },
-            folderItems() {
-                return this.data.deleted_at ? this.data.trashed_items : this.data.items
-            },
-            isDeleted() {
-                return this.data.deleted_at ? true : false
-            }
-        },
-        filters: {
-            limitCharacters(str) {
+export default {
+	name: 'FileItemList',
+	props: ['data'],
+	components: {
+		UserPlusIcon,
+		LinkIcon
+	},
+	computed: {
+		...mapGetters(['FilePreviewType']),
+		isFolder() {
+			return this.data.type === 'folder'
+		},
+		isFile() {
+			return this.data.type !== 'folder' && this.data.type !== 'image'
+		},
+		isImage() {
+			return this.data.type === 'image'
+		},
+		isPdf() {
+			return this.data.mimetype === 'pdf'
+		},
+		isVideo() {
+			return this.data.type === 'video'
+		},
+		isAudio() {
+			let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
+			return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
+		},
+		canEditName() {
+			return !this.$isMobile() && !this.$isThisLocation(['trash', 'trash-root']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.type === 'file')
+		},
+		canDrag() {
+			return !this.isDeleted && this.$checkPermission(['master', 'editor'])
+		},
+		timeStamp() {
+			return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.data.deleted_at }) : this.data.created_at
+		},
+		folderItems() {
+			return this.data.deleted_at ? this.data.trashed_items : this.data.items
+		},
+		isDeleted() {
+			return this.data.deleted_at ? true : false
+		}
+	},
+	filters: {
+		limitCharacters(str) {
+			if (str.length > 3) {
+				return str.substring(0, 3) + '...'
+			} else {
+				return str.substring(0, 3)
+			}
+		}
+	},
+	data() {
+		return {
+			isClicked: false,
+			area: false,
+			itemName: undefined
+		}
+	},
+	methods: {
+		showItemActions() {
+			// Load file info detail
+			this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
-                if (str.length > 3) {
-                    return str.substring(0, 3) + '...';
-                } else {
-                    return str.substring(0, 3);
-                }
+			events.$emit('mobileMenu:show')
+		},
+		dragEnter() {
+			if (this.data.type !== 'folder') return
 
-            }
-        },
-        data() {
-            return {
-                isClicked: false,
-                area: false,
-                itemName: undefined,
-            }
-        },
-        methods: {
-            showItemActions() {
-                // Load file info detail
-                this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+			this.area = true
+		},
+		dragLeave() {
+			this.area = false
+		},
+		clickedItem(e) {
+			events.$emit('contextMenu:hide')
+			events.$emit('fileItem:deselect')
 
-                //this.isClicked = true
+			// Set clicked item
+			this.isClicked = true
 
-                events.$emit('mobileMenu:show')
-            },
-            dragEnter() {
-                if (this.data.type !== 'folder') return
+			// Open in mobile version on first click
+			if (this.$isMobile() && this.isFolder) {
+				// Go to folder
+				if (this.$isThisLocation('public')) {
+					this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
+				} else {
+					this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
+				}
+			}
 
-                this.area = true
-            },
-            dragLeave() {
-                this.area = false
-            },
-            clickedItem(e) {
-                events.$emit('contextMenu:hide')
-                events.$emit('fileItem:deselect')
+			if (this.$isMobile()) {
+				if (this.isImage || this.isVideo || this.isAudio) {
+					events.$emit('fileFullPreview:show')
+				}
+			}
 
-                // Set clicked item
-                this.isClicked = true
+			// Load file info detail
+			this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
-                // Open in mobile version on first click
-                if (this.$isMobile() && this.isFolder) {
+			// Get target classname
+			let itemClass = e.target.className
 
-                    // Go to folder
-                    if (this.$isThisLocation('public')) {
-                        this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
-                    } else {
-                        this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: false}])
-                    }
-                }
+			if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass)) return
+		},
+		goToItem() {
+			if (this.isImage || this.isVideo || this.isAudio) {
+				events.$emit('fileFullPreview:show')
 
-                // Load file info detail
-                this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+			} else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) {
+				this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
 
-                // Get target classname
-                let itemClass = e.target.className
+			} else if (this.isFolder) {
+				if (this.$isThisLocation('public')) {
+					this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
+				} else {
+					this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
+				}
+			}
+		},
+		renameItem: debounce(function(e) {
+			// Prevent submit empty string
+			if (e.target.innerText.trim() === '') return
 
-                if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass))
-                    return
-            },
-            goToItem() {
-                if (this.isImage) {
-                    this.$openImageOnNewTab(this.data.file_url)
-                }
+			this.$store.dispatch('renameItem', {
+				unique_id: this.data.unique_id,
+				type: this.data.type,
+				name: e.target.innerText
+			})
+		}, 300)
+	},
+	created() {
+		this.itemName = this.data.name
 
-                if (this.isFile) {
-                    this.$downloadFile(
-                        this.data.file_url,
-                        this.data.name + '.' + this.data.mimetype
-                    )
-                }
+		events.$on('fileItem:deselect', () => {
+			// Deselect file
+			this.isClicked = false
+		})
 
-                if (this.isFolder) {
-
-                    if (this.$isThisLocation('public')) {
-                        this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
-                    } else {
-                        this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: false}])
-                    }
-                }
-            },
-            renameItem: debounce(function (e) {
-
-                // Prevent submit empty string
-                if (e.target.innerText.trim() === '') return
-
-                this.$store.dispatch('renameItem', {
-                    unique_id: this.data.unique_id,
-                    type: this.data.type,
-                    name: e.target.innerText
-                })
-            }, 300)
-        },
-        created() {
-            this.itemName = this.data.name
-
-            events.$on('fileItem:deselect', () => {
-                // Deselect file
-                this.isClicked = false
-            })
-
-            // Change item name
-            events.$on('change:name', (item) => {
-                if (this.data.unique_id == item.unique_id) this.itemName = item.name
-            })
-        },
-    }
+		// Change item name
+		events.$on('change:name', (item) => {
+			if (this.data.unique_id == item.unique_id) this.itemName = item.name
+		})
+	}
+}
 </script>
 
 <style scoped lang="scss">
-    @import '@assets/vue-file-manager/_variables';
-    @import '@assets/vue-file-manager/_mixins';
+@import '@assets/vue-file-manager/_variables';
+@import '@assets/vue-file-manager/_mixins';
 
-    .file-wrapper {
-        user-select: none;
-        position: relative;
+.file-wrapper {
+	user-select: none;
+	position: relative;
 
-        &:hover {
-            border-color: transparent;
-        }
+	&:hover {
+		border-color: transparent;
+	}
 
-        .actions {
-            text-align: right;
-            width: 50px;
+	.actions {
+		text-align: right;
+		width: 50px;
 
-            .show-actions {
-                cursor: pointer;
-                padding: 12px 6px 12px;
+		.show-actions {
+			cursor: pointer;
+			padding: 12px 6px 12px;
 
-                .icon-action {
-                    @include font-size(14);
+			.icon-action {
+				@include font-size(14);
 
-                    path {
-                        fill: $theme;
-                    }
-                }
-            }
-        }
+				path {
+					fill: $theme;
+				}
+			}
+		}
+	}
 
-        .item-name {
-            display: block;
-            width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+	.item-name {
+		display: block;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 
-            .item-info {
-                display: block;
-                line-height: 1;
-            }
+		.item-info {
+			display: block;
+			line-height: 1;
+		}
 
-            .item-shared {
-                display: inline-block;
+		.item-shared {
+			display: inline-block;
 
-                .label {
-                    @include font-size(12);
-                    font-weight: 400;
-                    color: $theme;
-                }
+			.label {
+				@include font-size(12);
+				font-weight: 400;
+				color: $theme;
+			}
 
-                .shared-icon {
-                    vertical-align: middle;
+			.shared-icon {
+				vertical-align: middle;
 
-                    path, circle, line {
-                        stroke: $theme;
-                    }
-                }
-            }
+				path,
+				circle,
+				line {
+					stroke: $theme;
+				}
+			}
+		}
 
-            .item-size,
-            .item-length {
-                @include font-size(11);
-                font-weight: 400;
-                color: rgba($text, 0.7);
-            }
+		.item-size,
+		.item-length {
+			@include font-size(11);
+			font-weight: 400;
+			color: rgba($text, 0.7);
+		}
 
-            .name {
-                white-space: nowrap;
+		.name {
+			white-space: nowrap;
 
-                &[contenteditable] {
-                    -webkit-user-select: text;
-                    user-select: text;
-                }
+			&[contenteditable] {
+				-webkit-user-select: text;
+				user-select: text;
+			}
 
-                &[contenteditable='true']:hover {
-                    text-decoration: underline;
-                }
-            }
+			&[contenteditable='true']:hover {
+				text-decoration: underline;
+			}
+		}
 
-            .name {
-                color: $text;
-                @include font-size(14);
-                font-weight: 700;
-                max-height: 40px;
-                overflow: hidden;
-                text-overflow: ellipsis;
+		.name {
+			color: $text;
+			@include font-size(14);
+			font-weight: 700;
+			max-height: 40px;
+			overflow: hidden;
+			text-overflow: ellipsis;
 
-                &.actived {
-                    max-height: initial;
-                }
-            }
-        }
+			&.actived {
+				max-height: initial;
+			}
+		}
+	}
 
-        &.selected {
-            .file-item {
-                background: $light_background;
-            }
-        }
+	&.selected {
+		.file-item {
+			background: $light_background;
+		}
+	}
 
-        .icon-item {
-            text-align: center;
-            position: relative;
-            flex: 0 0 50px;
-            line-height: 0;
-            margin-right: 20px;
+	.icon-item {
+		text-align: center;
+		position: relative;
+		flex: 0 0 50px;
+		line-height: 0;
+		margin-right: 20px;
 
-            .folder-icon {
-                @include font-size(52);
+		.folder-icon {
+			@include font-size(52);
 
-                path {
-                    fill: $theme;
-                }
+			path {
+				fill: $theme;
+			}
 
-                &.is-deleted {
-                    path {
-                        fill: $dark_background;
-                    }
-                }
-            }
+			&.is-deleted {
+				path {
+					fill: $dark_background;
+				}
+			}
+		}
 
-            .file-icon {
-                @include font-size(45);
+		.file-icon {
+			@include font-size(45);
 
-                path {
-                    fill: #fafafc;
-                    stroke: #dfe0e8;
-                    stroke-width: 1;
-                }
-            }
+			path {
+				fill: #fafafc;
+				stroke: #dfe0e8;
+				stroke-width: 1;
+			}
+		}
 
-            .file-icon-text {
-                line-height: 1;
-                top: 40%;
-                @include font-size(11);
-                margin: 0 auto;
-                position: absolute;
-                text-align: center;
-                left: 0;
-                right: 0;
-                color: $theme;
-                font-weight: 600;
-                user-select: none;
-                max-width: 50px;
-                max-height: 20px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
+		.file-icon-text {
+			line-height: 1;
+			top: 40%;
+			@include font-size(11);
+			margin: 0 auto;
+			position: absolute;
+			text-align: center;
+			left: 0;
+			right: 0;
+			color: $theme;
+			font-weight: 600;
+			user-select: none;
+			max-width: 50px;
+			max-height: 20px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 
-            .image {
-                object-fit: cover;
-                user-select: none;
-                max-width: 100%;
-                border-radius: 5px;
-                width: 50px;
-                height: 50px;
-                pointer-events: none;
-            }
-        }
+		.image {
+			object-fit: cover;
+			user-select: none;
+			max-width: 100%;
+			border-radius: 5px;
+			width: 50px;
+			height: 50px;
+			pointer-events: none;
+		}
+	}
 
-        .file-item {
-            border: 2px dashed transparent;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            padding: 7px;
+	.file-item {
+		border: 2px dashed transparent;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding: 7px;
 
-            &.is-dragenter {
-                border: 2px dashed $theme;
-                border-radius: 8px;
-            }
+		&.is-dragenter {
+			border: 2px dashed $theme;
+			border-radius: 8px;
+		}
 
-            &:hover,
-            &.is-clicked {
-                border-radius: 8px;
-                background: $light_background;
+		&:hover,
+		&.is-clicked {
+			border-radius: 8px;
+			background: $light_background;
 
-                .item-name .name {
-                    color: $theme;
-                }
-            }
-        }
-    }
+			.item-name .name {
+				color: $theme;
+			}
+		}
+	}
+}
 
-    @media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: dark) {
+	.file-wrapper {
+		.icon-item {
+			.file-icon {
+				path {
+					fill: $dark_mode_foreground;
+					stroke: #2f3c54;
+				}
+			}
 
-        .file-wrapper {
+			.folder-icon {
+				&.is-deleted {
+					path {
+						fill: lighten($dark_mode_foreground, 5%);
+					}
+				}
+			}
+		}
 
-            .icon-item {
-                .file-icon {
+		.file-item {
+			&:hover,
+			&.is-clicked {
+				background: $dark_mode_foreground;
 
-                    path {
-                        fill: $dark_mode_foreground;
-                        stroke: #2F3C54;
-                    }
-                }
+				.file-icon {
+					path {
+						fill: $dark_mode_background;
+					}
+				}
+			}
+		}
 
-                .folder-icon {
+		.item-name {
+			.name {
+				color: $dark_mode_text_primary;
+			}
 
-                    &.is-deleted {
-                        path {
-                            fill: lighten($dark_mode_foreground, 5%);
-                        }
-                    }
-                }
-            }
-
-
-            .file-item {
-
-                &:hover,
-                &.is-clicked {
-                    background: $dark_mode_foreground;
-
-                    .file-icon {
-
-                        path {
-                            fill: $dark_mode_background;
-                        }
-                    }
-                }
-            }
-
-            .item-name {
-
-                .name {
-                    color: $dark_mode_text_primary;
-                }
-
-                .item-size,
-                .item-length {
-                    color: $dark_mode_text_secondary;
-                }
-            }
-        }
-    }
-</style>
+			.item-size,
+			.item-length {
+				color: $dark_mode_text_secondary;
+			}
+		}
+	}
+}
+</style>

resources/js/components/FilesView/FilePreview.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="canBePreview" class="preview">
-        <img v-if="fileInfoDetail.type == 'image'" :src="fileInfoDetail.thumbnail" :alt="fileInfoDetail.name" />
+        <img v-if="fileInfoDetail.type == 'image' && fileInfoDetail.thumbnail" :src="fileInfoDetail.thumbnail" :alt="fileInfoDetail.name" />
         <audio v-else-if="fileInfoDetail.type == 'audio'" :src="fileInfoDetail.file_url" controlsList="nodownload" controls></audio>
         <video v-else-if="fileInfoDetail.type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
             <source :src="fileInfoDetail.file_url" type="video/mp4">

resources/js/components/FilesView/FilePreviewActions.vue

@@ -0,0 +1,78 @@
+<template>
+	<div v-if="filteredFiles.length > 1">
+        <div @click.prevent="prev" class="prev">
+		    <chevron-left-icon size="17"></chevron-left-icon>
+        </div>
+
+        <div @click.prevent="next" class="next">
+		    <chevron-right-icon size="17"></chevron-right-icon>
+        </div>
+	</div>
+</template>
+
+<script>
+import { events } from '@/bus'
+import { mapGetters } from 'vuex'
+import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
+export default {
+	name: 'FilePreviewActions',
+	components: {
+		ChevronLeftIcon,
+		ChevronRightIcon
+	},
+	computed: {
+		...mapGetters(['fileInfoDetail', 'data']),
+
+		filteredFiles() {
+			let filteredData = []
+			this.data.filter((element) => {
+				if (element.type == this.fileInfoDetail.type) {
+					filteredData.push(element)
+				}
+			})
+			return filteredData
+		}
+	},
+
+	methods: {
+		next: function() {
+			events.$emit('filePreviewAction:next')
+		},
+		prev: function() {
+			events.$emit('filePreviewAction:prev')
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@assets/vue-file-manager/_variables';
+.prev,
+.next {
+	cursor: pointer;
+	position: absolute;
+	top: 53.5%;
+	display: flex;
+	justify-content: center;
+	color: $text;
+	border-radius: 50%;
+	text-decoration: none;
+	user-select: none;
+	filter: drop-shadow(0px 1px 0 rgba(255, 255, 255, 1));
+    padding: 10px;
+}
+.next {
+	right: 0;
+}
+.prev {
+	left: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+	.prev,
+	.next {
+		color: $light-text;
+		filter: drop-shadow(0px 1px 0 rgba(17, 19, 20, 1));
+	}
+}
+</style>