excel

문서 › 웹 컴포넌트

업로드와 폼 연동

upload 속성으로 검사를 통과한 파일만 내 서버로 보내고, 폼 제출과 함께 씁니다.

upload 속성을 주면 검사를 통과한 파일을 XHR로 그 URL에 보냅니다(진행률 때문). 쿠키는 같은 출처일 때만 갑니다. 인증 헤더는 beforeupload 에서 넣습니다. upload 가 없으면 파일은 어디로도 가지 않습니다.

<excel-82 id="x" headers="이름,금액" upload="/api/upload" upload-as="json" locale="ko"></excel-82>
<script>
  x.addEventListener('beforeupload', (e) => { e.detail.init.headers['Authorization'] = 'Bearer ' + token; });
  x.addEventListener('uploaded', (e) => console.log(e.detail.status, e.detail.response));
</script>
  • upload-as="file"(기본): multipart/form-data, 필드 이름은 upload-field(기본 file).
  • upload-as="json": { fileName, sheet, columns, rows } 를 application/json 으로 보냅니다.
  • 업로드에 성공하면 폼 값은 서버 응답 문자열입니다. 파일을 두 번 보내지 않습니다.
  • upload-auto="false": 폼 제출을 가로채 업로드를 마친 뒤 form.requestSubmit() 을 다시 부릅니다. 실패하면 제출하지 않고 오류를 보여 줍니다.
  • 업로드를 쓰지 않으면 폼 값은 검사를 통과한 파일 자체입니다.

폼 안에서

ElementInternals(formAssociated)를 쓰므로 일반 입력칸처럼 name, required, disabled 가 동작합니다.

<form action="/save" method="post">
  <excel-82 name="excel" required headers="이름,전화번호,금액"
            upload="/api/upload" upload-auto="false" locale="ko"></excel-82>
  <button>제출</button>
</form>
폼 제출이 막히는 경우메시지
required인데 파일이 없음파일을 선택해 주세요
invalid첫 번째 오류 메시지
uploading업로드가 진행 중입니다
uploadfailed업로드에 실패했습니다