<!-- ■ uploader start -->

<h1>Image gallery</h1>
<style>
    .upload-box{
        min-width: 200px;
        min-height: 200px;
        border: solid 1px black;
    }
</style>
<div class="upload-box">
    <img id="image_target" src="" />
    <form id="form_target" enctype="multipart/form-data" action="http://image.onethelab.com/image_upload.php" method="post">
        <label>select file, drag&drop, ctrl+v</label>
        <input type="hidden" name="name" value="default" />
        <input id="image_file" name="image" class="btn-file d-none" type="file" /> <!--파일 input box 형태-->
        <!-- <input type="submit" value="submit" /> -->
    </form>
</div>

<div>
    test
<img id="image" src="picture.jpg" />
</div>
<div id="preview" style="overflow: hidden;">
    <img id="crop_target" src="picture.jpg" />
</div>
<input type="button" onclick="setImage();" value="set image" />


<script>
    let crop_target = document.querySelector("#image");
    var uploadBox = document.querySelector('.upload-box');
    uploadBox.addEventListener('dragover', function(e) {
        e.preventDefault();
    });
    /* 박스 안에서 Drag를 Drop했을 때 */
    uploadBox.addEventListener('drop', function(e) {
        e.preventDefault();

        const data = e.dataTransfer;
        if(!isValid(data)) return; //유효성 Check

        document.querySelector('#image_file').files = data.files;
        //document.querySelector('#image_target').src = URL.createObjectURL(data.files[0]);
        del_cropper();
        crop_target.src = "";
        crop_target.src = URL.createObjectURL(data.files[0]);
        set_cropper();
    });

    let image_target = document.querySelector('#image_file');
    image_target.addEventListener("change", dataUpdate);
    function dataUpdate(e){

        const data = e.dataTransfer;
        if(!isValid(image_target)) return; //유효성 Check
        //document.querySelector('#image_target').src = URL.createObjectURL(image_target.files[0]);
        del_cropper();
        crop_target.src = "";
        crop_target.src = URL.createObjectURL(image_target.files[0]);
        set_cropper();
    }

    ////
    function isValid(data){
        //파일인지 유효성 검사
        if(!isNull(data.types) && data.types.indexOf('Files') < 0) {alert("exit1"); return false;}
        
        //이미지인지 유효성 검사
        if(data.files[0].type.indexOf('image') < 0){
            alert('이미지 파일만 업로드 가능합니다.'+data.files[0].type);
            return false;
        }
        //파일의 개수는 1개씩만 가능하도록 유효성 검사
        if(data.files.length > 1){
            alert('파일은 하나씩 전송이 가능합니다.');
            return false;
        }
        //파일의 사이즈는 50MB 미만
        if(data.files[0].size >= 1024 * 1024 * 50){
            alert('50MB 이상인 파일은 업로드할 수 없습니다.');
            return false;
        }
        return true;
    }
    addEventListener("paste", onPaste);
    function onPaste(event) {
        if (event.clipboardData.files.length) {
            let files = event.clipboardData.files;

            document.querySelector('#image_file').files = files;
            //document.querySelector('#image_target').src = URL.createObjectURL(files[0]);
            del_cropper();
            crop_target.src = "";
            crop_target.src = URL.createObjectURL(files[0]);
            set_cropper();
        }
    }
    function isNull(v) {
        return (v === undefined || v === null) ? true : false;
    }
</script>

<!-- ■ cropper start -->

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- <script src="https://fengyuanchen.github.io/cropper/js/cropper.js"></script> -->
<link href="node_modules/cropperjs/dist/cropper.css" rel="stylesheet">
<script src="node_modules/cropperjs/dist/cropper.js"></script>

<!-- Wrap the image or canvas element with a block element (container) -->
<style>
/* Make sure the size of the image fits perfectly into the container */
img {
  display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;
}
</style>

<script>
//import 'cropperjs/dist/cropper.css';
//import Cropper from 'cropperjs';

const image = document.getElementById('image');
const preview = document.getElementById('preview');
let cropper;
function del_cropper(){
    //alert(cropper);
    if(cropper != null){
        //alert("destroy!");
        cropper.destroy();
    } 
}
function set_cropper(){
    cropper = new Cropper(image, {
    aspectRatio: 16 / 9,
    preview: preview,
    crop(event) {
        console.log(event.detail.x);
        console.log(event.detail.y);
        console.log(event.detail.width);
        console.log(event.detail.height);
        console.log(event.detail.rotate);
        console.log(event.detail.scaleX);
        console.log(event.detail.scaleY);
    },
    });
}
let img_target = document.querySelector("#image_file");
let form_target = document.querySelector("#form_target");
let formdata = new FormData();
let canvas_;

function setImage(){
    //cropper.getCroppedCanvas({ maxWidth: 4096, maxHeight: 4096 })
    //img_target.crossOrigin = "anonymous";
    //img_target.file = cropper.getCroppedCanvas({ maxWidth: 4096, maxHeight: 4096 }).toDataURL("image/jpg");
    alert(cropper);
    canvas_ = cropper.getCroppedCanvas({ maxWidth: 2048, maxHeight: 2048 })
    let blob_ = canvas_.toBlob((blob)=>{
        file = new File([blob], 'cropped.jpg', { type: 'image/jpeg' }); //blob을 가지고 파일을 생성
        let url = window.URL.createObjectURL(blob);
        //test_target.src = url;
        //여기까진 성공

        submit();
    }, "image/jpeg", 1.0);
}

async function submit() {
    let imageBlob = await new Promise(resolve => 
    cropper.getCroppedCanvas({ maxWidth: 2048, maxHeight: 2048 }).toBlob(resolve, 'image/jpeg')
    );
    console.log("step1");
    let formData = new FormData();
    formData.append("firstName", "Bora");
    formData.append("image", imageBlob, "cropped.jpg");
    console.log("step2");
    let response = await fetch('http://image.onethelab.com/image_upload.php', {
    method: 'POST',
    body: formData
    });
    let result = await response;
    console.log(result);
}
</script>