dccon-batch-uploader v.22.08.19

/// 사용법 : https://m.dcinside.com/board/dccon/7557
// https://m.dcinside.com/board/dccon/7180 (https://archive.ph/wip/3xPEU)

const useFilenameAsAlt = true;      // true = 알트값에 파일명을 넣음 , false = 알트값에 숫자를 넣음

$ = $;

function upload() {
  var frm = $("#regist_form");
  var img_name = $(this).attr("name");
  frm.find("input[name=" + img_name + "]").attr("disabled", false);
  target_name = img_name;
  if (target_name != "main_img" && target_name != "list_img") {
    org_icon_fname = $(this)
      .val()
      .replace(/^.*[\\\/]/, "");
  }

  frm.prop({
    action: now_protocal + "//upimg.dcinside.com/dccon_uploader.php",
    method: "post",
    target: "dccon_frame",
  });
  frm.find("input[name=process]").val("regist");
  frm.find("input[name=target_name]").val(img_name);
  frm.submit();
  console.log("ok");
}

function FileListItems(files) {
  var b = new ClipboardEvent("").clipboardData || new DataTransfer();
  for (var i = 0, len = files.length; i < len; i++) b.items.add(files[i]);
  return b.files;
}

function uploadprogress(i,t="",r="500") {
    let diva    = document.createElement('div');
    let divat   = document.createElement('div');
    let divatp  = document.createElement('p');
    document.body.appendChild(diva);
    diva.appendChild(divat);
    divat.appendChild(divatp);
    diva.setAttribute('id', 'ncc');
    diva.setAttribute('class', 'ncc');
    diva.style.position         = 'fixed';
    diva.style.width            = '100%';
    diva.style.top              = '0px';
    diva.style.left             = '0px';
    diva.style.textAlign        = 'center';
    i == 100
        ? divatp.innerHTML = '<p>디시콘 <b>업로드</b>가 <b>완료</b>되었습니다</p>'
        : divatp.innerHTML = '<p><b>' + i + '</b> 번째 디시콘이 업로드 중 입니다' + t + '</p>';
    divat.setAttribute('class', 'notification-container');
    divat.setAttribute('id', 'notification-container');
    divat.style.background      = 'rgba(0,0,0,.3)';
    divat.style.padding         = '15px 20px';
    divat.style.transition      = 'transform 0.3s ease-in-out';
    divat.style.textShadow      = '-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white';
    divat.style.borderRadius    = '0 0 10px 10px';
    divat.style.zindex          = '9999999';
    $("#diva").show();
    setTimeout(function() {
        document.body.removeChild(diva);
    }, r);
}

const readURL = (file) => {
  return new Promise((res, rej) => {
    const reader = new FileReader();
    reader.onload = (e) => res(e.target.result);
    reader.onerror = (e) => rej(e);
    reader.readAsDataURL(file);
  });
};

const fileList = $("<input/>")
  .attr("type", "file")
  .attr("accept", "image/x-png,image/jpeg,image/gif")
  .attr("multiple", true)
  .bind("change", async function () {
    files = this.files;
    let list = $("<ul/>")
      .css("width", "1000px")
      .attr("id", "file-list")
      .sortable();
    for (const [i, file] of Object.entries(this.files)) {
      list.append(
        $("<img/>")
          .attr("file-name", file.name)
          .attr("src", await readURL(file))
      );
    }
    $("header[class*='cont_head']").before(list);
    $("ul[id*='file-list']")
      .append(
        $("<button/>")
          .html("제출")
          .attr("id", "batch-submit")
          .attr("class", "btn_blue smaller")
          .attr("style", "width:800px;height:100px;")
          .bind("click", async function () {
            const fileArray = Array.from(files);
            $("html, body").animate({scrollTop: 586},400);
            $("input[class*='dccon_num'][id='icon_cnt']").attr("value",fileArray.length);
            $("button[id='btn_regist_icon']").trigger("click");
            const fileNameList = Array.from(
              $("#file-list > img").map(function () {
                return this.getAttribute("file-name");
              })
            );
            const sortedArray = fileNameList.map(
              (name) =>
                fileArray[fileArray.findIndex((file) => file.name === name)]
            );
            let formattedFileNameList = fileNameList.map((name) => {
              name = name.substr(0, name.lastIndexOf("."));
              const formatted = word_length(name, 6);
              return formatted === true ? name : formatted;
            });
            let duplicantname = 0;
            const unique = new Set(formattedFileNameList);
            const duplicant = Array.from(
              new Set(
                formattedFileNameList.filter((name) => !unique.delete(name))
              )
            );
            formattedFileNameList = formattedFileNameList.reduce(
              (list, name) => {
                if (duplicant.includes(name)) {
                    duplicantname += 1;
                    duplicantname.toString().length < 2 ? '0' + duplicantname : duplicantname;
                }
                list.push(
                  duplicant.includes(name)
                    ? `중복${duplicantname}`
                    : name
                );
                return list;
              },
              []
            );
            let tp = 0;
            for (var [i, file] of Object.entries(sortedArray)) {
                let tz = 500;
                let tt = ".";
                let ti = Number(i)+1;
                let ty = 11+(138*tp);
                let tc = 1;
                $(`div[class='scroll']`).animate({scrollTop : ty}, 400);
                console.log( " > " + $(`li[id='icon_${Number(i) + 1}'] > div[class='file_imgupbox empty']`).parent().attr("id") );
                  //console.log("\n> " + $(`li[id='icon_${Number(i) + 1}'] > div[class='file_imgupbox empty']`).parent().attr("id"));
                var documentInput = $(`input[name='icon_${Number(i) + 1}']`);
                documentInput[0].files = new FileListItems([file]);
                upload.bind(documentInput)();
                $(`input[name="alt_${Number(i) + 1}"]`).attr(
                    "value",
                    useFilenameAsAlt ? formattedFileNameList[i] : Number(i) + 1
                );
            do {
                  uploadprogress(ti,tt,tz);
                  await new Promise((resolve) => setTimeout(resolve, tz));
                  tz += 250 + Math.floor(Math.random() * 251);
                  tt += ".";
                  tz > 5000 ? tz = 500 : tz;
              } while ( $(`li[id="icon_${Number(i) + 1}"] > img[src*="dccon.php"]`).length == "0" );
              ti % 5 === 0 ? tp += 1 : tp;
            }
            //$(`button[class*='submit']`).trigger("click");
            alert("업로드 완료");
            uploadprogress(100,"",3000);
          })
      )
      .append(
        $("<b/>")
           .html("&nbsp;&nbsp;")
      )
      .append(
        $("<button/>")
          .html("초기화")
          .attr("id", "batch-reset")
          .attr("class", "btn_blue smaller")
          .attr("style", "width:191px; height:100px;")
          .bind("click", () => {
            $("#batch-submit").remove();
            $("#batch-reset").remove();
            $("#file-list").remove();
          })
      );
      $("html, body").animate({scrollLeft: 10000},400);
      $("html, body").animate({scrollTop: 174},400);
  })
  .click();