¨4.0.1¨

2023-12-03 14:07:47 +00:00
parent c08b36d1b6
commit f35052522d
1112 changed files with 43019 additions and 24987 deletions
--- a/Modules/Media/Admin/MediaTable.php
+++ b/Modules/Media/Admin/MediaTable.php
@@ -3,6 +3,8 @@
 namespace Modules\Media\Admin;

 use Modules\Admin\Ui\AdminTable;
+use Illuminate\Http\JsonResponse;
+use Yajra\DataTables\Exceptions\Exception;

 class MediaTable extends AdminTable
 {
@@ -11,12 +13,14 @@ class MediaTable extends AdminTable
     *
     * @var array
     */
-    protected $rawColumns = ['action'];
+    protected array $rawColumns = ['action'];
+

    /**
     * Make table response for the resource.
     *
-     * @return \Illuminate\Http\JsonResponse
+     * @return JsonResponse
+     * @throws Exception
     */
    public function make()
    {
--- a/Modules/Media/Database/Migrations/2014_10_26_162751_create_files_table.php
+++ b/Modules/Media/Database/Migrations/2014_10_26_162751_create_files_table.php
@@ -26,6 +26,7 @@ class CreateFilesTable extends Migration
        });
    }

+
    /**
     * Reverse the migrations.
     *
--- a/Modules/Media/Database/Migrations/2015_02_27_105241_create_entity_files_table.php
+++ b/Modules/Media/Database/Migrations/2015_02_27_105241_create_entity_files_table.php
@@ -24,6 +24,7 @@ class CreateEntityFilesTable extends Migration
        });
    }

+
    /**
     * Reverse the migrations.
     *
--- a/Modules/Media/Eloquent/HasMedia.php
+++ b/Modules/Media/Eloquent/HasMedia.php
@@ -3,6 +3,7 @@
 namespace Modules\Media\Eloquent;

 use Modules\Media\Entities\File;
+use Illuminate\Database\Eloquent\Relations\MorphToMany;

 trait HasMedia
 {
@@ -11,42 +12,24 @@ trait HasMedia
     *
     * @return void
     */
-    public static function bootHasMedia()
+    public static function bootHasMedia(): void
    {
        static::saved(function ($entity) {
-            $entity->syncFiles(request('files', []));
+            if (method_exists($entity, 'extractMediaFromRequest')) {
+                $entity->syncFiles($entity->extractMediaFromRequest() ?? []);
+            } else {
+                $entity->syncFiles(request('files', []));
+            }
        });
    }

-    /**
-     * Get all of the files for the entity.
-     *
-     * @return \Illuminate\Database\Eloquent\Relations\MorphToMany
-     */
-    public function files()
-    {
-        return $this->morphToMany(File::class, 'entity', 'entity_files')
-            ->withPivot(['id', 'zone'])
-            ->withTimestamps();
-    }
-
-    /**
-     * Filter files by zone.
-     *
-     * @param string $zone
-     * @return \Illuminate\Database\Eloquent\Collection
-     */
-    public function filterFiles($zone)
-    {
-        return $this->files()->wherePivot('zone', $zone);
-    }

    /**
     * Sync files for the entity.
     *
     * @param array $files
     */
-    public function syncFiles($files = [])
+    public function syncFiles(array $files = []): void
    {
        $entityType = get_class($this);

@@ -54,7 +37,7 @@ trait HasMedia
            $syncList = [];

            foreach (array_wrap($fileIds) as $fileId) {
-                if (! empty($fileId)) {
+                if (!empty($fileId)) {
                    $syncList[$fileId]['zone'] = $zone;
                    $syncList[$fileId]['entity_type'] = $entityType;
                }
@@ -64,4 +47,30 @@ trait HasMedia
            $this->filterFiles($zone)->attach($syncList);
        }
    }
+
+
+    /**
+     * Filter files by zone.
+     *
+     * @param string $zone
+     *
+     * @return MorphToMany
+     */
+    public function filterFiles(string|array $zones): MorphToMany
+    {
+        return $this->files()->wherePivotIn('zone', array_wrap($zones));
+    }
+
+
+    /**
+     * Get all the files for the entity.
+     *
+     * @return MorphToMany
+     */
+    public function files(): MorphToMany
+    {
+        return $this->morphToMany(File::class, 'entity', 'entity_files')
+            ->withPivot(['id', 'zone'])
+            ->withTimestamps();
+    }
 }
