Custom BOX

Paste the following code into the head section of your site’s HTML.

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-dialog/master/dist/ax5dialog.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-uploader/master/dist/ax5uploader.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-dialog/master/dist/ax5dialog.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-uploader/master/dist/ax5uploader.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js"></script>
<script src="https://cdn.rawgit.com/thomasJang/jquery-direct/master/dist/jquery-direct.min.js"></script>

<div style="position: fixed;left:0;top:0;width:100%;height:100%;background: #ccc;z-index: 1000;display: none;opacity: 0.8;text-align: center;color: #000;" id="dragover">
    <table width="100%" height="100%">
        <tr>
            <td valign="middle" align="center"><h1>Drop the file here.</h1></td>
        </tr>
    </table>
</div>

<div class="DH20"></div>

<div data-ax5uploader="upload1">
    <button data-ax5uploader-button="selector" class="btn btn-primary">Select File (*/*)</button>
    (Upload Max fileSize 20MB)
</div>

<div class="DH10"></div>

<div data-ax5grid="first-grid" data-ax5grid-config="{
                    header: {align: 'center'},
                    showLineNumber: false,
                    showRowSelector: true,
                    multipleSelect: false,
                    lineNumberColumnWidth: 40,
                    rowSelectorColumnWidth: 27
                }" style="height: 150px;"></div>

<div style="padding: 10px 0;" data-btn-wrap>
    <button class="btn btn-default btn-sm" data-upload-btn="removeFile">removeFile</button>
</div>

<script type="text/javascript">
    $(function () {
        var API_SERVER = "http://api-demo.ax5.io";

        var DRAGOVER = $("#dragover");

        /// dialog
        var DIALOG = new ax5.ui.dialog({
            title: "AX5UI"
        });

        /// upload
        var UPLOAD = new ax5.ui.uploader({
            //debug: true,
            target: $('[data-ax5uploader="upload1"]'),
            form: {
                action: API_SERVER + "/api/v1/ax5uploader",
                fileName: "file"
            },
            multiple: true,
            dropZone: {
                target: $(document.body),
                onclick: function () {
                    // 사용을 원하는 경우 구현
                    return;
                    if (!this.self.selectFile()) {
                        console.log("파일 선택 지원 안됨");
                    }
                },
                ondragover: function () {
                    //this.self.$dropZone.addClass("dragover");
                    DRAGOVER.show();
                    DRAGOVER.on("dragleave", function () {
                        DRAGOVER.hide();
                    });
                },
                ondragout: function () {
                    //this.self.$dropZone.removeClass("dragover");
                },
                ondrop: function () {
                    DRAGOVER.hide();
                }
            },
            validateSelectedFiles: function () {
                console.log(this);
                // 10개 이상 업로드 되지 않도록 제한.
                if (this.uploadedFiles.length + this.selectedFiles.length > 10) {
                    alert("You can not upload more than 10 files.");
                    return false;
                }
                return true;
            },
            onuploaderror: function () {
                console.log(this.error);
                dialog.alert(this.error.message);
            },
            onuploadComplete: function () {
                ACTIONS["UPDATE_uploaded"](this.self.uploadedFiles);
            }
        });

        /// grid
        var GRID = new ax5.ui.grid({
            target: $('[data-ax5grid="first-grid"]'),
            columns: [
                {key: "fileName", label: "fileName", width: 200},
                {key: "fileSize", label: "fileSize", align: "right", formatter: function () {
                    return ax5.util.number(this.value, {byte: true});
                }},
                {key: "ext", label: "ext", align: "center", width: 60},
                {key: "createdAt", label: "createdAt", align: "center", width: 140, formatter: function () {
                    return ax5.util.date(this.value, {"return": "yyyy/MM/dd hh:mm:ss"});
                }},
                {key: "download", label: "down", width: 60, align: "center", formatter: function () {
                    return '<i class="fa fa-download" aria-hidden="true"></i>'
                }}
            ],
            body: {
                onClick: function () {
                    if(this.column.key == "download" && this.item.download){
                        location.href = API_SERVER + this.item.download;
                    }
                }
            }
        });

        /// ACTIONS
        var ACTIONS = {
            "INIT": function () {
                // 컨트롤 버튼 이벤트 제어
                uploadView.initView();
            },
            "GET_grid": function (data) {
                return GRID.getList(data);
            },
            "GET_uploaded": function () {
                // 업로드 파일 가져오기
                $.ajax({
                    method: "GET",
                    url: API_SERVER + "/api/v1/ax5uploader",
                    success: function (res) {
                        uploadView.setData(res);
                    }
                });
            },
            "DELETE_files": function (data) {
                $.ajax({
                    contentType: "application/json",
                    method: "post",
                    url: API_SERVER + "/api/v1/ax5uploader/delete",
                    data: JSON.stringify(data),
                    success: function (res) {
                        if (res.error) {
                            alert(res.error.message);
                            return;
                        }
                        ACTIONS["GET_uploaded"]();
                    }
                });
            },
            "UPDATE_uploaded": function (data) {
                GRID.setData(data);
            }
        };

        /// uploadView
        var uploadView = {
            initView: function () {
                $('[data-btn-wrap]').clickAttr(this, "data-upload-btn", {
                    "removeFile": function () {
                        var deleteFiles = ACTIONS["GET_grid"]("selected");
                        if (deleteFiles.length == 0) {
                            alert("No list selected.");
                            return;
                        }
                        DIALOG.confirm({
                            title: "AX5UI",
                            msg: "Are you sure you want to delete it?"
                        }, function () {
                            if (this.key == "ok") {
                                ACTIONS["DELETE_files"](deleteFiles);
                            }
                        });
                    }
                });
            },
            setData: function (data) {
                UPLOAD.setUploadedFiles(data);
                GRID.setData(UPLOAD.uploadedFiles);
            }
        };

        ACTIONS["INIT"]();
        ACTIONS["GET_uploaded"]();
    });
</script>