Browse Source

Implement image uploads

pull/5/head
L. Bradley LaBoon 4 months ago
parent
commit
6476f7543d
  1. 28
      global.js
  2. 2
      images/images.css
  3. 4
      images/images.js
  4. 4
      images/index.shtml
  5. 72
      images/upload/index.shtml
  6. 31
      images/upload/upload.css
  7. 147
      images/upload/upload.js

28
global.js

@ -645,6 +645,32 @@ function oauthPost(endpoint, data, callback)
xmlhttp.send(data.toString());
}
// Make an object storage HTTP PUT request
function objPut(url, data, progress, callback)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.upload.addEventListener("progress", progress);
xmlhttp.open("PUT", url, true);
xmlhttp.setRequestHeader("Content-Type", "application/octet-stream");
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState != 4)
return;
if (xmlhttp.status >= 400) {
console.log("Error " + xmlhttp.status);
console.log("PUT " + url);
alert("An error occurred during file upload!");
return;
}
callback();
};
xmlhttp.send(data);
}
// Parse URL parameters
function parseParams()
{
@ -766,4 +792,4 @@ function translateKernel(slug, element)
apiGet("/linode/kernels/" + slug, callback, null);
}
export { settings, elements, regionNames, apiDelete, apiGet, apiPost, apiPut, md5, migrateETA, oauthPost, oauthScopes, parseParams, setupHeader, eventTitles, timeString, translateKernel };
export { settings, elements, regionNames, apiDelete, apiGet, apiPost, apiPut, md5, migrateETA, oauthPost, oauthScopes, objPut, parseParams, setupHeader, eventTitles, timeString, translateKernel };

2
images/images.css

@ -17,7 +17,7 @@
@import url('/global.css');
table td:nth-of-type(6) {
table td:nth-of-type(7) {
text-align: right;
}

4
images/images.js

@ -49,6 +49,10 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader, time
label.innerHTML = image.label;
row.appendChild(label);
var status = document.createElement("td");
status.innerHTML = image.status.charAt(0).toUpperCase() + image.status.slice(1).replace(/_/g, " ");
row.appendChild(status);
var size = document.createElement("td");
size.innerHTML = image.size + " MB";
row.appendChild(size);

4
images/index.shtml

@ -32,6 +32,7 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<thead>
<tr>
<td>Image</td>
<td>Status</td>
<td>Size</td>
<td>Type</td>
<td>Created</td>
@ -41,10 +42,11 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
</thead>
<tbody id="image-body">
<tr class="lmc-tr1">
<td id="loading" colspan="6">Loading...</td>
<td id="loading" colspan="7">Loading...</td>
</tr>
</tbody>
</table>
<p class="sub-links"><a href="/images/upload">Upload a Custom Image</a></p>
</div>
</div>
</body>

72
images/upload/index.shtml

@ -0,0 +1,72 @@
<!--
This file is part of Linode Manager Classic.
Linode Manager Classic is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Linode Manager Classic is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
-->
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LMC - Upload a Custom Image</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="upload.css" />
<script src="upload.js" type="module"></script>
</head>
<body>
<!--#include virtual="/include/header.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/linodes">Linodes</a> » <a href="/images">Images</a> » <span class="top-links-title">Upload</span></div>
<div id="upload">
<p class="warning">Image uploading is currently in beta and is subject to the terms of the <a target="_blank" href="https://www.linode.com/legal-eatp/">Early Adopter Testing Agreement</a>.</p>
<table class="lmc-table">
<thead>
<tr>
<td colspan="3">Upload a Custom Image</td>
</tr>
</thead>
<tbody>
<tr class="lmc-tr3">
<td>Label</td>
<td colspan="2"><input id="label" type="text" size="50" /></td>
</tr>
<tr class="lmc-tr3">
<td>Description</td>
<td colspan="2"><textarea id="description" rows="3" cols="60"></textarea></td>
</tr>
<tr class="lmc-tr3">
<td>Region</td>
<td><select id="region"></select></td>
<td class="info">
For fastest initial upload, select the region that is geographically closest to you.<br />
Once uploaded you will be able to deploy the image to other regions.
</td>
</tr>
<tr id="next-row" class="lmc-tr3">
<td></td>
<td colspan="2"><button disabled id="next-button" type="button">Next</button></td>
</tr>
<tr class="lmc-tr3 step-2">
<td>File Select</td>
<td colspan="2"><input id="image-file" type="file" /></td>
</tr>
<tr class="lmc-tr3 step-2">
<td></td>
<td colspan="2"><button disabled id="upload-button" type="button">Upload</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

31
images/upload/upload.css

@ -0,0 +1,31 @@
/*
* This file is part of Linode Manager Classic.
*
* Linode Manager Classic is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Linode Manager Classic is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
*/
@import url('/global.css');
.step-2 {
display: none;
}
tbody tr td:first-of-type {
font-weight: bold;
text-align: right;
}
#upload {
padding: 0px 15px 15px;
}

