Portfolio

File 객체

: Blob` 객체를 확장한 형태로, 파일과 관련된 추가적인 메타데이터(예: 파일 이름, 마지막 수정 날짜 등)를 제공

주요 속성

주요 메서드

생성방법

<input type="file">`를 통해 생성

⇒ 브라우저와 파일을 공유. 즉, 파일이 브라우저의 메모리에 업로드 됨(새로고침 하기 전까지 저장)

JS에서 생성


const file = new File(["Hello, world!"], "example.txt", {
  type: "text/plain",
  lastModified: new Date(),
});

이미지 파일을 입력 받아서 preview로 나타내기


    //업로드 되면 호출되는 메서드
    const onUploadFile = (e: ChangeEvent<HTMLInputElement>) => { 
	    const { files } = e.target; //HTMLInputElement에는 files 속성이 있음
	
	    if (!files) {
	      return;
	    }
	
	    const file = files[0]; //여러개일 수 있어서 맨처음 한개만
	    const url = URL.createObjectURL(file); //임시 url 생성
	    setPreview(url); //상태값으로 저장
  };
      
    // input type으로 file을.
    // input hidden하고(안하면 못생김) label을 클릭해서 파일 선택창 받아오기
    // style={{ backgroundImage: `url(${preview})` }} 로 이미지 프리뷰 보여주기
    return (
	    <label
      className="flex aspect-square w-full flex-col  ..."
      style={{ backgroundImage: `url(${preview})` }}
    >
      <input
        type="file"
        name="create_product_photo"
        className="hidden"
        onChange={onUploadFile}
      />
    </label>
    ..)

파일이 이미지인지 확인하기

accept 속성 활용

input요소의 accept` 속성을 사용하면 파일 선택 창에서 특정 파일 형식만 선택할 수 있도록 제한


<input type="file" id="fileInput" accept="image/*">

MIME 타입 확인


const isFileImage = file.type.startsWith('image/'); //boolean

용량 체크하기

File 객체에서 size는 byte 단위이다

KB 변환 : Bytes / 1024

MB 변환 : Bytes / 1024**2

여러 파일 선택

기본적으로 단일 파일만 선택 가능. multiple 속성을 추가하면 여러 파일 선택 가능

files 속성은 항상 FileList 객체를 반환하며, 단일 파일만 선택한 경우에도 첫 번째 파일은 files로 접근해야 함


  const onUploadFile = (e: ChangeEvent<HTMLInputElement>) => {
    const { files } = e.target;

    if (files) {
       const file = files[0];
    }

import fs from “fs/promises” , fs.apponeFile,

Buffer.from(데이터) - arrayBuffer

File객체

File 객체

주요 속성

주요 메서드

생성방법