HTML : select/option, input type file

[developerasun]

research : understanding HTML drowndown

select and option

see code examples

<label for="cars">Choose a car:</label>

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

input type file

elements with type="file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.

see code examples

<label for="avatar">Choose a profile picture:</label>

<input type="file"
       id="avatar" name="avatar"
       accept="image/png, image/jpeg">

get multiple files

<form method="post" enctype="multipart/form-data">
 <div>
   <label for="file">Choose file to upload</label>
   <input type="file" id="file" name="file" multiple>
 </div>
 <div>
   <button>Submit</button>
 </div>
</form>

reference

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

[developerasun]

code example

get selected value in select~option tag

        const checkout = document.getElementById('checkout') as HTMLSelectElement
        const selected = checkout.options[checkout.selectedIndex].value

[developerasun]

sending the uploaded file with fetch

example

read this

An important note for sending Files with Fetch API : One needs to omit content-type header for the Fetch request. Then the browser will automatically add the Content type header including the Form Boundary which looks like,

Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD

reference

• https://stackoverflow.com/questions/36067767/how-do-i-upload-a-file-with-the-js-fetch-api