didactic-enigma/tests3.html at master · ericdevries/didactic-enigma · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<form id="file-form">
		<input type="file" name="images" id="file-select">
		<button>Upload</button>
	</form>

	<script type="text/javascript">
		var form = document.getElementById('file-form')

		form.onsubmit = function(event) {
			event.preventDefault();

			var formData = new FormData()
			var fileSelect = document.getElementById('file-select')
			var files = fileSelect.files
			var mimetype = null;

			for (var i = 0; i < files.length; i++) {
				var file = files[i];
				formData.append('file', file)

				mimetype = file.type
			}

			var xhr = new XMLHttpRequest();
			var url = 'https://{BUCKET}.s3.amazonaws.com/uploads/5?AWSAccessKeyId={ACCESS_KEY}&content-type=image%2Fpng&Expires={EXPIRES}&Signature={SIGNATURE}';

			url = url.replace('{BUCKET}', '');
			url = url.replace('{ACCESS_KEY}', '');
			url = url.replace('{EXPIRES}', '');
			url = url.replace('{SIGNATURE}', '');

			// Set up a handler for when the request finishes.
			xhr.onload = function () {
			  if (xhr.status === 200) {
			    // File(s) uploaded.
			    uploadButton.innerHTML = 'Upload';
			  } else {
			    alert('An error occurred!');
			  }
			};

			xhr.open('PUT', url, true);
			xhr.send(files[0])
		}

	</script>
</body>
</html>