Example xhr request to post file from form to dropbox

dropbox-form-upload.js

<form action="/" method="post" name="newsletter">
	<input type="text" name="first_name" value="stuart" />
	<input type="file" id="resume" />
	<input type="hidden" id="dropbox" />
	<input type="hidden" name="zlf" value="1" />
	<button type="submit">Submit</button>
</form>
<script>
	document.forms.newsletter.addEventListener('submit', function cb(evt) {
		evt.preventDefault()
	
		// API key from here: https://dropbox.github.io/dropbox-api-v2-explorer/#files_upload
		// need to consider how this gets secured
		var TOKEN = ''		
		var dir = 'api-test/'
		var file = document.getElementById('resume').files[0]		
		var promise = new Promise(function (resolve, reject) {
	
			// Dropbox requires application/octet-stream
			var xhr = new XMLHttpRequest();
			
			xhr.onload = function() {
				if (xhr.status === 200) {
					resolve(JSON.parse(xhr.response));
				}
				else {
					reject(xhr.response || 'Unable to upload file');
				}
			};
			
			xhr.open('POST', 'https://content.dropboxapi.com/2/files/upload');
			xhr.setRequestHeader('Authorization', 'Bearer ' + TOKEN);
			xhr.setRequestHeader('Content-Type', 'application/octet-stream');
			xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({
				path: '/' + dir + file.name,
				mode: 'add',
				autorename: true,
				mute: false
			}));
			
			xhr.send(file);
		})
		
		promise
		.then(function (result) {
			// Save dropbox response to form
			document.getElementById('dropbox').value = JSON.stringify(result)
			
			// Submit form on successful upload
			evt.target.submit()
		})
		.catch(function (err) {
			console.error(err)
		})
		
		return false
	})

</script>