style24
/
style24.doc


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap.min.css"/>
    <style type="text/css">
        .drop_zone {
            background-color: #e0e0e0;
            border: #1b1e21 3px dot-dash;
            height: 100px;
            padding: 8px;
            font-size: 12px;

        }

        .inner_drop_zone {
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }

        input[name="file"] {
            display: none;
        }
    </style>
</head>
<body>

<div class="container-fluid">

    <nav class="navbar navbar-light bg-light">
        <h1 class="display-4">Kollus HTTP UPLOAD API SAMPLE</h1>
        <span class="navbar-text">HTTP API 를 이용한 컨텐츠 업로드 예제 샘플입니다.
            <p>자세한 사항은 아래의 링크를 이용하여 문서를 확인 바랍니다.</p>
        <a class="btn btn-primary" href="https://support.kollus.com" role="button">Learn more</a>
        </span>

    </nav>
    <div class="row">
        <div class="col-md-7 offset-1">
            <div class="input-group">
                <input type="text" class="form-control" name="access_token" placeholder="API Access Token"/>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="setAAT">시작</button>
                    <button class="btn btn-outline-secondary" type="button" id="reset">취소</button>
                </div>
            </div>
            <div class="alert alert-warning alert-dismissible fade" role="alert">
                <strong>API 접근토큰</strong> 을 반드시 기입해주세요.
                <a href="http://kr.kollus.com/" class="alert-link">콜러스 콘솔</a>의 설정항목에서 확인해주세요
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="drop_zone offset-3 col-md-6">
                <div class="inner_drop_zone" ondragover="return false;">
                    <p>업로드할 파일을 여기에 올리거나 선택버튼을 눌러주세요</p>
                    <button type="button" id="fileSelect">파일 선택</button>
                    <input type="file" name="file"/>
                </div>
                <div class="file_info">
                </div>
            </div>

            <pre id="result"></pre>
            <div class="row">
                <div class="card col-md-6">
                    <div class="card-header">
                        Upload URL 획득
                    </div>
                    <ul class="list-group list-group-flush">

                        <li class="list-group-item">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">카테고리키</span>
                                </div>
                                <select class="form-control" name="category_key">

                                </select>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">만료시간</span>
                                </div>
                                <input type="number" class="form-control" name="expire_time" min="1" max="21600"
                                       value="600"/>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="btn-group-toggle" data-toggle="buttons">
                                    <label class="btn btn-outline-secondary" id="iau">
                                        <input type="checkbox" name="is_audio_upload"> 오디오 업로드
                                    </label>
                                </div>
                                <div class="btn-group-toggle" data-toggle="buttons">
                                    <label class="btn btn-outline-info">
                                        <input type="checkbox" name="is_encryption_upload"> 암호화 업로드
                                    </label>
                                </div>
                                <div class="btn-group-toggle" data-toggle="buttons">
                                    <label class="btn btn-outline-success">
                                        <input type="checkbox" name="is_passthrough"> 패스쓰루 업로드
                                    </label>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">프로파일키</span>
                                </div>
                                <select class="form-control" name="profile_key">
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">컨텐츠타이틀</span>
                                </div>
                                <input type="text" class="form-control" name="title">
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">업로드방식</span>
                                </div>
                                <select class="form-control" name="upload_type" disabled>
                                    <option value="n" selected>FormType</option>
                                    <option value="r">ResumeUpload(지원안함)</option>
                                </select>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="card col-md-6">
                    <div class="card-header">
                        <p>Upload 사용시 옵션</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">리다이렉트 URL</span>
                                </div>
                                <input type="text" class="form-control" name="return_url">
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-outline-success">
                                    <input type="checkbox" name="disable_alert"> 업로드 완료후 알럿 띄우기
                                </label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">리다이렉트 스코프</span>
                                </div>
                                <select class="form-control" name="redirection_scope">
                                    <option value="outer" selected>Outer</option>
                                    <option value="inner">Inner</option>
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Accept</span>
                                </div>
                                <input type="text" class="form-control" name="accept">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div style="width:100%; height: 100%;">
                <div>
                    <button type="button" class="btn btn-danger btn-lg" style="width:100%;" id="upload">UPLOAD</button>
                </div>
                <div class="progress" style="width: 100%;height: 30px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                         style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%
                    </div>
                </div>
                <pre style="width: 100%;" id="log"></pre>
            </div>
        </div>
    </div>
