mia/0x0
3
8
Fork 3
Code Issues 11 Pull requests 2 Projects 1 Wiki Activity

ux: paste to upload example template

Browse source 
This resolves #60 by providing an example template with a simple script that listens for paste events and POSTS the blob the current location.href.
This commit is contained in:
tomholford 2023-10-02 23:40:37 -07:00
parent 8a912e8744
commit 7739cbfcd1
1 changed files with 109 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
templates/examples/paste-to-upload.html Normal file
View file

@ -0,0 +1,109 @@
<pre>
THE NULL POINTER
================
{% set fhost_url = url_for("fhost", _external=True).rstrip("/") %}
HTTP POST files here:
curl -F'file=@yourfile.png' {{ fhost_url }}
You can also POST remote URLs:
curl -F'url=http://example.com/image.jpg' {{ fhost_url }}
If you don't want the resulting URL to be easy to guess:
curl -F'file=@yourfile.png' -Fsecret= {{ fhost_url }}
curl -F'url=http://example.com/image.jpg' -Fsecret= {{ fhost_url }}
Or you can shorten URLs:
curl -F'shorten=http://example.com/some/long/url' {{ fhost_url }}
You can also paste a file blob from your system's clipboard.
It is possible to append your own file name to the URL:
{{ fhost_url }}/aaa.jpg/image.jpeg
File URLs are valid for at least 30 days and up to a year (see below).
Shortened URLs do not expire.
Files can be set to expire sooner by adding an "expires" parameter (in hours)
curl -F'file=@yourfile.png' -Fexpires=24 {{ fhost_url }}
OR by setting "expires" to a timestamp in epoch milliseconds
curl -F'file=@yourfile.png' -Fexpires=1681996320000 {{ fhost_url }}
Expired files won't be removed immediately, but will be removed as part of
the next purge.
Whenever a file that does not already exist or has expired is uploaded,
the HTTP response header includes an X-Token field. You can use this
to perform management operations on the file.
To delete the file immediately:
curl -Ftoken=token_here -Fdelete= {{ fhost_url }}/abc.txt
To change the expiration date (see above):
curl -Ftoken=token_here -Fexpires=3 {{ fhost_url }}/abc.txt
{% set max_size = config["MAX_CONTENT_LENGTH"]|filesizeformat(True) %}
Maximum file size: {{ max_size }}
Not allowed: {{ config["FHOST_MIME_BLACKLIST"]|join(", ") }}
FILE RETENTION PERIOD
---------------------
retention = min_age + (-max_age + min_age) * pow((file_size / max_size - 1), 3)
days
{{'{: 6}'.format(config.get("FHOST_MAX_EXPIRATION", 31536000000)//86400000)}} | \
| \
| \
| \
| \
| \
| ..
| \
{{'{: 6.1f}'.format((config.get("FHOST_MIN_EXPIRATION", 2592000000)/2 + config.get("FHOST_MAX_EXPIRATION", 31536000000)/2)/86400000)}} | ----------..-------------------------------------------
| ..
| \
| ..
| ...
| ..
| ...
| ....
| ......
{{'{: 6}'.format(config.get("FHOST_MIN_EXPIRATION", 2592000000)//86400000)}} | ....................
0{{ ((config["MAX_CONTENT_LENGTH"]/2)|filesizeformat(True)).split(" ")[0].rjust(27) }}{{ max_size.split(" ")[0].rjust(27) }}
{{ max_size.split(" ")[1].rjust(54) }}
</pre>
<script>
document.addEventListener("DOMContentLoaded", function() {
const pasteTarget = document.getElementsByTagName("body")[0];
pasteTarget.addEventListener("paste", async function(event) {
const clipboardData = event.clipboardData;
if (clipboardData && clipboardData.items && clipboardData.items.length) {
// for now, just upload the first file if there is more than one
const item = clipboardData.items[0];
if (item.kind === "file") {
const blob = item.getAsFile();
await uploadFile(blob);
}
}
});
});
async function uploadFile(file) {
const formData = new FormData();
formData.append("file", file);
try {
const response = await fetch(location.href, {
method: "POST",
body: formData
});
if (response.ok) {
console.log("File successfully uploaded");
location.pathname = await response.text();
} else {
console.log("File upload failed");
}
} catch (error) {
console.error("There was a problem uploading the file:", error);
}
}
</script>