first upload all files

Modules/Media/Resources/assets/admin/js/ImagePicker.js

@@ -0,0 +1,79 @@
+import MediaPicker from './MediaPicker';
+
+export default class {
+    constructor() {
+        $('.image-picker').on('click', (e) => {
+            this.pickImage(e);
+        });
+
+        this.sortable();
+        this.removeImageEventListener();
+    }
+
+    pickImage(e) {
+        let inputName = e.currentTarget.dataset.inputName;
+        let multiple = e.currentTarget.hasAttribute('data-multiple');
+
+        let picker = new MediaPicker({ type: 'image', multiple });
+
+        picker.on('select', (file) => {
+            this.addImage(inputName, file, multiple, e.currentTarget);
+        });
+    }
+
+    addImage(inputName, file, multiple, target) {
+        let html = this.getTemplate(inputName, file);
+
+        if (multiple) {
+            let multipleImagesWrapper = $(target).next('.multiple-images');
+
+            multipleImagesWrapper.find('.image-holder.placeholder').remove();
+            multipleImagesWrapper.find('.image-list').append(html);
+        } else {
+            $(target).siblings('.single-image').html(html);
+        }
+    }
+
+    getTemplate(inputName, file) {
+        return $(`
+            <div class="image-holder">
+                <img src="${file.path}">
+                <button type="button" class="btn remove-image"></button>
+                <input type="hidden" name="${inputName}" value="${file.id}">
+            </div>
+        `);
+    }
+
+    sortable() {
+        let imageList = $('.image-list');
+
+        if (imageList.length > 0) {
+            Sortable.create(imageList[0], { animation: 150 });
+        }
+    }
+
+    removeImageEventListener() {
+        $('.image-holder-wrapper').on('click', '.remove-image', (e) => {
+            e.preventDefault();
+
+            let imageHolderWrapper = $(e.currentTarget).closest('.image-holder-wrapper');
+
+            if (imageHolderWrapper.find('.image-holder').length === 1) {
+                imageHolderWrapper.html(
+                    this.getImagePlaceholder(e.currentTarget.dataset.inputName)
+                );
+            }
+
+            $(e.currentTarget).parent().remove();
+        });
+    }
+
+    getImagePlaceholder(inputName) {
+        return `
+            <div class="image-holder placeholder cursor-auto">
+                <i class="fa fa-picture-o"></i>
+                <input type="hidden" name="${inputName}">
+            </div>
+        `;
+    }
+}

Modules/Media/Resources/assets/admin/js/MediaPicker.js

