Skip to main content

max / makenotwork

3.7 KB · 78 lines History Blame Raw
1 (function() {
2 'use strict';
3 var itemId = document.getElementById('wizard-item-content-file-cfg').dataset.itemId;
4 var dropArea = document.getElementById('file-upload-area');
5 var fileInput = document.getElementById('file-input');
6 var statusEl = document.getElementById('file-upload-status');
7
8 initDropzone(dropArea, fileInput, function(file) {
9 uploadFile(file);
10 });
11
12 function uploadFile(file) {
13 var contentType = file.type || 'application/octet-stream';
14 statusEl.innerHTML =
15 '<div class="upload-status">' +
16 '<div class="upload-status-row">' +
17 '<span id="file-upload-filename"></span>' +
18 '<span id="file-upload-percent">0%</span></div>' +
19 '<div class="progress-bar-container progress-bar-container--slim progress-bar-container--rounded">' +
20 '<div id="file-progress-bar" class="progress-bar progress-bar--highlight"></div></div></div>';
21
22 var uploader = new S3Uploader({
23 filenameEl: document.getElementById('file-upload-filename'),
24 percentEl: document.getElementById('file-upload-percent'),
25 progressBar: document.getElementById('file-progress-bar'),
26 });
27
28 // Create version then upload
29 fetch('/api/items/' + itemId + '/versions', {
30 method: 'POST',
31 headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
32 body: JSON.stringify({ version_number: '1.0', changelog: null })
33 })
34 .then(function(res) {
35 if (!res.ok) return res.json().catch(function() { return {}; }).then(function(d) {
36 throw new Error(d.error || 'Failed to create version');
37 });
38 return res.json();
39 })
40 .then(function(verData) {
41 return fetch('/api/versions/' + verData.id + '/upload/presign', {
42 method: 'POST',
43 headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
44 body: JSON.stringify({ file_name: file.name, content_type: contentType })
45 }).then(function(res) {
46 if (!res.ok) return res.json().catch(function() { return {}; }).then(function(d) {
47 throw new Error(d.error || 'Failed to get upload URL');
48 });
49 return res.json();
50 }).then(function(data) {
51 return uploader.upload(data.upload_url, file, data.s3_key, contentType, data.cache_control)
52 .then(function(s3Key) { return { s3Key: s3Key, versionId: verData.id }; });
53 });
54 })
55 .then(function(result) {
56 return fetch('/api/versions/' + result.versionId + '/upload/confirm', {
57 method: 'POST',
58 headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
59 body: JSON.stringify({ s3_key: result.s3Key, file_size_bytes: file.size })
60 });
61 })
62 .then(function(res) {
63 if (!res.ok) return res.json().catch(function() { return {}; }).then(function(d) {
64 throw new Error(d.error || 'Failed to confirm upload');
65 });
66 statusEl.innerHTML = '<div class="upload-status-msg">Upload complete.</div>';
67 })
68 .catch(function(err) {
69 // Server error text is set via textContent, not innerHTML, so a
70 // message echoed from an API response can't inject markup.
71 var msg = document.createElement('div');
72 msg.className = 'upload-status-msg is-error';
73 msg.textContent = err.message || 'Upload failed';
74 statusEl.replaceChildren(msg);
75 });
76 }
77 })();
78