File API

select a file

declare File in FileList

<form method="post" action="upload" name="myForm" enctype="multipart/form-data">
  <input type="file" name="myUploadFile" />
</form>
    

if you wish try submit, you must be cloned this project, and read usage section in readme.md file

Download File from frontend, not backend

const anchor = document.createElement('a')
const oneFile = element.files.item(0);
anchor.href = URL.createObjectURL(oneFile);
anchor.target = '_blank';
anchor.download = 'new_' + oneFile.name;
anchor.click()
    

download file by the input

maybe you wish using the button

if you wish download your file, and your URL is Blob URL. You can use a <a href="blobUrl" ></a>, and set attribute download for the file name, otherwise, you must be transformed other formats to Blob URL.

send form data by axios (JavaScript)

axios({
  baseURL: location.origin,
  method: 'POST',
  headers: {'Content-Type': 'multipart/form-data'},
  url: '/upload',
  data: new FormData(document.myForm)
})
    

using axios in config object, headers set 'Content-Type' as 'multipart/form-data, must be assign boundary string, ex: boundary=----HiChris, formating of data of config would auto transform to form-data. otherwise, if data is a FormData object, boundary string would auto append on 'Content-Type': 'multipart/form-data

you can see request body by network of debug tool of Chrome

show as image

File -> Blob url -> image

<img id="image" src="" alt="" />
    

const inputFile = document.myForm.myUploadFile;
const img = document.querySelector('#image');

const oneFile = inputFile.files.item(0);
blob_url = URL.createObjectURL(oneFile);
img.src = blob_url;
  

show as canvas

image -> canvas

<canvas id="canvas" width="200" height="10" />
    

const img = document.querySelector('#image');
const canvas = document.querySelector('#canvas');
canvas.width = img.width,
canvas.height = img.height

const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
  

canvas as Base64

canvas -> base64

<textarea id="base64" name="name" rows="8" cols="80"></textarea>
    

const canvas = document.querySelector('#canvas');
// const ctx = canvas.getContext('2d');
// ctx.drawImage(img, 0, 0, img.width, img.height);

const base64 = document.querySelector('#base64');
base64.value = canvas.toDataURL('image/jpeg')
  

show as text

File -> FileReader -> context

<textarea id="text" name="name" rows="8" cols="80"></textarea>
    

const text = document.querySelector('#text');
const reader = new FileReader();
reader.onload = function (e) {
  text.innerText = e.target.result
}

const inputFile = document.myForm.myUploadFile;
const oneFile = inputFile.files.item(0);
blobUrl = URL.createObjectURL(oneFile);
reader.readAsText(blobUrl, "UTF-8")
  

show as binary

File -> FileReader -> binaryString

<textarea id="binaryString" name="name" rows="8" cols="80"></textarea>
    

const binaryString = document.querySelector('#binaryString');
const reader = new FileReader();
reader.onload = function (e) {
  binaryString.innerText = JSON.stringify((new Uint8Array(e.target.result)).join(', '))
}

const inputFile = document.myForm.myUploadFile;
const oneFile = inputFile.files.item(0);
blobUrl = URL.createObjectURL(oneFile);
reader.readAsArrayBuffer(blobUrl)