파일을 골랐는데 전송된 줄 알 때: 선택·검사·업로드 구분

파일 이름이 보였다고 전송이 끝난 것은 아닙니다

사진을 고르자 파일명이 나타납니다. 사용자는 이미 보냈다고 생각하지만 실제로는 브라우저에서 파일을 선택했을 뿐일 수 있습니다. 파일 선택, 형식·크기 검사, 전송, 서버의 접수를 같은 “완료”로 표시하면 어디까지 끝났는지 알기 어렵습니다.

이 글의 예제는 PNG·JPEG 파일 하나의 이름과 크기를 읽어 표시합니다. 파일의 내용을 외부로 보내거나 서버에 보관하지 않습니다. 유효한 선택 뒤에도 “전송 전”이라는 상태를 남겨 선택과 접수를 구별합니다.

단계마다 화면이 아는 사실만 말합니다

진행 막대가 100%가 됐다는 사실과 서버의 최종 처리가 성공했다는 사실도 다를 수 있습니다. 어떤 응답으로 완료를 정할지 구현과 안내에서 맞춰야 합니다. 문의의 서버 이후 과정은 접수·수신·답변 단계와 연결됩니다.

accept는 고를 파일의 힌트입니다

<label for="example-image">예제 이미지 1개</label>
<input id="example-image" type="file"
       accept=".png,.jpg,.jpeg,image/png,image/jpeg">
<p>PNG·JPEG, 최대 5MiB. 선택만 하며 전송하지 않습니다.</p>

MDN은 accept가 파일 선택기를 돕는 힌트이며 파일 형식을 검증하는 보안 장치가 아니라고 설명합니다. 확장자나 브라우저가 알려준 MIME 이름만으로 실제 내용과 안전성을 확정할 수 없습니다. 운영 서버에서는 허용할 파일과 크기, 실제 내용에 맞는 검사가 필요합니다.

가능한 형식과 최대 크기를 파일 선택 전에 알려주면 선택 뒤 다시 고르는 일을 줄일 수 있습니다. 형식이 여러 개라고 “모든 이미지”라고 넓혀 쓰지 말고 실제로 처리하는 범위를 적습니다.

파일 크기의 단위를 같은 계산으로 표시합니다

const MAX_BYTES = 5 * 1024 * 1024; // 5MiB
const file = input.files[0];
if (!file) showState('선택한 파일이 없습니다');
else if (file.size > MAX_BYTES) showState('5MiB 이하 파일을 고르세요');
else showState('크기 조건 확인 · 아직 전송 전');

File.size는 바이트 수입니다. 이 예제는 5×1024×1024바이트를 상한으로 정하고 5MiB라고 표시합니다. 소수 단위 MB로 안내할지 이진 단위 MiB로 안내할지 선택하되 화면과 서버의 실제 상한이 다른 숫자를 뜻하지 않게 맞춥니다.

경계값도 확인합니다. 상한과 정확히 같은 크기를 받는 정책이면 비교는 초과 여부로 하고, 한 바이트 큰 파일은 오류로 나누어야 합니다. 작은 파일 하나만 골라보면 이 차이를 놓칠 수 있습니다.

다시 고르거나 선택을 지웠을 때 이전 상태를 없앱니다

큰 파일을 고른 뒤 작은 파일로 바꾸었는데 이전 오류가 남거나, 선택을 지웠는데 미리보기만 남는 경우가 있습니다. 선택 파일, 오류, 전송 가능 여부와 요약을 같은 변경 처리에서 갱신합니다. 취소한 경우에는 현재 실제 선택이 무엇인지 다시 읽어야 합니다.

미리보기를 만드는 구현은 생성한 임시 URL과 정리 시점도 관리해야 합니다. 이 단순 예제는 픽셀 미리보기를 만들지 않고 이름·바이트 크기와 검사 상태만 표시합니다. 파일을 읽는 기능을 추가한다면 그 범위를 사용자 안내에도 반영합니다.

클라이언트 통과를 서버 접수 성공으로 바꾸어 쓰지 않습니다

화면에서 허용한 조건과 서버가 거절할 수 있는 조건을 나누어 생각합니다. 실제 전송 기능이 있다면 실패 뒤 파일을 다시 골라야 하는지, 재시도를 할 수 있는지, 이미 접수됐는지를 안내해야 합니다. “업로드 완료”라는 문장은 서버가 정한 완료 조건을 확인한 뒤에 사용합니다.

입력 오류와 서비스 실패를 나누는 방식은 오류 요약에서도 볼 수 있습니다. 파일을 고른 장면뿐 아니라 잘못된 파일, 재선택, 비운 상태를 왕복해야 화면이 실제 단계와 같은 말을 하는지 알 수 있습니다.

예제를 직접 열어 보기

이 글의 화면 예제와 소스 받기 ZIP. 압축을 푼 뒤 index.html을 브라우저에서 열 수 있습니다. 예제의 입력과 표시 범위는 각 화면의 안내를 기준으로 확인하세요.

참고한 원문

• MDN: file 입력
• MDN: File.size