solarai/resources/views/admin/board/gallery/create.blade.php

@extends('layouts.admin')

@section('content')
    <form id="writeForm" method="post" accept-charset="utf-8" enctype="multipart/form-data" action="{{ route('cms.board.store', null, false) }}" onsubmit="return false;">
    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
    <input type="hidden" name="mode" value="{{ $data->mode }}" />
    <input type="hidden" name="code" value="{{ $data->code }}" />
    <input type="hidden" name="board_id" value="{{ $data->board_id }}" />
    <input type="hidden" name="uid" value="{{ $data->uid }}" />
    <input type="hidden" name="category" value="{{ $data->category }}" />
    <div class="card card-default">
        <div class="card-body">
            <div class="form-group">
                <label for="input-subject">제목 입력</label>
                <input type="text" class="form-control" name="subject" id="input-subject" required value="{{ $data->subject }}" />
            </div>
            <div class="form-group">
                <label for="input-content">서브 타이틀</label>
                <textarea class="form-control autosize" name="content" id="input-content" rows="3">{{ $data->content }}</textarea>
            </div>
            <div class="form-group" style="position:relative;">
                <label for="form-control" id="fileBtn">이미지 추가</label>
                <span class="fileSize mobileNone">(<em id="fileSize">0</em>)</span>
                <div id="dropzone" class="frame-wrap clearfix">
                    <div id="dropzoneDesc" class="dropzone-desc">여기를 클릭하거나 파일을 마우스로 드래그하여 업로드할 수도있습니다.</div>
                    <input type="file" name="selectFiles[]" id="selectFiles" class="dropzone-file" multiple="multiple" accept="image/gif,image/jpeg,image/png" />
                    <div id="dropzoneList" class="dropzone-list">
                        <ul id="previewFiles" class="preview-images">
                            @if ($data->assets)
                                @foreach ($data->assets as $i => $asset)
                                    <li class="old-file" data-uid="{{ $asset->uid }}" data-size="{{ $asset->asset->size }}">
                                        <a href="{{ route('image', [$asset->uid], false) }}" data-fancybox="gallery"><img class="image-item" src="{{ route('image.thumbnail.rate', ['h100', $asset->uid], false) }}" alt="{{ $asset->uid }}" /></a>
                                        <img src="/assets/img/button/btn_delete.gif" class="image-del" alt="삭제" />
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer">
            <div class="row">
                <span>
                    <button type="submit" class="btn btn-success"><i class="fas fa-pen"></i> @if($data->mode == 'modify') 수정 @else 등록 @endif</button>
                    @if($data->mode == 'modify')
                        <a href="{{ route('cms.board.delete', null, false) }}" class="btn btn-secondary ml-2 btn-delete"><i class="far fa-trash-alt"></i> 삭제</a>
                    @endif
                </span>
                <span><a href="javascript:;" onclick="gotoList();" class="btn btn-primary btn-list ml-2"><i class="fas fa-list-alt"></i>  목록 </a></span>
            </div>
        </div>
    </div>
    </form>
@stop

