Uncaught TypeError: Illegal invocation

input type="file"

Flask 파일 업로드

Javascript 파일 업로드

🧩 프론트엔드

📌 프론트엔드 기획

1. 인스타그램 우측상단의 헤더 아이콘 중, 더하기 모양의 아이콘을 눌러 새 피드 추가 모달을 실행한다
2. 실행한 모달의 파일추가 버튼을 눌러 로컬에서 저장할 파일을 선택한다.
3. 파일을 선택하면 저장한 이미지를 두 번째 모달에 붙여 두 번째 모달을 보여준다.
4. 사용자는 이미지를 확인하고 다음 버튼을 눌러 문구를 입력할 수 있는 세번째 모달에 진입한다.
5. 문구를 입력하고 공유하기 버튼을 눌러 데이터베이스에 저장한다.

---

🥨 HTML

form, input, lable tag

1. form 태그에 input, label 태그를 넣은 뼈대 구조를 만든다

• form 태그에 type을 지정해주어야 사진 파일을 가져올 수 있다.

<form methods="post" enctype="multipart/form-data"> 
	<label></label>
	<input>
</form>

2. 레이블 태그 속성에 for를 넣는다

• 레이블 속성을 클릭해도 인풋의 속성을 따라간다!

<label for="file"></label>
<input id=file">

3. 인풋 태그에 onchange 함수를 넣는다

• 클릭하자마자 적용되는 onclick과 다르게 변화를 감지하면 적용되는 onchange가 이미지 파일을 가져오기에 적합하다!

🎨 CSS

버튼 숨기기

• 버튼 태그를 숨기고 레이블 태그에 for 속성을 넣어 레이블을 클릭해도 버튼 속성을 따라가도록 한다.

👨‍💻 Javascript

onchange function

1. 업로드 이미지 파일 가져오기

• 업로드 이미지 파일 html 엘리멘트를 변수로 선언한다

let file = $('#file')[0].files[0]

2. FormData() 변수 선언

• 데이터를 보내줄 그릇 만들기

📜 백엔드

💻 백엔드 기획

---

🔨 API

API 개발명세

💾 데이터베이스