<form action="https://postman-echo.com/post" method="post" enctype="multipart/form-data" id="form">
<input type="file" name="attachments" id="attachments" multiple>
<input type="submit">
</form>
var storedFiles = [];
document.addEventListener("DOMContentLoaded", init, false);
function init() {
document.querySelector('#attachments').addEventListener('change', handleFileSelect, false);
document.querySelector('#form').addEventListener('submit', handleSubmit, false);
}
function handleFileSelect(e) {
console.log('called handleFileSelect');
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
filesArr.forEach(function(f) {
console.log('storing '+JSON.stringify(f));
storedFiles.push(f);
});
}
function handleSubmit(e) {
e.preventDefault();
console.log('do form submit', storedFiles.length);
var formData = new FormData();
for(var x=0;x<storedFiles.length;x++) {
formData.append('file'+x, storedFiles[x]);
console.log('adding a file to the form data '+x);
}
fetch('https://postman-echo.com/post', {
method:'POST',
body:formData
}).then(function(res) {
console.log('Status', res);
}).catch(function(e) {
console.log('Error',JSON.stringify(e));
});
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.