@push('scripts')
    <script type="text/javascript">
        function gotoList() {
            window.location.href = '{{ route('cms.board.list', [$data->code], false) }}';
        }

        var fileIndex = 0; // 파일 번호
        var totalSize = 0; // 전체 파일용량
        var fileList = []; // 파일 목록
        var sizeList = []; // 파일용량 목록

        // 드래그앤드롭 파일 첨부
        function fileDropDown() {
            var dropzone = $("#dropzone");
            dropzone.on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
                dropzone.css({'background-color': '#FFEFEE', 'border': '1px dashed #999'});
            });
            dropzone.on('dragleave', function (e) {
                e.stopPropagation();
                e.preventDefault();
                dropzone.css({'background-color': '#F3F3F3', 'border': '1px solid #e5e5e5'});
            });
            dropzone.on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
                dropzone.css({'background-color': '#FFEFEE', 'border': '1px dashed #999'});
            });
            dropzone.on('drop', function (e) {
                e.preventDefault();
                dropzone.css({'background-color': '#F3F3F3', 'border': '1px solid #e5e5e5'});

                var files = e.originalEvent.dataTransfer.files;
                if (files != null) {
                    if (files.length < 1) {
                        console.log("파일이 선택되지 않았습니다.");
                        return false;
                    } else {
                        selectFiles(files);
                    }
                } else {
                    console.log("ERROR!!");
                }
            });
        }

        function toggleFileBox() {
            if ($('#previewFiles li').length > 0) {
                $('.dropzone-desc').hide();
                $('.dropzone-list').show();
            } else {
                $('.dropzone-desc').show();
                $('.dropzone-list').hide();
            }
        }

        function setFileSize() {
            var strSize = 0;
            if (!isNaN(totalSize)){
                strSize = getFileSize(totalSize);
            }

            $('#fileSize').html(strSize);
        }

        // 첨부파일 추가
        function addFile(fSource, fName, fSize, isImage) {
            if (isImage === -1) {
                return false;
            }

            var appendHtml = $('<li class="new-file" data-index="'+ fileIndex +'"></li>');
            $('#previewFiles').append(appendHtml);

            var reader = new FileReader();
            reader.onload = function(e) {
                appendHtml.append(
                    '<a href="'+ e.target.result +'" data-fancybox="gallery"><img class="image-item" src="'+ e.target.result +'" alt="'+ fName +'" /></a>'+
                    '<img class="image-del" src="/assets/img/button/btn_delete.gif" alt="삭제" />'
                );
            };
            reader.readAsDataURL(fSource);

            totalSize += fSize;

            sizeList[fileIndex] = fSize;
            fileList[fileIndex] = fSource;

            fileIndex++;

            setFileSize();
            toggleFileBox();
        }

        // 첨부파일 션택 완료
        function selectFiles(files) {
            if (files == null) {
                console.log('파일이 선택되지 않았습니다.');
                return false;
            }

            for (var i = 0; i < files.length; i++) {
                var fileName = files[i].name;
                var fileNameArr = fileName.split('\.');
                var fileExtension = fileNameArr[fileNameArr.length - 1];
                var fileSize = files[i].size;

                var isImage = $.inArray(fileExtension, extImages.split(','));
                if (fileSize <= 0) {
                    alert('비어 있는 파일입니다.');
                    return;
                } else if ($.inArray(fileExtension, extExecutes.split(',')) !== -1) {
                    alert('업로드가 허용되지 않는 파일입니다.');
                } else {
                    addFile(files[i], fileName, fileSize, $.inArray(fileExtension, extImages.split(',')));
                }
            }
        }

        $(document).ready(function() {
            fileDropDown();

            $('#selectFiles').bind('change', function() {
                selectFiles(this.files);
                $(this).val('');
            });

            $('#fileBtn').click(function() {
                $('#selectFiles').click();
            });

            if ($('.old-file').length) {
                $('.old-file').each(function() {
                    totalSize += parseInt($(this).data('size'));
                });
            }

            setFileSize();
            toggleFileBox();

            // 드래그존 클릭시 파일 선택
            $('#dropzone').on('click', function(e) {
                var targetID = e.target.id;
                console.log(e.target);
                if (targetID == 'dropzone' || targetID == 'dropzoneDesc' || targetID == 'dropzoneList' || targetID == 'previewFiles') {
                    $('#selectFiles').click();
                }
            });

            // 파일 삭제
            $('#previewFiles').on('click', '.image-del', function(e) {
                var objItem = $(this).parent();

                objItem.remove();

                if (objItem.hasClass('old-file')) {
                    $('#writeForm').append('<input type="hidden" name="delFiles[]" value="'+ objItem.data('uid') +'" />');
                    totalSize -= parseInt(objItem.data('size'));
                } else {
                    var fIndex = objItem.data('index');

                    totalSize -= parseInt(sizeList[fIndex]);

                    delete fileList[fIndex];
                    delete sizeList[fIndex];
                }

                setFileSize();
                toggleFileBox();
            });

            $('input[name=subject]').focus();

            $('#writeForm').submit(function (e) {
                e.preventDefault();

                if (!$('#input-subject').checkEmpty('제목을 입력해 주세요.')) return false;

                if ($('input[name=mode]').val() == 'add' && !fileList.length) {
                    alert('이미지를 업로드해 주세요.');
                    return false;
                }

                var formData = new FormData(this);
                var uploadFiles = Object.keys(fileList);
                for (var i = 0; i < uploadFiles.length; i++) {
                    formData.append('files[]', fileList[uploadFiles[i]]);
                }

                $.ajax({
                    url   : $(this).attr('action'),
                    type  : 'POST',
                    data : formData,
                    enctype : 'multipart/form-data',
                    processData : false,
                    contentType : false,
                    dataType : 'json',
                    cache : false,
                    async : false,
                    success: function(result) {
                        if (result.code == 'success') {
                            if ($(this).find("input[name='uid']").val()) {
                                window.location.reload();
                            } else {
                                gotoList();
                            }
                        } else {
                            alert(result.message);
                        }
                    }
                });
            });

            $('.btn-delete').click(function() {
                if(confirm('게시물을 삭제하시겠습니까?')) {
                    $.post($(this).attr('href'), {'uid': $('#writeForm input[name=uid]').val() }, function (result) {
                        if (result.code = 'success') {
                            gotoList();
                        } else {
                            alert(result.message);
                        }
                    }).fail(function(result) {
                        var data = result.responseJSON;
                        if (!data.success) {
                            alert(data.message);
                        }
                    });
                }

                return false;
            });
        });
    </script>
@endpush