147
images/upload/upload.js

@ -0,0 +1,147 @@
/*
* This file is part of Linode Manager Classic.
*
* Linode Manager Classic is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Linode Manager Classic is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
*/
import { settings, elements, regionNames, apiGet, apiPost, objPut, parseParams, setupHeader } from "/global.js";
(function()
{
// Element names specific to this page
elements.description = "description";
elements.imageFile = "image-file";
elements.label = "label";
elements.nextButton = "next-button";
elements.nextRow = "next-row";
elements.region = "region";
elements.step2 = "step-2";
elements.uploadButton = "upload-button";
// Data recieved from API calls
var data = {};
data.url = "";
// Static references to UI elements
var ui = {};
ui.description = {};
ui.imageFile = {};
ui.label = {};
ui.nextButton = {};
ui.nextRow = {};
ui.region = {};
ui.uploadButton = {};
// Callback for regions API call
var displayRegions = function(response)
{
for (var i = 0; i < response.data.length; i++) {
var dc = document.createElement("option");
dc.value = response.data[i].id;
if (regionNames[response.data[i].id])
dc.innerHTML = regionNames[response.data[i].id];
else
dc.innerHTML = response.data[i].id;
ui.region.appendChild(dc);
}
ui.nextButton.disabled = false;
};
// Callback for URL generate API call
var displayUpload = function(response)
{
data.url = response.upload_to;
ui.nextRow.remove();
ui.uploadButton.disabled = false;
var step2 = document.getElementsByClassName(elements.step2);
for (var i = 0; i < step2.length; i++)
step2[i].style.display = "table-row";
};
// Click handler for next button
var handleNext = function(event)
{
if (event.currentTarget.disabled)
return;
ui.nextButton.disabled = true;
ui.nextButton.innerHTML = "Please wait...";
var req = {
"label": ui.label.value,
"region": ui.region.value
};
if (ui.description.value.length)
req.description = ui.description.value;
apiPost("beta/images/upload", req, displayUpload);
};
// Click handler for upload button
var handleUpload = function(event)
{
if (event.currentTarget.disabled || !ui.imageFile.files.length)
return;
ui.uploadButton.disabled = true;
ui.uploadButton.innerHTML = "Uploading...";
objPut(data.url, ui.imageFile.files[0], uploadProgress, function()
{
location.href = "/images";
});
};
// Progress monitor for upload
var uploadProgress = function(event)
{
var progress = event.loaded / event.total * 100;
ui.uploadButton.innerHTML = "Uploading..." + progress.toFixed(0) + "%";
};
// Initial setup
var setup = function()
{
// Parse URL parameters
data.params = parseParams();
setupHeader();
// Highlight the Linodes nav link
var navLinks = document.getElementsByClassName(elements.nav);
for (var i = 0; i < navLinks.length; i++) {
if (navLinks[i].pathname == "/linodes/")
navLinks[i].className = elements.navActive;
}
// Get element references
ui.description = document.getElementById(elements.description);
ui.imageFile = document.getElementById(elements.imageFile);
ui.label = document.getElementById(elements.label);
ui.nextButton = document.getElementById(elements.nextButton);
ui.nextRow = document.getElementById(elements.nextRow);
ui.region = document.getElementById(elements.region);
ui.uploadButton = document.getElementById(elements.uploadButton);
// Attach event listeners
ui.nextButton.addEventListener("click", handleNext);
ui.uploadButton.addEventListener("click", handleUpload);
// Get data from API
apiGet("/regions", displayRegions, null);
};
// Attach onload handler
window.addEventListener("load", setup);
})();
Loading…
Cancel
Save