HTML Form Ajax File Upload (Front End)

#javascript #html

This Article is first published in https://medium.com/self-learning/html-form-ajax-file-upload-front-end-6199c4004003

Introduction

HTML Form is extremely Important for Web Application as it aims to collect data from users. It would be very easy if HTML Form is just used with traditional method which let browser back-end script to process your passed data. It would be very relatively difficult if you choose Ajax and file control in HTML Form.

HTML Form
HTML Form (File Control)
HTML Form (Ajax)
HTML Form (File Control and Ajax)

HTML Form

HTML Form is extremely Important for Web Application as it aims to collect data from users.

<form action="{URL}" method="POST">
  <input type="text"/>
  <button type="submit">Submit</button>
</form>

you can select POST or GET for method. The default encoding would be application/x-www-form-urlencoded. It would make all characters to be encoded before sent (spaces are converted to “+” and specical characters are coverted to ASCII HEX values).

HTML Form (File Control)

<form enctype="multipart/form-data" action="{URL}" method="POST">
  <input type="text"/>
  <input type="file"/>
  <button type="submit">Submit</button>
</form>

enctype specifies how the form-data would be encoded when submitting to server.

HTML Form (Ajax)

<script>
  function doSubmit(){
    var input1 = document.getElementById("input1");
    var request = new XMLHttpRequest();
    request.open('POST', "http://localhost:8080/testSimpleRequest");
    request.setRequestHeader('content-type', 'application/json');
    request.send({
      "input1": input1
    });
  }
</script>
<form>
  <input type="text" id="input1"/>
  <button type="button" onclick="doSubmit()">Submit</button>
<form>

In Modern Ajax Call, JSON is commonly used for HTTP Request instead of application/x-www-form-urlencoded.

HTML Form (File Control and Ajax)

<script>
  function doSubmit(){
    // Form Data
    var formData = new FormData();

    var fileSelect = document.getElementById("fileSelect");
    if(fileSelect.files && fileSelect.files.length == 1){
     var file = fileSelect.files[0]
     formData.set("file", file , file.name);
    }

    var input1 = document.getElementById("input1");
    formData.set("input1", input1.value)
    // Http Request  
    var request = new XMLHttpRequest();
    request.open('POST', "http://localhost:8080/testMultipart");
    request.send(formData);
  }
</script>
<form>
  <input type="text" id="input1"/>
  <input type="file" id="fileSelect"/>
  <button type="button" onclick="doSubmit()">Submit</button>
</form>

FormData JavaScript Object is used for sending form data in for XMLHttpRequest (Ajax). FormData would accept file, blob and string for parameter.

Remark: There are slightly difference between append() and set() method for FormData. set() would overwrite all existing values with the new one while append() will append the new value to FormData whatever the key exits or not.