Portfolio


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


    //업로드 되면 호출되는 메서드
    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>
    ..)


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


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


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

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

File객체

File 객체

주요 속성

주요 메서드

생성방법