Image Upload — 画像アップロード＆プレビュー

/* 画像アップロード＆プレビュー — style.css */
:root {
  --upload-border:       #C8D5E6;
  --upload-border-hover: #2B7FE8;
  --upload-bg:           #F7F9FC;
  --upload-bg-dragover:  #EBF2FF;
  --upload-icon-color:   #9AA5B4;
  --upload-text-color:   #5A6A7A;
  --upload-sub-color:    #9AA5B4;
  --upload-note-color:   #B0BAC8;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: sans-serif;
  padding: 32px 16px;
  background: #f8f9fa;
  display: flex;
  justify-content: center;
}

/* アップロードコンテナ */
.img-upload {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ドロップエリア（labelをボタン代わりに使う） */
.img-upload__area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  border: 2px dashed var(--upload-border);
  border-radius: 12px;
  background: var(--upload-bg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.img-upload__area:hover,
.img-upload__area.is-dragover {
  border-color: var(--upload-border-hover);
  background: var(--upload-bg-dragover);
}

/* アップロードアイコン */
.img-upload__icon {
  width: 40px;
  height: 40px;
  color: var(--upload-icon-color);
}

.img-upload__text {
  font-size: 14px;
  color: var(--upload-text-color);
  font-weight: 600;
  text-align: center;
}

.img-upload__sub {
  font-size: 12px;
  color: var(--upload-sub-color);
}

/* input は非表示にしてlabelでトリガーする */
.img-upload__input {
  display: none;
}

/* プレビューエリア */
.img-upload__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--upload-border);
  border-radius: 12px;
  background: #fff;
}

.img-upload__img {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 6px;
}

.img-upload__info {
  font-size: 13px;
  color: var(--upload-text-color);
  margin: 0;
  text-align: center;
}

/* ダウンロードボタン */
.img-upload__download {
  display: inline-block;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #2B7FE8;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
}

.img-upload__download:hover {
  background: #1a6fd4;
}

/* 擬似デモ注記 */
.img-upload__note {
  font-size: 12px;
  color: var(--upload-note-color);
  margin: 0;
  text-align: center;
}

@media (max-width: 480px) {
  .img-upload__area { padding: 28px 16px; }
}

// 画像アップロード＆プレビュー — script.js
var uploadArea  = document.getElementById('upload-area');
var imageInput  = document.getElementById('image-input');
var previewArea = document.getElementById('preview-area');
var previewImg  = document.getElementById('preview-img');
var fileInfo    = document.getElementById('file-info');
var downloadBtn = document.getElementById('download-btn');

// ファイル選択ダイアログから選んだとき
imageInput.addEventListener('change', function () {
  if (imageInput.files.length > 0) {
    handleFile(imageInput.files[0]);
  }
});

// ドラッグ中はエリアをハイライトする
uploadArea.addEventListener('dragover', function (e) {
  e.preventDefault();
  uploadArea.classList.add('is-dragover');
});

uploadArea.addEventListener('dragleave', function () {
  uploadArea.classList.remove('is-dragover');
});

// ドロップ時にファイルを受け取る
uploadArea.addEventListener('drop', function (e) {
  e.preventDefault();
  uploadArea.classList.remove('is-dragover');
  var file = e.dataTransfer.files[0];
  if (file) { handleFile(file); }
});

function handleFile(file) {
  // 画像以外は受け付けない
  if (!file.type.startsWith('image/')) {
    alert('画像ファイル（PNG / JPG / GIF / WebP）を選択してください。');
    return;
  }

  // FileReader でプレビュー用Base64を生成する
  var reader = new FileReader();
  reader.onload = function (e) {
    previewImg.src = e.target.result;
  };
  reader.readAsDataURL(file);

  // ファイル名・サイズを表示する
  var sizeKb = (file.size / 1024).toFixed(1);
  fileInfo.textContent = file.name + '  (' + sizeKb + ' KB)';

  // ダウンロードボタンにBlobURLをセットする（加工なし・元ファイル名のまま）
  var blobUrl = URL.createObjectURL(file);
  downloadBtn.href = blobUrl;
  downloadBtn.download = file.name;

  // プレビューエリアを表示する
  previewArea.hidden = false;

  // --- サーバーに送信する場合 ---
  // var formData = new FormData();
  // formData.append('image', file);
  // var res = await fetch('/api/upload', { method: 'POST', body: formData });
  // var data = await res.json();
  // console.log('アップロード完了:', data);
}

function resetDemo() {
  imageInput.value = '';
  previewImg.src = '';
  fileInfo.textContent = '';
  downloadBtn.href = '';
  previewArea.hidden = true;
}