[TIL]html/이벤트 트리거-input type="file"

input 태그에서 제공해주는 여러 이벤트 중 file 유형을 알아보자.

웹페이지에서 로컬 파일을 업로드 할 때 사용하며, 하나 혹은 여러 개를 선택할 수 있다. accept, value 등의 프로퍼티들을 제공하며 정의한 속성 값에 따라 상이하게 동작하는데 이때 업로드 된 파일은 서버로 전달하거나 화면에서 조작하는 등, 작업을 수행하면 된다.

먼저 코드를 살펴보자

//excel.vue

<template>
 <input
   id="fileUpload"
   ref="inputFileRef"
   type="file"
   hidden
   accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
   @change="extractExcelData"
 />
 <button @click="selectFile"> 엑셀 업로드 <button/>
</template>

<script setup>
import {reactive} from 'vue'

const inputFileRef = ref(null)
const state = reactvie({
	excelList : [],
})

const selectFile = () => {
  //파일 선택 시마다 value값 초기화 -> 이전 파일과 동일해도 FileReader가 데이터 읽어오도록
  inputFileRef.value.value = ''
  inputFileRef.value.click()
}

</script>

• input type="file" 인 엘리먼트를 hidden 값을 줘서 화면상에 보이지 않게 처리하고 ref 속성으로 엘리먼트를 바인딩 시켜줬다.
• 엑셀 업로드 버튼에 클릭 트리거(@click)를 주면, selectFile() 함수가 실행되고 input 엘리먼트에 바인딩 시켰던 inputFileRef의 value 속성 중 click() 이벤트를 활성화한다. => hidden 프로퍼티가 없을 때 input type="file" 사용 시, 화면에 렌더링 되는 [파일선택] 버튼을 클릭하는 원리와 동일하다.

1. 이벤트 트리거 시점

** input, change 이벤트 모두 사용자가 엘리먼트의 value 속성을 변경할 때 발생하고, input 이벤트와 달리 change이벤트는 value 값을 각각 변경해주지 않아도 트리거가 된다.

다만, input type="file"일 때 파일명이 동일하다면, 이전에 선택한 파일과 새로 선택한 파일의 내용이 다르더라도 value값에 할당되는 로컬 경로는 일치하기 때문에 input 및 change 이벤트는 발생하지 않는다. 따라서 value 값을 reset 해줘야 한다.
이때 같은 파일을 입력/선택 해도 이벤트에 트리거가 작동하게 된다.

2. 트리거의 조건