Image preview, delete, and drag-to-reorder in React

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96  const [dragStartIndex, setDragStartIndex] = useState<null | number>(null);
  const [dragEnterIndex, setDragEnterIndex] = useState<null | number>(null);


  const handleAddShowImg = (e: ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return;
    if (e.target.files.length + showImg.length > 8) {
      alert('등록할 수 있는 이미지의 최대 갯수는 8장입니다.');
      return;
    }

    const imgList = e.target.files;
    const imgUrlList = [...showImg];

    for (let i = 0; i < imgList.length; i++) {
      const imgSrc = URL.createObjectURL(imgList[i]);
      const imgName = imgList[i].name;
      imgUrlList.push({ imgSrc, imgName });
    }

    setShowImg(imgUrlList);
  };

  const handleDeleteShowImg = (index: number) => {
    const newShowImgs = showImg.filter((img, i) => i !== index);
    setShowImg(newShowImgs);
  };

  const handleDrag = () => {
    if (dragStartIndex === null || dragEnterIndex === null) return;

    const newShowImgs = [...showImg];
    const spliceImg = newShowImgs.splice(dragStartIndex, 1)[0];

    newShowImgs.splice(dragEnterIndex, 0, spliceImg);
    setShowImg(newShowImgs);
  };

<tr>
              <td className='text-sm font-medium border bg-gray-200 border-gray-300 text-center'>
                Photo
              </td>
              <td className='border border-gray-300 p-2'>
                <div className='flex flex-col gap-1 w-full'>
                  <label
                    htmlFor='photo'
                    className='w-20 border border-gray-400 text-gray-700 hover:bg-gray-50 rounded-md flex justify-center items-center py-0.5 cursor-pointer'
                  >
                    파일 선택
                    <input
                      id='photo'
                      type='file'
                      accept='image/png, image/jpeg'
                      multiple
                      onChange={(e) => handleAddShowImg(e)}
                      className='hidden'
                    />
                  </label>
                  {showImg.length > 0 && (
                    <div className='flex w-full gap-1 py-2 flex-wrap'>
                      {showImg.map((img, i) => {
                        return (
                          <div key={`${img.imgName} + ${i}`}>
                            <img
                              className='w-32 h-32 border border-gray-300 cursor-move'
                              src={img.imgSrc}
                              alt={`${img.imgName} + ${i}`}
                              onDragStart={() => setDragStartIndex(i)}
                              onDragEnter={() => setDragEnterIndex(i)}
                              onDragEnd={() => handleDrag()}
                            />
                            <div className='flex items-center justify-between mt-1'>
                              <span className='truncate max-w-[5rem] text-'>
                                {img.imgName}
                              </span>
                              <button
                                className='border px-1 rounded-md'
                                onClick={() => handleDeleteShowImg(i)}
                              >
                                삭제
                              </button>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  )}
                  <span className='text-xs text-red-600'>
                    ※ 등록한 사진 순서대로 게시글에 보여집니다.
                  </span>
                  <span className='text-xs text-red-600'>
                    ※ 한 게시물당 최대 5개의 사진을 등록할 수 있습니다.
                  </span>
                </div>
              </td>
</tr>