@@ -0,0 +1,120 @@
+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.events = {};
+        this.frame = this.getFrame();
+
+        this.appendModalToBody();
+        this.openFrame();
+    }
+
+    on(event, handler) {
+        this.events[event] = handler;
+    }
+
+    getFrame() {
+        let src = route(this.options.route, {
+            type: this.options.type,
+            multiple: this.options.multiple,
+        });
+
+        return $(`<iframe class="file-manager-iframe" frameborder="0" src="${src}"></iframe>`);
+    }
+
+    appendModalToBody() {
+        if ($('.media-picker-modal').length === 1) {
+            return;
+        }
+
+        $('body').append(this.getModal());
+    }
+
+    openFrame() {
+        this.showModal();
+
+        this.frame.on('load', () => {
+            this.selectMedia();
+        });
+    }
+
+    showModal() {
+        let modal = $('.media-picker-modal').modal('show');
+
+        this.setFrameHeight();
+        this.setModalTitle(modal);
+        this.setModalBody(modal);
+        this.closeModalOnEsc(modal);
+    }
+
+    setFrameHeight() {
+        this.frame.css('height', window.innerHeight * 0.8);
+    }
+
+    setModalTitle(modal) {
+        modal.find('.modal-title').text(this.options.title);
+    }
+
+    setModalBody(modal) {
+        modal.find('.modal-body').html(this.frame);
+    }
+
+    closeModalOnEsc(modal) {
+        $(document).on('keydown', (e) => {
+            if (e.keyCode === 27) {
+                modal.modal('hide');
+            }
+        });
+
+        this.frame.on('load keydown', () => {
+            this.frame.contents().on('keydown', (e) => {
+                if (e.keyCode === 27) {
+                    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) {
+                if (this.options.message) {
+                    notify('success', this.options.message, { context: this.frame.contents() });
+                }
+            } else {
+                $('.media-picker-modal').modal('hide');
+            }
+        });
+    }
+
+    getModal() {
+        return `
+            <div class="media-picker-modal modal fade" role="dialog">
+                <div class="modal-dialog clearfix">
+                    <div class="modal-content col-md-10 col-sm-11 clearfix">
+                        <div class="row">
+                            <div class="modal-header">
+                                <a type="button" class="close" data-dismiss="modal">&times;</a>
+                                <h4 class="modal-title"></h4>
+                            </div>
+
+                            <div class="modal-body"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}

Modules/Media/Resources/assets/admin/js/Uploader.js

@@ -0,0 +1,34 @@
+import Dropzone from 'dropzone';
+
+export default class {
+    constructor() {
+        Dropzone.autoDiscover = false;
+
+        this.dropzone = new Dropzone('.dropzone', {
+            url: route('admin.media.store'),
+            autoProcessQueue: true,
+            maxFilesize: FleetCart.maxFileSize,
+        });
+
+        this.dropzone.on('sending', this.sending);
+        this.dropzone.on('success', this.success);
+        this.dropzone.on('error', this.error);
+    }
+
+    sending(file, xhr) {
+        xhr.timeout = 3600000;
+
+        $('.alert-danger').remove();
+    }
+
+    success() {
+        if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
+            setTimeout(DataTable.reload, 1000, '#media-table .table');
+        }
+    }
+
+    error(file, response) {
+        $('.dz-progress').css('z-index', 1);
+        $(file.previewElement).find('.dz-error-message').text(response.message);
+    }
+}

Modules/Media/Resources/assets/admin/js/main.js

@@ -0,0 +1,13 @@
+import ImagePicker from './ImagePicker';
+import MediaPicker from './MediaPicker';
+import Uploader from './Uploader';
+
+window.MediaPicker = MediaPicker;
+
+if ($('.image-picker').length !== 0) {
+    new ImagePicker();
+}
+
+if ($('.dropzone').length !== 0) {
+    new Uploader();
+}

Modules/Media/Resources/assets/admin/sass/main.scss

@@ -0,0 +1,161 @@
+@import '~dropzone/dist/dropzone';
+
+.dropzone {
+    border: 1px dashed #d2d6de;
+    min-height: 232px;
+    margin-bottom: 20px;
+
+    &.dz-clickable {
+        border-radius: 3px;
+    }
+
+    .dz-message {
+        color: #646C7F;
+        font-size: 20px;
+        margin-top: 82px;
+    }
+
+    .dz-preview .dz-progress .dz-upload {
+        background: #0068e1;
+    }
+}
+
+.file-icon {
+	font-size: 20px;
+}
+
+.main-file {
+    width: 100%;
+}
+
+.file-thumbnail {
+    float: left;
+    margin-right: 10px;
+
+    > .thumbnail-name {
+        text-align: center;
+    }
+}
+
+.media-picker-divider {
+    border-bottom: 1px solid #e9e9e9;
+    margin-bottom: 20px;
+}
+
+.single-image-wrapper {
+    padding-bottom: 20px;
+
+    h4 {
+        font-weight: 500;
+        margin-bottom: 10px;
+    }
+}
+
+.single-image {
+	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;
+    border-radius: 3px;
+	cursor: move;
+    z-index: 0;
+
+    > i {
+        position: absolute;
+        font-size: 60px;
+        color: #d9d9d9;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        z-index: -1;
+    }
+
+    > img {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        max-height: 100%;
+        max-width: 100%;
+        transform: translate(-50%, -50%);
+        z-index: 1;
+    }
+
+    > .remove-image {
+        position: absolute;
+        top: -2px;
+        right: 4px;
+        color: #ffffff;
+        padding: 0;
+        background: transparent;
+        transition: 200ms;
+        visibility: hidden;
+        opacity: 0;
+        font-size: 18px;
+        font-family: 'FontAwesome';
+        -webkit-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;
+        }
+
+        &:active {
+            -webkit-box-shadow: none;
+                    box-shadow: none;
+        }
+
+        &::after {
+            content: "\f00d";
+        }
+    }
+
+    &:hover > .remove-image {
+        visibility: visible;
+        opacity: 1;
+    }
+}
+
+.image-picker > i {
+    color: #737881;
+}

Modules/Media/Resources/assets/admin/sass/media-picker.scss

@@ -0,0 +1,78 @@
+.file-manager-iframe {
+	width: 100%;
+	vertical-align: bottom;
+}
+
+.file-manager {
+	background: #f9f9f9;
+    margin-top: 20px;
+    overflow-x: auto;
+
+    #notification-toast {
+        bottom: 0;
+    }
+
+    .dataTable {
+        .btn {
+            padding: 10px 16px 8px;
+
+            > i {
+                margin-top: 5px;
+            }
+        }
+    }
+}
+
+.media-picker-modal {
+    padding-right: 0 !important;
+    z-index: 1050;
+
+    > i {
+        margin-right: 5px;
+    }
+
+    .modal-dialog {
+        width: auto;
+        margin: 25px auto;
+    }
+
+    .modal-content {
+        margin: auto;
+        float: none;
+        border: 1px solid #d2d6de;
+        border-radius: 3px;
+    }
+
+    .modal-header {
+        padding: 6px 15px;
+        background: #f1f1f1;
+
+        > .close {
+            margin-top: 5px;
+            -webkit-text-stroke: 0;
+            transition: 200ms;
+        }
+    }
+
+    .modal-body {
+        background: #f9f9f9;
+        padding: 15px 0;
+    }
+
+    .modal.fade .modal-dialog {
+        transform: scale(0.8);
+        opacity: 0;
+        transition: 200ms ease-in-out;
+
+        &.in .modal-dialog {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+	.media-picker-modal .modal-dialog {
+		margin: 10px;
+	}
+}