Merge pull request 'Implement image uploads' (#5) from image-uploads into master
Reviewed-on: https://git.bradleylaboon.com/lb.laboon/lmc/pulls/5
This commit is contained in:
commit
ef82debb25
28
global.js
28
global.js
@ -645,6 +645,32 @@ function oauthPost(endpoint, data, callback)
|
|||||||
xmlhttp.send(data.toString());
|
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
|
// Parse URL parameters
|
||||||
function parseParams()
|
function parseParams()
|
||||||
{
|
{
|
||||||
@ -766,4 +792,4 @@ function translateKernel(slug, element)
|
|||||||
apiGet("/linode/kernels/" + slug, callback, null);
|
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');
|
@import url('/global.css');
|
||||||
|
|
||||||
table td:nth-of-type(6) {
|
table td:nth-of-type(7) {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -49,6 +49,10 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader, time
|
|||||||
label.innerHTML = image.label;
|
label.innerHTML = image.label;
|
||||||
row.appendChild(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");
|
var size = document.createElement("td");
|
||||||
size.innerHTML = image.size + " MB";
|
size.innerHTML = image.size + " MB";
|
||||||
row.appendChild(size);
|
row.appendChild(size);
|
||||||
|
|||||||
@ -32,6 +32,7 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
|||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Image</td>
|
<td>Image</td>
|
||||||
|
<td>Status</td>
|
||||||
<td>Size</td>
|
<td>Size</td>
|
||||||
<td>Type</td>
|
<td>Type</td>
|
||||||
<td>Created</td>
|
<td>Created</td>
|
||||||
@ -41,10 +42,11 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody id="image-body">
|
<tbody id="image-body">
|
||||||
<tr class="lmc-tr1">
|
<tr class="lmc-tr1">
|
||||||
<td id="loading" colspan="6">Loading...</td>
|
<td id="loading" colspan="7">Loading...</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
<p class="sub-links"><a href="/images/upload">Upload a Custom Image</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</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