File API와 Blob — 파일 읽기, 다운로드, 미리보기

// 텍스트 Blob 생성
const textBlob = new Blob(["Hello, World!"], { type: "text/plain" });
console.log(textBlob.size); // 13
console.log(textBlob.type); // "text/plain"

// JSON Blob
const jsonBlob = new Blob([JSON.stringify({ name: "정훈" })], {
  type: "application/json",
});

// 여러 조각 합치기
const combined = new Blob(["Part 1, ", "Part 2, ", "Part 3"]);

// input으로 파일 선택
const input = document.querySelector('input[type="file"]');
input.addEventListener("change", (e) => {
  const file = e.target.files[0];
  console.log(file.name);         // "photo.jpg"
  console.log(file.size);         // 바이트 단위
  console.log(file.type);         // "image/jpeg"
  console.log(file.lastModified); // 타임스탬프
});

// 프로그래밍적으로 File 생성
const file = new File(["내용"], "test.txt", {
  type: "text/plain",
  lastModified: Date.now(),
});

function readFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file); // 텍스트로 읽기
  });
}

// 다양한 읽기 방식
const reader = new FileReader();
reader.readAsText(file);        // 텍스트
reader.readAsDataURL(file);     // Base64 Data URL
reader.readAsArrayBuffer(file); // ArrayBuffer

// FileReader 없이 직접 읽기 (더 간결)
const text = await file.text();
const buffer = await file.arrayBuffer();
const stream = file.stream();

// 방법 1: FileReader (Data URL)
function previewWithReader(file, imgElement) {
  const reader = new FileReader();
  reader.onload = (e) => {
    imgElement.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

// 방법 2: Object URL (더 효율적)
function previewWithObjectURL(file, imgElement) {
  const url = URL.createObjectURL(file);
  imgElement.src = url;
  imgElement.onload = () => URL.revokeObjectURL(url); // 메모리 해제
}

// 텍스트 파일 다운로드
function downloadText(content, filename) {
  const blob = new Blob([content], { type: "text/plain" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

downloadText("안녕하세요!", "greeting.txt");

// CSV 다운로드
function downloadCSV(data, filename) {
  const csv = data.map((row) => row.join(",")).join("\n");
  const bom = "\uFEFF"; // 한글 깨짐 방지 BOM
  const blob = new Blob([bom + csv], { type: "text/csv;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

downloadCSV(
  [["이름", "나이"], ["정훈", "25"], ["길동", "30"]],
  "users.csv"
);

function validateFile(file, options = {}) {
  const { maxSize = 5 * 1024 * 1024, allowedTypes = [] } = options;
  const errors = [];

  if (file.size > maxSize) {
    errors.push(`파일 크기가 ${formatBytes(maxSize)}를 초과합니다.`);
  }

  if (allowedTypes.length > 0 && !allowedTypes.includes(file.type)) {
    errors.push(`허용되지 않는 파일 형식입니다: ${file.type}`);
  }

  return errors;
}

function formatBytes(bytes) {
  if (bytes === 0) return "0 B";
  const units = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`;
}

// 사용
const errors = validateFile(file, {
  maxSize: 10 * 1024 * 1024, // 10MB
  allowedTypes: ["image/jpeg", "image/png", "image/webp"],
});

async function uploadInChunks(file, url, chunkSize = 1024 * 1024) {
  const totalChunks = Math.ceil(file.size / chunkSize);

  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append("chunk", chunk);
    formData.append("chunkIndex", i);
    formData.append("totalChunks", totalChunks);
    formData.append("fileName", file.name);

    await fetch(url, { method: "POST", body: formData });
    console.log(`업로드 진행: ${Math.round(((i + 1) / totalChunks) * 100)}%`);
  }
}

async function downloadFromServer(url, filename) {
  const response = await fetch(url);
  const blob = await response.blob();

  const objectUrl = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = objectUrl;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(objectUrl);
}