opensem/resources/views/load/form/upload/fileinput.blade.php

@if (!defined('LOAD_FILEINPUT'))
    @push('css')
        <link rel="stylesheet" href="/assets/plugins/bootstrap-fileinput/css/fileinput.min.css">
    @endpush
    @push('scripts')
        <script src="/assets/plugins/bootstrap-fileinput/js/fileinput.min.js"></script>
        @if (App::getLocale() !== 'en')
            <script src="/assets/plugins/bootstrap-fileinput/js/locales/{{ App::getLocale() }}.js"></script>
            <script>
                $.fn.fileinput.defaults.language = '{{ App::getLocale() }}';
            </script>
        @endif
        @component('boilerplate::minify')
            <script>
                function UploadInit(sel, options, callbackUploaded) {
                    // console.log(options);
                    var selector = (typeof(sel) == 'undefined') ? '.fileinput' : sel;
                    $(selector).fileinput(options)
                        .on("filebatchselected", function(event, files) {
                            $(selector).fileinput("upload");
                        }).on('fileuploaded', function(event, data, previewId, index, fileId) {
                            // console.log('File uploaded', previewId, index, fileId);
                            var file = data.files[0];
                            // console.log(file);
                            var response = data.response.initialPreviewConfig.extra;
                            // console.log(response);

                            response.model = $(this).data('model');

                            // console.log(response);
                            if (typeof(callbackUploaded) !== 'undefined') {
                                // console.log('Callback');
                                eval(callbackUploaded);
                            }
                        }).on('filebatchuploadcomplete', function(event, preview, config, tags, extraData) {
                            console.log('File Batch Uploaded', preview, config, tags, extraData);
                        }).on('filebatchuploadsuccess', function(event, data) {
                            console.log('File batch upload success');
                            console.log(data);
                        }).on('fileuploaderror', function(event, data, msg) {
                            console.log('File upload error');
                            console.log(data);
                            console.log(msg);
                        });
                }

                function UploadOptions(options) {
                    return {
                        allowedFileExtensions: (typeof(options.allowedFileExtensions) == 'undefined') ? ['doc', 'docx', 'jpg',
                            'jpeg', 'png', 'xls', 'xlsx', 'pdf'
                        ] : options.allowedFileExtensions,
                        browseOnZoneClick: (typeof(options.browseOnZoneClick) == 'undefined') ? true : options.browseOnZoneClick,
                        dropZoneEnabled: (typeof(options.dropZoneEnabled) == 'undefined') ? false : options.dropZoneEnabled,
                        initialPreview: (typeof(options.initialPreview) == 'undefined') ? false : options.initialPreview,
                        initialPreviewAsData: (typeof(options.initialPreviewAsData) == 'undefined') ? false : options
                            .initialPreviewAsData,
                        maxFilesize: (typeof(options.maxFilesize) == 'undefined') ? false : options.maxFilesize,
                        overwriteInitial: (typeof(options.overwriteInitial) == 'undefined') ? false : options.overwriteInitial,
                        showCaption: (typeof(options.showCaption) == 'undefined') ? true : options.showCaption,
                        showPreview: (typeof(options.showPreview) == 'undefined') ? true : options.showPreview,
                        showRemove: (typeof(options.showRemove) == 'undefined') ? false : options.showRemove,
                        showUpload: (typeof(options.showUpload) == 'undefined') ? false : options.showUpload,
                        showUploadStats: (typeof(options.showUploadStats) == 'undefined') ? true : options.showUploadStats,
                        theme: (typeof(options.theme) == 'undefined') ? 'fas' : options.theme,
                        uploadAsync: (typeof(options.uploadAsync) == 'undefined') ? false : options.uploadAsync,
                    };
                }

                function initUpload(sel, options, callbackUploaded) {
                    UploadInit(sel, UploadOptions(options), callbackUploaded);
                }

                function initUploadMultiple(sel, options, callbackUploaded) {
                    UploadInit(sel, Object.assign({}, UploadOptions({
                        uploadUrl: "/site/test-upload",
                        enableResumableUpload: true,
                        initialPreviewAsData: true,
                        deleteUrl: '/upload',
                        dropZoneEnabled: true,
                        overwriteInitial: false,
                        showCaption: false,
                        showPreview: true,
                        showRemove: true,
                        showUpload: false,
                        uploadAsync: true,
                        maxFileCount: 5,
                    }), options), callbackUploaded);
                }

                function initRowUpload(sel, options, callbackUploaded) {
                    UploadInit(sel, Object.assign({}, UploadOptions({
                        showCaption: true,
                        showPreview: false,
                        showRemove: true,
                        uploadAsync: true,
                    }), options), callbackUploaded);
                }

                function initPdfUpload(sel, options, callbackUploaded) {
                    UploadInit(sel, Object.assign({}, UploadOptions({
                        allowedFileExtensions: ['pdf'],
                        showCaption: false,
                        dropZoneEnabled: false,
                        showUpload: false,
                    }), options), callbackUploaded);
                }

                function initUploadImage(image, sel) {
                    var selector = (typeof(sel) == 'undefined') ? '.fileinput' : sel;
                    var imgs = image ? [image] : false;
                    initFileInputImage(imgs, selector);

                    $('.img-delete').click(function() {
                        $container = $(this).parents('.row');
                        // console.log($container);
                        $(this).closest('.row').find('.uploader-input').toggleClass('d-none');
                        $(this).closest('.row').find('img').toggleClass('d-none');
                        $(this).toggleClass('d-none');
                    });
                }

                function initFileInputImage(images, sel) {
                    UploadInit(sel, {
                        allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif'],
                        overwriteInitial: true,
                        showPreview: true,
                        showUpload: false,
                        maxFileSize: 10000,
                        initialPreview: images,
                        initialPreviewAsData: false,
                        theme: 'fas',
                    });
                }

                function uploadShowImage(id, image) {
                    $('#' + id + '_preview').toggleClass('d-none');
                    $('#' + id + '_preview').find('img').attr('src', image);
                    $('#' + id + '_uploader').toggleClass('d-none');
                }
            </script>
        @endcomponent
    @endpush
    @php(define('LOAD_FILEINPUT', true))
@endif