lmc/images/upload/upload.js

/*
 * 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, countryContinents, apiGet, apiPost, objPut, parseParams, setupHeader } from "/global.js";

(function()
{
	// Element names specific to this page
	elements.dcOther = "dc-other";
	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.dcOther = {};
	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 (response.data[i].label && response.data[i].label.length)
				dc.innerHTML = response.data[i].label;
			else if (regionNames[response.data[i].id])
				dc.innerHTML = regionNames[response.data[i].id];
			else
				dc.innerHTML = response.data[i].id;
			var optgroup = null;
			if (countryContinents[response.data[i].country])
				optgroup = document.getElementById(countryContinents[response.data[i].country]);
			if (!optgroup)
				optgroup = ui.dcOther;
			optgroup.style.display = "initial";
			optgroup.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.dcOther = document.getElementById(elements.dcOther);
		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);
})();