lmc/images/upload/upload.js

148 lines
4.1 KiB
JavaScript

/*
* 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("/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);
})();