changeset 34:c8d47981c74f

upload using ajax
author Franklin Schmidt <fschmidt@gmail.com>
date Tue, 02 Aug 2022 20:46:02 -0600
parents 4fdc4ec0050b
children 1ce75c5ab0f7
files src/lib/Shared.luan src/site.css src/site.js src/test/upload.html src/test/upload.js.luan src/thread.html.luan src/upload_bbcode.js.luan
diffstat 7 files changed, 53 insertions(+), 111 deletions(-) [+]
line wrap: on
line diff
diff -r 4fdc4ec0050b -r c8d47981c74f src/lib/Shared.luan
--- a/src/lib/Shared.luan	Mon Aug 01 22:50:16 2022 -0600
+++ b/src/lib/Shared.luan	Tue Aug 02 20:46:02 2022 -0600
@@ -96,20 +96,4 @@
 	end
 end
 
-function Shared.get_url_from_file(file)
-	local url = "https://upload.uploadcare.com/base/"
-	local options = {
-		method = "POST"
-		enctype = "multipart/form-data"
-		parameters = {
-			UPLOADCARE_PUB_KEY = "fe3d30f3088a50941d45"
-			file = file
-		}
-	}
-	local response = uri(url,options).read_text()
-	response = json_parse(response)
-	local code = response.file or error()
-	return "https://ucarecdn.com/"..code.."/"..file.filename
-end
-
 return Shared
diff -r 4fdc4ec0050b -r c8d47981c74f src/site.css
--- a/src/site.css	Mon Aug 01 22:50:16 2022 -0600
+++ b/src/site.css	Tue Aug 02 20:46:02 2022 -0600
@@ -39,24 +39,8 @@
 	display: none;
 }
 
-span[inline_button] {
-	padding: 3px 7px;
-	background-color: #EDEDED;
-	font: inherit;
-	color: inherit;
-	border: 1px solid #BABABA;
-	text-decoration: none;
-	border-radius: 4px;
-}
-
 input[type="file"] {
-	appearance: none;
-	-webkit-appearance: none;
-	outline: none;
-	border: none;
-	padding: 0;
-	margin: 0;
-	width: 0;
+	display: none;
 }
 
 label[clickable] {
diff -r 4fdc4ec0050b -r c8d47981c74f src/site.js
--- a/src/site.js	Mon Aug 01 22:50:16 2022 -0600
+++ b/src/site.js	Tue Aug 02 20:46:02 2022 -0600
@@ -3,8 +3,7 @@
 	let request = new XMLHttpRequest();
 	let method = postData ? 'POST' : 'GET';
 	request.open( method, url );
-	let isMultipart = postData instanceof File;
-	if( postData && !isMultipart )
+	if( postData )
 		request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
 	request.onload = function() {
 		if( request.status !== 200 ) {
@@ -15,13 +14,7 @@
 		}
 		eval( request.responseText );
 	};
-	if(isMultipart) {
-		let formData = new FormData();
-		formData.append( 'file', postData );
-		request.send(formData);
-	} else {
-		request.send(postData);
-	}
+	request.send(postData);
 }
 
 window.onerror = function(msg, url, line, col, error) {
@@ -38,3 +31,35 @@
 		err += '\nstack = ' + error.stack;
 	ajax( '/error_log.js', 'err='+encodeURIComponent(err) );
 };
+
+function upload(input,callback) {
+	let file = input.files[0];
+	input.value = null;
+	let request = new XMLHttpRequest();
+	let url = 'https://upload.uploadcare.com/base/';
+	request.open( 'POST', url );
+	request.onload = function() {
+		if( request.status !== 200 ) {
+			let err = 'ajax failed: ' + request.status;
+			if( request.responseText ) {
+				err += '\n' + request.responseText;
+				document.write('<pre>'+request.responseText+'</pre>');
+			}
+			console.log(err);
+			ajax( '/error_log.js', 'err='+encodeURIComponent(err) );
+			return;
+		}
+		let response = JSON.parse(request.responseText);
+		let filename = file.name;
+		let url = 'https://ucarecdn.com/' + response.file + '/' + filename;
+		callback(url,filename);
+	};
+	let formData = new FormData();
+	formData.append( 'UPLOADCARE_PUB_KEY', 'fe3d30f3088a50941d45' );
+	formData.append( 'file', file );
+	request.send(formData);
+}
+
+function fileButtonClick(button) {
+	button.parentNode.querySelector('input[type="file"]').click();
+}
diff -r 4fdc4ec0050b -r c8d47981c74f src/test/upload.html
--- a/src/test/upload.html	Mon Aug 01 22:50:16 2022 -0600
+++ b/src/test/upload.html	Tue Aug 02 20:46:02 2022 -0600
@@ -7,11 +7,11 @@
 		</style>
 		<script src="/site.js"></script>
 		<script>
-			function gotFile(input) {
-				let file = input.files[0];
-				//console.log(file);
-				//console.log(file instanceof File);
-				ajax("upload.js",file);
+			function uploaded(url,filename) {
+				console.log(url);
+				let a = document.querySelector('a');
+				a.textContent = filename;
+				a.setAttribute('href',url);
 			}
 		</script>
 	</head>
@@ -19,10 +19,8 @@
 		<div content>
 			<p>top</p>
 			<p>
-				<label clickable
-					><input type=file xaccept="image/*" onchange="gotFile(this)"
-					><span inline_button>Upload File</span>
-				</label>
+				<input type=file xaccept="image/*" onchange="upload(this,uploaded)">
+				<button onclick="fileButtonClick(this)">Upload File</button>
 			</p>
 			<p><a></a></p>
 			<p>bottom</p>
diff -r 4fdc4ec0050b -r c8d47981c74f src/test/upload.js.luan
--- a/src/test/upload.js.luan	Mon Aug 01 22:50:16 2022 -0600
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,24 +0,0 @@
-local Luan = require "luan:Luan.luan"
-local error = Luan.error
-local stringify = Luan.stringify or error()
-local Io = require "luan:Io.luan"
-local Http = require "luan:http/Http.luan"
-local Shared = require "site:/lib/Shared.luan"
-local get_url_from_file = Shared.get_url_from_file or error()
-local Logging = require "luan:logging/Logging.luan"
-local logger = Logging.logger "test/upload.js"
-
-
-return function()
-	local file = Http.request.parameters.file or error()
-	--logger.info(stringify(file));
-	local url = get_url_from_file(file)
-	--logger.info("url = "..url)
-	Io.stdout = Http.response.text_writer()
-%>
-	let url = '<%=url%>';
-	let a = document.querySelector('a');
-	a.textContent = url;
-	a.setAttribute('href',url);
-<%
-end
diff -r 4fdc4ec0050b -r c8d47981c74f src/thread.html.luan
--- a/src/thread.html.luan	Mon Aug 01 22:50:16 2022 -0600
+++ b/src/thread.html.luan	Tue Aug 02 20:46:02 2022 -0600
@@ -9,7 +9,6 @@
 local head = Shared.head or error()
 local header = Shared.header or error()
 local footer = Shared.footer or error()
-local get_url_from_file = Shared.get_url_from_file or error()
 local Forum = require "site:/lib/Forum.luan"
 local forum_title = Forum.title or error()
 local Db = require "site:/lib/Db.luan"
@@ -82,14 +81,17 @@
 				let post = postDiv.getAttribute('post');
 				let text = postDiv.querySelector('textarea').value;
 				let postData = 'post=' + post + '&text=' + encodeURIComponent(text);
-				ajax("save_edit.js",postData);
+				ajax('save_edit.js',postData);
 			}
 
-			function upload(input) {
-				let postDiv = getPostDiv(input);
-				let post = postDiv.getAttribute('post');
-				let file = input.files[0];
-				ajax("/upload_bbcode.js?post="+post,file);
+			function gotFile(input) {
+				function uploaded(url,filename) {
+					let postDiv = getPostDiv(input);
+					let textarea = postDiv.querySelector('textarea');
+					textarea.focus();
+					textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
+				}
+				upload(input,uploaded);
 			}
 
 			function deletePost(span) {
@@ -150,10 +152,8 @@
 		<div hidden edit>
 			<textarea></textarea>
 			<p>
-				<label clickable
-					><input type=file onchange="upload(this)"
-					><span inline_button>upload</span>
-				</label>
+				<input type=file onchange="gotFile(this)">
+				<button onclick="fileButtonClick(this)">Upload File</button>
 				<button onclick="saveEdit(this)">save</button>
 				<button onclick="cancelEdit(this)">cancel</button>
 			</p>
diff -r 4fdc4ec0050b -r c8d47981c74f src/upload_bbcode.js.luan
--- a/src/upload_bbcode.js.luan	Mon Aug 01 22:50:16 2022 -0600
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,25 +0,0 @@
-local Luan = require "luan:Luan.luan"
-local error = Luan.error
-local stringify = Luan.stringify or error()
-local Io = require "luan:Io.luan"
-local Http = require "luan:http/Http.luan"
-local Shared = require "site:/lib/Shared.luan"
-local get_url_from_file = Shared.get_url_from_file or error()
-local Logging = require "luan:logging/Logging.luan"
-local logger = Logging.logger "test/upload.js"
-
-
-return function()
-	local post = Http.request.parameters.post or error()
-	local file = Http.request.parameters.file or error()
-	--logger.info(stringify(file));
-	local url = get_url_from_file(file)
-	--logger.info("url = "..url)
-	Io.stdout = Http.response.text_writer()
-%>
-	let postDiv = document.querySelector('[post="<%=post%>"]');
-	let textarea = postDiv.querySelector('textarea');
-	textarea.focus();
-	textarea.setRangeText('<%=url%>',textarea.selectionStart,textarea.selectionEnd,'select');
-<%
-end