</div>
<script src="jquery-3.5.1.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<script type="text/javascript">
    var MediaInfoJs = document.createElement('script');
    if ('WebAssembly' in window) {
        MediaInfoJs.src = "MediaInfoWasm.js";
    } else {
        MediaInfoJs.src = "MediaInfo.js";
    }
    document.body.appendChild(MediaInfoJs);
    var MediaInfoModule;
    var mediaInfoReady = false;
    var mediaInfo = undefined;
    var processing = false;
    var uploadFile = false;
    MediaInfoJs.onload = function () {
        MediaInfoModule = MediaInfoLib({
            'postRun': function () {
                console.log('Load!!');
                mediaInfoReady = true;
            }
        });
    }
    window.onload = function () {
        var uploadFileList = false;
        var file = document.querySelector('input[name="file"]');
        $('.drop_zone').on('drag dragstart dragend dragover dragenter dragleave drop',
            function (e) {
                e.preventDefault();
                e.stopPropagation();
            })
            .on('drop', function (e) {
                    parseFile(e.originalEvent.dataTransfer.files[0]);
                }
            );


        var fileSelect = document.getElementById('fileSelect');
        fileSelect.onclick = function () {
            file.click();
        }
        var file = document.querySelector('input[name="file"]');
        file.onchange = function () {
            parseFile(this.files[0]);
        }
        var parseFile = function (file) {
            if (processing) return;
            processing = true;
            mediaInfo = new MediaInfoModule.MediaInfo();
            mediaInfo.Open(file, function () {
                mediaInfo.Option('Inform')
                var fileName = mediaInfo.Get(MediaInfoModule.Stream.General, 0, 'FileName');
                var duration = mediaInfo.Get(MediaInfoModule.Stream.General, 0, 'Duration');
                var format = mediaInfo.Get(MediaInfoModule.Stream.General, 0, 'Format');
                var codec = mediaInfo.Get(MediaInfoModule.Stream.General, 0, 'CodecID');
                var filesize = mediaInfo.Get(MediaInfoModule.Stream.General, 0, 'FileSize');
                var bitrate = mediaInfo.Get(MediaInfoModule.Stream.General, 0, 'OverallBitRate');

                var file_info = $('<h6>' + fileName + '</h6>');
                if (duration == '' || format == '' || codec == '' || filesize == '' || bitrate == '') {
                    file_info.append($('<span class="badge badge-danger">올바른 파일이 아닙니다.</span>'));
                } else {
                    file_info.append($('<span class="badge badge-primary">' + format + '</span>'));
                    file_info.append($('<span class="badge badge-secondary">' + codec + '</span>'));
                    file_info.append($('<span class="badge badge-info">' + (filesize > (1024 * 1024) ? ((filesize / 1024 / 1024).toFixed(2) + 'MB') : ((filesize / 1024).toFixed(2) + 'KB')) + '</span>'));
                    file_info.append($('<span class="badge badge-dark">' + new Date(parseInt(duration)).toISOString().slice(11, -1) + '</span>'));
                    file_info.append($('<span class="badge badge-warning">' + (bitrate > (1024 * 1024) ? (bitrate / 1024 / 1024).toFixed(2) + 'mbps' : (bitrate / 1024).toFixed(2) + 'kbps') + '</span>'));
                }

                $('.file_info').append(file_info);
                mediaInfo.Close();
                mediaInfo.delete();
                processing = false;
                uploadFile = file;
            });

        }
        /*UI Control*/
        $('#setAAT').on('click', function () {
            var access_token = $('input[name="access_token"]').val();

            if (access_token === undefined || access_token.trim() === '') {
                $('.alert').addClass('show');
            }
            $.ajax(
                {
                    url: 'https://api.kr.kollus.com/0/media/category/index?access_token=' + access_token,
                    method: 'GET',
                    success: function (res) {
                        console.log(res);
                        $.each(res.result.items.item, function (index, category) {
                            $('select[name="category_key"]').append(
                                $('<option value="' + category.key + '">' + category.name + '</option>')
                            );
                        });
                    }
                });

            $.ajax(
                {
                    url: 'https://api.kr.kollus.com/0/media/media_profile/index?access_token=' + access_token,
                    method: 'GET',
                    success: function (res) {
                        console.log(res);
                        $.each(res.result.items, function (index, profile) {
                            $('select[name="profile_key"]').append(
                                $('<option value="' + profile.key + '">' + profile.name + '</option>')
                            );
                        });
                    }
                });
        });

        var is_passthrough = $('input[name="is_passthrough_upload"]').prop('checked')
        $('select[name="profile_key"]').attr('disabled', !is_passthrough);
        $('input[name="title"]').attr('disabled', is_passthrough);
        $('input[name="is_passthrough_upload"]').on('change', function (e) {
            $('select[name="profile_key"]').attr('disabled', !$(this).prop('checked'));
            $('input[name="title"]').attr('disabled', $(this).prop('checked'));
        });
        $('input[name="is_audio_upload"]').on('change', function (e) {
            var is_audio = $(this).prop('checked')
            if (is_audio) {
                $('input[name="is_passthrough_upload"]').prop('checked', false);
            }
            $('select[name="is_audio_upload"]').attr('disabled', !is_audio);
        });

        $('#upload').on('click', function () {
            if (!uploadFile) {
                alert('업로드할 파일을 선택해주세요.');
                return false;
            }
            var form = [];
            var category_key = $('select[name="category_key"] > option:selected').val();
            var expire_time = $('input[name="expire_time"]').val();
            if (expire_time > 0) {
                form.push(encodeURIComponent('expire_time') + '=' + encodeURIComponent(expire_time))
            }
            if (category_key !== undefined && category_key.trim() !== '') {
                form.push(encodeURIComponent('category_key') + '=' + encodeURIComponent(category_key))
            }
            if ($('input[name="is_audio_upload"]').prop('checked')) {
                form.push(encodeURIComponent('is_audio_upload') + '=' + encodeURIComponent(1))
            }
            if ($('input[name="is_encryption_upload"]').prop('checked')) {
                form.push(encodeURIComponent('is_encryption_upload') + '=' + encodeURIComponent(1))
            }
            if ($('input[name="is_passthrough"]').prop('checked')) {
                form.push(encodeURIComponent('is_passthrough') + '=' + encodeURIComponent(1))
                form.push(encodeURIComponent('profile_key') + '=' + encodeURIComponent($('select[name="profile_key"] > option:selected').val()))
            } else {
                var title = $('input[name="title"]').val();
                if (title !== undefined && title.trim() !== '') {
                    form.push(encodeURIComponent('title') + '=' + encodeURIComponent(title))
                }
            }
            form.push(encodeURIComponent('upload_type') + '=' + encodeURIComponent($('select[name="upload_type"] > option:selected').val()))
            var access_token = $('input[name="access_token"]').val();
            var log = $('#log');
            $.ajax({
                url: 'http://upload.kr.kollus.com/api/v1/create_url?access_token=' + access_token,
                method: 'POST',
                ContentType: 'application/x-www-forurlencoded',
                data: form.join('&'),
            }).always(function (data, textStatus, xhr) {
                log.text(log.text() + '[CALL] http://upload.kr.kollus.com/api/v1/create_url?access_token=' + access_token + '\n');
            }).done(function (data) {
                log.text(log.text() + '====================== RESPONSE =======================\n');
                log.text(log.text() + JSON.stringify(data, null, 4) + '\n');
                upload(data);
            }).fail(function (xhr, textStatus, err) {
                console.log('fail: ', xhr + '\n');
                console.log('fail: ', textStatus);
                console.log('fail: ', err);
            });
        });

        var upload = function (data) {
            var log = $('#log');
            var purl = data.result['progress_url'];
            var uurl = data.result['upload_url'];

            var upload_data = new FormData();
            upload_data.append('upload-file', uploadFile);
            var redirection_url = $('input[name="return_url"]').val();
            if (redirection_url !== undefined && redirection_url.trim() !== '') {
                upload_data.append('return_url', return_url);
            }
            upload_data.append('disable_alert', $('input[name="disable_alert"]').prop('checked') ? 1 : 0);
            upload_data.append('redirection_scope', $('select[name="redirection_scope"] > option:selected').val());
            var accept = $('input[name="accept"]').val();
            if (accept !== undefined && accept.trim() !== '') {
                upload_data.append('accept', accept);
            }
            else {
                upload_data.append('accept', 'application/json');
            }

            $.ajax({
                url: uurl,
                method:'POST',
                mimeType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                data: upload_data,
                timeout:0
            }).always(function (data, textStatus, xhr) {
                log.text(log.text() + '[CALL] ' + uurl + '\n');
            }).done(function (data) {
                log.text(log.text() + '====================== RESPONSE =======================\n');
                log.text(log.text() + JSON.stringify(data, null, 4) + '\n');
            }).fail(function (xhr, textStatus, err) {
                console.log('fail: ', xhr + '\n');
                console.log('fail: ', textStatus);
                console.log('fail: ', err);
            });
            var uploadInterval = setInterval(function () {
                $.get(purl, function (data) {
                    $('.progress-bar').css('width', data.result.progress + '%');
                    $('.progress-bar').html(data.result.progress + '%');
                    log.text(log.text() + '[progress] ' + data.result.progress + '%\n');
                    if (data.result.progress >= 100) {
                        clearInterval(uploadInterval);
                    }
                });
            }, 1000);
        }
    }
</script>

</body>
</html>