Implement image uploads
This commit is contained in:
parent
1b0727722f
commit
6476f7543d
28
global.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 };
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
@import url('/global.css');
|
||||
|
||||
table td:nth-of-type(6) {
|
||||
table td:nth-of-type(7) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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
Normal file
72
images/upload/index.shtml
Normal file
@ -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
Normal file
31
images/upload/upload.css
Normal file
@ -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
Normal file
147
images/upload/upload.js
Normal file
@ -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…
Reference in New Issue
Block a user