--- a/Modules/Media/Entities/File.php
+++ b/Modules/Media/Entities/File.php
@@ -4,6 +4,7 @@ namespace Modules\Media\Entities;

 use Modules\Media\IconResolver;
 use Modules\User\Entities\User;
+use Illuminate\Http\JsonResponse;
 use Modules\Media\Admin\MediaTable;
 use Modules\Support\Eloquent\Model;
 use Illuminate\Support\Facades\Storage;
@@ -24,6 +25,7 @@ class File extends Model
     */
    protected $visible = ['id', 'filename', 'path'];

+
    /**
     * Perform any actions required after the model boots.
     *
@@ -36,6 +38,7 @@ class File extends Model
        });
    }

+
    /**
     * Get the user that uploaded the file.
     *
@@ -46,19 +49,22 @@ class File extends Model
        return $this->belongsTo(User::class);
    }

+
    /**
     * Get the file's path.
     *
     * @param string $path
+     *
     * @return string|null
     */
    public function getPathAttribute($path)
    {
-        if (! is_null($path)) {
+        if (!is_null($path)) {
            return Storage::disk($this->disk)->url($path);
        }
    }

+
    /**
     * Get file's real path.
     *
@@ -66,11 +72,12 @@ class File extends Model
     */
    public function realPath()
    {
-        if (! is_null($this->attributes['path'])) {
+        if (!is_null($this->attributes['path'])) {
            return Storage::disk($this->disk)->path($this->attributes['path']);
        }
    }

+
    /**
     * Determine if the file type is image.
     *
@@ -81,6 +88,7 @@ class File extends Model
        return strtok($this->mime, '/') === 'image';
    }

+
    /**
     * Get the file's icon.
     *
@@ -91,15 +99,16 @@ class File extends Model
        return IconResolver::resolve($this->mime);
    }

+
    /**
     * Get table data for the resource
     *
-     * @return \Illuminate\Http\JsonResponse
+     * @return JsonResponse
     */
    public function table($request)
    {
        $query = $this->newQuery()
-            ->when(! is_null($request->type) && $request->type !== 'null', function ($query) use ($request) {
+            ->when(!is_null($request->type) && $request->type !== 'null', function ($query) use ($request) {
                $query->where('mime', 'LIKE', "{$request->type}/%");
            });

--- a/Modules/Media/Http/Controllers/Admin/FileManagerController.php
+++ b/Modules/Media/Http/Controllers/Admin/FileManagerController.php
@@ -2,12 +2,14 @@

 namespace Modules\Media\Http\Controllers\Admin;

+use Illuminate\Http\Response;
+
 class FileManagerController
 {
    /**
-     * Display a listing of the resource..
+     * Display a listing of the resource.
     *
-     * @return \Illuminate\Http\Response
+     * @return Response
     */
    public function index()
    {
--- a/Modules/Media/Http/Controllers/Admin/MediaController.php
+++ b/Modules/Media/Http/Controllers/Admin/MediaController.php
@@ -2,6 +2,7 @@

 namespace Modules\Media\Http\Controllers\Admin;

+use Illuminate\Http\Response;
 use Modules\Media\Entities\File;
 use Illuminate\Support\Facades\Storage;
 use Modules\Admin\Traits\HasCrudActions;
@@ -32,11 +33,13 @@ class MediaController
     */
    protected $viewPath = 'media::admin.media';

+
    /**
     * Store a newly created media in storage.
     *
-     * @param \Modules\Media\Http\Requests\UploadMediaRequest $request
-     * @return \Illuminate\Http\Response
+     * @param UploadMediaRequest $request
+     *
+     * @return Response
     */
    public function store(UploadMediaRequest $request)
    {
@@ -54,13 +57,15 @@ class MediaController
        ]);
    }

+
    /**
     * Remove the specified resources from storage.
     *
     * @param string $ids
-     * @return \Illuminate\Http\Response
+     *
+     * @return Response
     */
-    public function destroy($ids)
+    public function destroy(string $ids)
    {
        File::find(explode(',', $ids))->each->delete();
    }
--- a/Modules/Media/IconResolver.php
+++ b/Modules/Media/IconResolver.php
@@ -23,10 +23,12 @@ class IconResolver
        'file' => 'fa-file-o',
    ];

+
    /**
     * Resolve icon for the given mime type.
     *
     * @param string $mime
+     *
     * @return string
     */
    public static function resolve($mime)
@@ -35,7 +37,7 @@ class IconResolver
            return static::$icons['file'];
        }

-        list($firstHint, $secondHint) = explode('/', $mime);
+        [$firstHint, $secondHint] = explode('/', $mime);

        if (array_key_exists($firstHint, static::$icons)) {
            return static::$icons[$firstHint];
--- a/Modules/Media/Providers/MediaServiceProvider.php
+++ b/Modules/Media/Providers/MediaServiceProvider.php
@@ -2,15 +2,10 @@

 namespace Modules\Media\Providers;

-use Illuminate\Support\Facades\View;
-use Modules\Support\Traits\AddsAsset;
 use Illuminate\Support\ServiceProvider;
-use Modules\Admin\Http\ViewComposers\AssetsComposer;

 class MediaServiceProvider extends ServiceProvider
 {
-    use AddsAsset;
-
    /**
     * Bootstrap any application services.
     *
@@ -18,8 +13,5 @@ class MediaServiceProvider extends ServiceProvider
     */
    public function boot()
    {
-        View::composer('media::admin.file_manager.index', AssetsComposer::class);
-
-        $this->addAdminAssets('admin.(media|file_manager).(index|edit)', ['admin.media.css', 'admin.media.js']);
    }
 }
--- a/Modules/Media/Resources/assets/admin/js/MediaPicker.js
+++ b/Modules/Media/Resources/assets/admin/js/MediaPicker.js
@@ -1,14 +1,16 @@
-import '../sass/media-picker.scss';
+import "../sass/media-picker.scss";

 export default class {
    constructor(options) {
-        this.options = _.merge({
-            type: null,
-            multiple: false,
-            route: 'admin.file_manager.index',
-            title: trans('media::media.file_manager.title'),
-            message: trans('media::messages.image_has_been_added'),
-        }, options);
+        this.options = _.merge(
+            {
+                type: null,
+                multiple: false,
+                route: "admin.file_manager.index",
+                title: trans("media::media.file_manager.title"),
+            },
+            options
+        );

        this.events = {};
        this.frame = this.getFrame();
@@ -27,78 +29,113 @@ export default class {
            multiple: this.options.multiple,
        });

-        return $(`<iframe class="file-manager-iframe" frameborder="0" src="${src}"></iframe>`);
+        return $(
+            `<iframe class="file-manager-iframe" frameborder="0" src="${src}"></iframe>`
+        );
    }

    appendModalToBody() {
-        if ($('.media-picker-modal').length === 1) {
+        if ($(".media-picker-modal").length === 1) {
            return;
        }

-        $('body').append(this.getModal());
+        $("body").append(this.getModal());
+
+        this.closeModalOnClickDismiss();
+        this.closeModalOnClickOutside();
    }

    openFrame() {
        this.showModal();

-        this.frame.on('load', () => {
+        this.frame.on("load", () => {
            this.selectMedia();
        });
    }

    showModal() {
-        let modal = $('.media-picker-modal').modal('show');
+        let modal = $(".media-picker-modal").modal("show");

        this.setFrameHeight();
+        this.setFrameHeightOnWindowResize();
        this.setModalTitle(modal);
        this.setModalBody(modal);
        this.closeModalOnEsc(modal);
    }

    setFrameHeight() {
-        this.frame.css('height', window.innerHeight * 0.8);
+        this.frame.css("height", window.innerHeight * 0.8);
+    }
+
+    setFrameHeightOnWindowResize() {
+        window.addEventListener("resize", () => {
+            this.setFrameHeight();
+        });
    }

    setModalTitle(modal) {
-        modal.find('.modal-title').text(this.options.title);
+        modal.find(".modal-title").text(this.options.title);
    }

    setModalBody(modal) {
-        modal.find('.modal-body').html(this.frame);
+        modal.find(".modal-body").html(this.frame);
    }

    closeModalOnEsc(modal) {
-        $(document).on('keydown', (e) => {
-            if (e.keyCode === 27) {
-                modal.modal('hide');
+        $(document).on("keydown", (e) => {
+            if (e.key === "Escape") {
+                modal.modal("hide");
            }
        });

-        this.frame.on('load keydown', () => {
-            this.frame.contents().on('keydown', (e) => {
-                if (e.keyCode === 27) {
-                    modal.modal('hide');
+        this.frame.on("load keydown", () => {
+            this.frame.contents().on("keydown", (e) => {
+                if (e.key === "Escape") {
+                    modal.modal("hide");
                }
            });
        });
    }

-    selectMedia() {
-        this.frame.contents().find('.table').on('click', '.select-media', (e) => {
-            e.preventDefault();
+    closeModalOnClickDismiss() {
+        const modal = $(".media-picker-modal");

-            this.events['select'](e.currentTarget.dataset);
-
-            if (this.options.multiple) {
-                if (this.options.message) {
-                    notify('success', this.options.message, { context: this.frame.contents() });
-                }
-            } else {
-                $('.media-picker-modal').modal('hide');
-            }
+        modal.find('[data-dismiss="modal"]').on("click", () => {
+            modal.modal("hide");
        });
    }

+    closeModalOnClickOutside() {
+        const modal = $(".media-picker-modal");
+
+        modal.find(".modal-content").on("click", (e) => {
+            e.stopPropagation();
+        });
+
+        modal.on("click", () => {
+            modal.modal("hide");
+        });
+    }
+
+    selectMedia() {
+        this.frame
+            .contents()
+            .find(".table")
+            .on("click", ".select-media", (e) => {
+                e.preventDefault();
+
+                this.events["select"](e.currentTarget.dataset);
+
+                if (this.options.multiple) {
+                    $(e.currentTarget)
+                        .attr("disabled", true)
+                        .html(`<i class="fa fa-check" aria-hidden="true"></i>`);
+                } else {
+                    $(".media-picker-modal").modal("hide");
+                }
+            });
+    }
+
    getModal() {
        return `
            <div class="media-picker-modal modal fade" role="dialog">
@@ -107,7 +144,8 @@ export default class {
                        <div class="row">
                            <div class="modal-header">
                                <a type="button" class="close" data-dismiss="modal">&times;</a>
-                                <h4 class="modal-title"></h4>
+
+                                <h5 class="modal-title"></h5>
                            </div>

                            <div class="modal-body"></div>
--- a/Modules/Media/Resources/assets/admin/sass/main.scss
+++ b/Modules/Media/Resources/assets/admin/sass/main.scss
@@ -1,16 +1,16 @@
-@import '~dropzone/dist/dropzone';
+@import "dropzone/dist/dropzone";

 .dropzone {
-    border: 1px dashed #d2d6de;
+    border: 2px dashed #d2d6de;
    min-height: 232px;
-    margin-bottom: 20px;
+    margin-bottom: 25px;

    &.dz-clickable {
        border-radius: 3px;
    }

    .dz-message {
-        color: #646C7F;
+        color: #646c7f;
        font-size: 20px;
        margin-top: 82px;
    }
@@ -21,7 +21,7 @@
 }

 .file-icon {
-	font-size: 20px;
+    font-size: 20px;
 }

 .main-file {
@@ -52,49 +52,30 @@
 }

 .single-image {
-	padding: 10px;
-	background: #f1f1f1;
-	margin-top: 15px;
+    padding: 10px;
+    background: #f1f1f1;
+    margin-top: 15px;
    display: inline-block;
    border-radius: 3px;
    vertical-align: bottom;
-
-    > .image-holder {
-        cursor: default;
-        margin: 0;
-        border-radius: 3px;
-    }
-}
-
-.multiple-images-wrapper {
-    margin-top: 15px;
-
-    h4 {
-        font-weight: 500;
-        margin-bottom: 10px;
-    }
-}
-
-.multiple-images {
-	overflow: hidden;
-	padding: 10px 10px 0 10px;
-	background: #f1f1f1;
-	margin-top: 15px;
-    border-radius: 3px;
 }

 .image-holder {
-	position: relative;
-	float: left;
-	height: 125px;
-	width: 125px;
-	overflow: hidden;
-	background: #fff;
-	margin: 0 10px 10px 0;
-	border: 1px solid #d2d6de;
+    position: relative;
+    float: left;
+    height: 125px;
+    width: 125px;
+    overflow: hidden;
+    background: #fff;
+    margin: 0;
+    border: 1px solid #d2d6de;
    border-radius: 3px;
-	cursor: move;
    z-index: 0;
+    cursor: pointer;
+
+    .placeholder-image {
+        max-width: 80%;
+    }

    > i {
        position: absolute;
@@ -102,7 +83,7 @@
        color: #d9d9d9;
        top: 50%;
        left: 50%;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%, -50%);
        z-index: -1;
    }

@@ -118,31 +99,31 @@

    > .remove-image {
        position: absolute;
-        top: -2px;
-        right: 4px;
+        top: 2px;
+        right: 6px;
        color: #ffffff;
        padding: 0;
        background: transparent;
-        transition: 200ms;
+        transition: 150ms;
        visibility: hidden;
        opacity: 0;
        font-size: 18px;
-        font-family: 'FontAwesome';
+        font-family: "FontAwesome";
        -webkit-text-stroke: 1px #737881;
-           -moz-text-stroke: 1px #737881;
-            -ms-text-stroke: 1px #737881;
-             -o-text-stroke: 1px #737881;
+        -moz-text-stroke: 1px #737881;
+        -ms-text-stroke: 1px #737881;
+        -o-text-stroke: 1px #737881;
        z-index: 2;

        &:focus {
            border-color: transparent;
            -webkit-box-shadow: none;
-                    box-shadow: none;
+            box-shadow: none;
        }

        &:active {
            -webkit-box-shadow: none;
-                    box-shadow: none;
+            box-shadow: none;
        }

        &::after {
--- a/Modules/Media/Resources/assets/admin/sass/media-picker.scss
+++ b/Modules/Media/Resources/assets/admin/sass/media-picker.scss
@@ -1,10 +1,10 @@
 .file-manager-iframe {
-	width: 100%;
-	vertical-align: bottom;
+    width: 100%;
+    vertical-align: bottom;
 }

 .file-manager {
-	background: #f9f9f9;
+    background: #f9f9f9;
    margin-top: 20px;
    overflow-x: auto;

@@ -14,10 +14,12 @@

    .dataTable {
        .btn {
-            padding: 10px 16px 8px;
+            padding: 9px 16px;
+        }

+        .select-media {
            > i {
-                margin-top: 5px;
+                -webkit-text-stroke: 1px #f1f1f1;
            }
        }
    }
@@ -25,7 +27,7 @@

 .media-picker-modal {
    padding-right: 0 !important;
-    z-index: 1050;
+    z-index: 1150;

    > i {
        margin-right: 5px;
@@ -44,13 +46,13 @@
    }

    .modal-header {
-        padding: 6px 15px;
+        padding: 10px 15px;
        background: #f1f1f1;

        > .close {
-            margin-top: 5px;
+            margin-top: 3px;
            -webkit-text-stroke: 0;
-            transition: 200ms;
+            transition: 150ms;
        }
    }

@@ -62,7 +64,7 @@
    .modal.fade .modal-dialog {
        transform: scale(0.8);
        opacity: 0;
-        transition: 200ms ease-in-out;
+        transition: 150ms ease-in-out;

        &.in .modal-dialog {
            transform: scale(1);
@@ -72,7 +74,7 @@
 }

@media screen and (max-width: 767px) {
-	.media-picker-modal .modal-dialog {
-		margin: 10px;
-	}
+    .media-picker-modal .modal-dialog {
+        margin: 10px;
+    }
 }
--- a/Modules/Media/Resources/lang/en/media.php
+++ b/Modules/Media/Resources/lang/en/media.php
@@ -14,6 +14,6 @@ return [
    ],
    'file_manager' => [
        'title' => 'File Manager',
-        'select_this_file' => 'Select this file',
+        'insert' => 'Insert',
    ],
 ];
--- a/Modules/Media/Resources/lang/en/messages.php
+++ b/Modules/Media/Resources/lang/en/messages.php
@@ -1,5 +1,5 @@
 <?php

 return [
-    'image_has_been_added' => 'Image has been added.',
+    'image_has_been_added' => 'Image has been added',
 ];
--- a/Modules/Media/Resources/views/admin/file_manager/index.blade.php
+++ b/Modules/Media/Resources/views/admin/file_manager/index.blade.php
@@ -9,21 +9,26 @@

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:600|Roboto" rel="stylesheet">

-    @foreach ($assets->allCss() as $css)
-        <link media="all" type="text/css" rel="stylesheet" href="{{ v($css) }}">
-    @endforeach
+    @vite([
+        'Modules/Admin/Resources/assets/sass/main.scss',
+        'Modules/Admin/Resources/assets/js/main.js',
+        'Modules/Admin/Resources/assets/js/app.js',
+        'Modules/Media/Resources/assets/admin/sass/main.scss',
+        'Modules/Media/Resources/assets/admin/js/main.js'
+    ])

    @include('admin::partials.globals')
 </head>

-<body class="file-manager">
+<body class="file-manager {{ is_rtl() ? 'rtl' : 'ltr' }}">
    <div class="container">
-        @include('media::admin.media.partials.uploader')
-
        <div class="row">
            <div class="col-md-12">
-                <div class="box box-primary">
-                    @include('media::admin.media.partials.table')
+                <div class="box">
+                    <div class="box-body">
+                        @include('media::admin.media.partials.uploader')
+                        @include('media::admin.media.partials.table')
+                    </div>
                </div>
            </div>
        </div>
@@ -33,14 +38,10 @@

    @include('admin::partials.confirmation_modal')

-    @foreach ($assets->allJs() as $js)
-        <script src="{{ v($js) }}"></script>
-    @endforeach
-
-    <script>
+    <script type="module">
        DataTable.setRoutes('.file-manager .table', {
-            index: {
-                name: 'admin.media.index',
+            table: {
+                name: 'admin.media.table',
                params: { type: '{{ $type }}' }
            },
            destroy: 'admin.media.destroy',
--- a/Modules/Media/Resources/views/admin/media/index.blade.php
+++ b/Modules/Media/Resources/views/admin/media/index.blade.php
@@ -7,12 +7,11 @@
@endcomponent

@section('content')
-    @include('media::admin.media.partials.uploader')
-
-    <div class="box box-primary">
-        <div class="box-header"></div>
-
-        @include('media::admin.media.partials.table')
+    <div class="box m-b-0">
+        <div class="box-body">
+            @include('media::admin.media.partials.uploader')
+            @include('media::admin.media.partials.table')
+        </div>
    </div>
@endsection

@@ -23,8 +22,15 @@
    </dl>
@endpush

+@push('globals')
+    @vite([
+        'Modules/Media/Resources/assets/admin/sass/main.scss',
+        'Modules/Media/Resources/assets/admin/js/main.js'
+    ])
+@endpush
+
@push('scripts')
-    <script>
+    <script type="module">
        Mousetrap.bind('u', function() {
            $('.dropzone').trigger('click');
        });
@@ -34,7 +40,7 @@
        });

        DataTable.setRoutes('#media-table .table', {
-            index: 'admin.media.index',
+            table: 'admin.media.table',
            destroy: 'admin.media.destroy',
        });

--- a/Modules/Media/Resources/views/admin/media/partials/table.blade.php
+++ b/Modules/Media/Resources/views/admin/media/partials/table.blade.php
@@ -1,4 +1,4 @@
-<div class="box-body index-table" id="media-table">
+<div class="index-table" id="media-table">
    @component('admin::components.table')
        @slot('thead')
            <tr>
--- a/Modules/Media/Resources/views/admin/media/partials/table/action.blade.php
+++ b/Modules/Media/Resources/views/admin/media/partials/table/action.blade.php
@@ -1,11 +1,11 @@
-<button type="button" class="btn btn-default select-media"
+<button
+    type="button"
+    class="btn btn-default select-media"
    data-id="{{ $file->id }}"
    data-path="{{ $file->path }}"
    data-filename="{{ $file->filename }}"
    data-type="{{ strtok($file->mime, '/') }}"
    data-icon="{{ $file->icon() }}"
-    data-toggle="tooltip"
-    title="{{ trans('media::media.file_manager.select_this_file') }}"
 >
-    <i class="fa fa-check-square-o"></i>
+    {{ trans('media::media.file_manager.insert') }}
 </button>
--- a/Modules/Media/Resources/views/admin/media/partials/uploader.blade.php
+++ b/Modules/Media/Resources/views/admin/media/partials/uploader.blade.php
@@ -4,14 +4,10 @@
    </script>
@endpush

-<div class="row">
-    <div class="col-md-12">
-        <form method="POST" class="dropzone">
-            {{ csrf_field() }}
+<form method="POST" class="dropzone">
+    {{ csrf_field() }}

-            <div class="dz-message needsclick">
-                {{ trans('media::media.drop_files_here') }}
-            </div>
-        </form>
+    <div class="dz-message needsclick">
+        {{ trans('media::media.drop_files_here') }}
    </div>
-</div>
+</form>
--- a/Modules/Media/Routes/admin.php
+++ b/Modules/Media/Routes/admin.php
@@ -20,6 +20,12 @@ Route::delete('media/{ids?}', [
    'middleware' => 'can:admin.media.destroy',
 ]);

+Route::get('media/index/table', [
+    'as' => 'admin.media.table',
+    'uses' => 'MediaController@table',
+    'middleware' => 'can:admin.media.index',
+]);
+
 Route::get('file-manager', [
    'uses' => 'FileManagerController@index',
    'as' => 'admin.file_manager.index',
--- a/Modules/Media/package.json
+++ b/Modules/Media/package.json
@@ -1,7 +1,8 @@
 {
    "name": "media-module",
    "private": true,
-    "devDependencies": {
-        "dropzone": "^5.4.0"
+    "devDependencies": {},
+    "dependencies": {
+        "dropzone": "^6.0.0-beta.2"
    }
 }