Upload and forms

With the upload attribute, a file that passed the check is sent to that URL with XHR (for progress). Cookies go only to the same origin. Add auth headers in beforeupload. Without upload, the file goes nowhere.

<excel-82 id="x" headers="Name,Amount" upload="/api/upload" upload-as="json"></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" (default): multipart/form-data, field name from upload-field (default file).
• upload-as="json": sends { fileName, sheet, columns, rows } as application/json.
• After a successful upload the form value is the server response string; the file is not sent twice.
• upload-auto="false": the form submit is intercepted, the upload runs, then form.requestSubmit() is called again. On failure the form is not submitted and the error is shown.
• Without upload, the form value is the checked file itself.

Inside a form

It uses ElementInternals (formAssociated), so name, required and disabled work like on any input.

<form action="/save" method="post">
  <excel-82 name="excel" required headers="Name,Phone,Amount"
            upload="/api/upload" upload-auto="false"></excel-82>
  <button>Submit</button>
</form>