Skip to content

Instantly share code, notes, and snippets.

@crobinson42

crobinson42/index.html

Created December 29, 2018 14:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save crobinson42/0043b1c04714157b4d4edd8c4846905a to your computer and use it in GitHub Desktop.
Save crobinson42/0043b1c04714157b4d4edd8c4846905a to your computer and use it in GitHub Desktop.
Download ZIP
Axios file upload progress indicator
Raw
index.html
<html>
<title>Axios Progress Upload</title>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<input id="file" type="file" name="files" multiple="multiple" /><br />
<br>
<progress id="progress" max="100" value="0"></progress>
<button onclick="upload();" type="button">upload w/ axios</button>
<script>
function upload() {
const formData = new FormData()
const file = document.querySelector('#file').files[0]
const progress = document.querySelector('#progress')
formData.append('files', file)
axios.post('//localhost:2995/upload/file', formData, {
onUploadProgress: progressEvent => {
const percent = Math.ceil((progressEvent.loaded / file.size) * 100)
console.log('percent', percent)
progress.setAttribute('value', percent)
},
})
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment