Mercurial Hosting > freedit
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
--- 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
--- 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] {
--- 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(); +}
--- 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>
--- 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
--- 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>
--- 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