TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>ImagePaste</title>
		<meta charset="utf-8">
		<link rel="icon" type="image/png" href="./img/ImagePaste.png">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f5f5f5;
				margin: 0px;
			}

			#pasteInstructin{
				font-size: 2em;
				position: absolute;
				bottom: 0.3em;
				right: 1em;
				pointer-events: none;
				color: #adadad;

			}

			#preview{
				max-width: 100%;
				max-height: 50vh;
			}
		</style>
		<link rel="stylesheet" href="../../script/semantic/semantic.min.css">
		<script src="../../script/jquery.min.js"></script>
		<script src="../../script/semantic/semantic.min.js"></script>
		<script src="../../script/ao_module.js"></script>
	</head>
	<body>
		<br>
		<div class="ui container">
			<p id="instruction">Copy an image from somewhere else and press Ctrl+V in the box below to save it in this Server</p>
			<div class="ui basic message" style="height: 60vh;">
				<div style="width: 100%;" align="center">
					<img id="preview" src=""></img>
				</div>
				
				<p id="pasteInstructin">Ctrl + V</p>
			</div>
			<button class="ui mini basic green button pasteOnly" onclick="uploadImageToTarget();">Upload</button>
			<div class="ui checkbox pasteOnly" style="margin-left: 1em;">
				<input type="checkbox" id="uploadOnPaste" onchange="toggleUploadOnPaste(this.checked);">
				<label>Upload on paste</label>
			</div>
			<div class="ui icon mini input pasteOnly" style="margin-left: 1em; width: 50%">
				<input type="text" id="savepath" placeholder="user:/Desktop" readonly>
				<i onclick="pickSavePath();" class="circular folder link icon"></i>
			</div>
			<div style="float: right; display:none;" id="uploadSuccIcon">
				<i class="ui green checkmark icon"></i> Uploaded
			</div>
			
		</div>
		<script>
			var uploadOnPaste = false;
			var savePath = "user:/Desktop";
			var currentViewingPhotoBlob = undefined;

			//Get file information from the hash info
			var files = ao_module_loadInputFiles();
			if (files != null && files.length > 0){
				//Copy Mode
				var file = files[0]
				$("#preview").attr("src", "../../../media?file=" + file.filepath);
				$(".pasteOnly").hide();
				$("#pasteInstructin").text("Copy Image");
				$("#instruction").text(`Right click the image and select "Copy Image" to copy the image to clipboard.`);
			}else{
				//Paste Mode
				document.onpaste = function(event){
				var items = (event.clipboardData || event.originalEvent.clipboardData).items;
				console.log(JSON.stringify(items)); // will give you the mime types
					for (index in items) {
						var item = items[index];
						if (item.kind === 'file') {
							var blob = item.getAsFile();
							var reader = new FileReader();
							reader.onload = function(event){
								console.log(event.target.result);
								$("#preview").attr("src", event.target.result);
								uploadImageToTarget();
							}; // data url!
							reader.readAsDataURL(blob);
							currentViewingPhotoBlob = blob;
						}
						
					}
				}
			}

			//Load previous configs
			ao_module_storage.loadStorage("imgPaste", "uploadOnPaste", function(data){
				if (data == "true"){
					$("#uploadOnPaste")[0].checked = true;
				}else{
					$("#uploadOnPaste")[0].checked = false;
				}
			});

			ao_module_storage.loadStorage("imgPaste", "savepath", function(data){
				savePath = data;
				$("#savepath").val(savePath);
			});
			
			function toggleUploadOnPaste(checked){
				uploadOnPaste = checked;
				if (checked){
					ao_module_storage.setStorage("imgPaste", "uploadOnPaste", "true");
				}else{
					ao_module_storage.setStorage("imgPaste", "uploadOnPaste", "false");
				}
			}

			function pickSavePath(){
				ao_module_openFileSelector(fileSelected, savePath, "folder",false);
			}

			function fileSelected(filedata){
				for (var i=0; i < filedata.length; i++){
					var filename = filedata[i].filename;
					var filepath = filedata[i].filepath;
					$("#savepath").val(filepath);
					savePath = filepath;
				}

				//Save the value to storage
				ao_module_storage.setStorage("imgPaste", "savepath", savePath);
			}

			function uploadImageToTarget(){
				//Convert the image to file object
				if (currentViewingPhotoBlob == undefined){
					return;
				}
				var now = new Date();
				var currentUnix = Date.now()+"";
				var filename = "ImagePaste " + now.getUTCFullYear() + "-" + now.getUTCMonth() + "-" + now.getUTCDate() + (currentUnix).substr(currentUnix.length-6) + ".png";
				var imageFile = new File([currentViewingPhotoBlob], filename);
				ao_module_uploadFile(imageFile, savePath, function(data){
					if (data.error !== undefined){
						alert(data.error);
					}else{
						$("#uploadSuccIcon").slideDown("fast").delay(3000).slideUp("fast");
					}
				});
			}
		</script>
	</body>
</html>