1
0
Fork 0
upl/web/help.tmpl

106 lines
3.8 KiB
Cheetah

{{template "head.tmpl" "Help"}}
<div class="space-y-12 px-6 my-12" method="POST">
<section class="space-y-6">
<h1 class="text-4xl font-bold text-center" id="create">Creating a dropbox</h1>
<div class="space-y-4">
<p>Before you can create a dropbox, you need an S3-compatible bucket and credentials for that bucket. Any service that implements S3-compatible multipart uploads are supported by this tool:</p>
<ul class="list-disc ml-6">
<li><a class="text-blue-600 hover:text-blue-800" target="_blank" href="https://aws.amazon.com/s3/">Amazon AWS S3</a></li>
<li><a class="text-blue-600 hover:text-blue-800" target="_blank" href="https://min.io">MinIO</a></li>
<li><a class="text-blue-600 hover:text-blue-800" target="_blank" href="https://www.digitalocean.com/products/spaces/">DigitalOcean Spaces</a></li>
<li>Many others...</li>
</ul>
</div>
<div class="space-y-4">
<h2 class="text-3xl font-bold" id="bucket">Creating a bucket</h2>
<p>Create a bucket for use with this tool. For security, avoid sharing a bucket with another system. On platforms protected by CORS like AWS, <a class="text-blue-600 hover:text-blue-800" target="_blank" href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/enabling-cors-examples.html">configure CORS</a> to allow requests from this tool:</p>
<pre class="text-xs text-gray-500">
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"http://UPL_HOSTNAME",
"https://UPL_HOSTNAME"
],
"ExposeHeaders": [
"ETag"
]
}
]
</pre>
<p>Additionally, consider setting up a <a class="text-blue-600 hover:text-blue-800" target="_blank" href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/mpu-abort-incomplete-mpu-lifecycle-config.html">lifecycle policy</a> to automatically abort incomplete multipart uploads.</a>
</div>
<div class="space-y-4">
<h2 class="text-3xl font-bold" id="credentials">Creating credentials</h2>
<p>Create an access and secret key pair for use with this tool. Follow your platform configuration for more information. On AWS, this can be done by creating a user in IAM. The access key must have the following capabilities:</p>
<pre class="text-xs text-gray-500">
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:AbortMultipartUpload",
"s3:ListMultipartUploadParts"
],
"Resource": "arn:aws:s3:::BUCKET_NAME/*"
}
]
}
</pre>
</div>
<div class="mt-6 space-y-4">
<h2 class="text-3xl font-bold" id="public-access">Allowing public access</h2>
<p>You can optionally allow users to access the uploaded files. This can be done by attaching the following <a class="text-blue-600 hover:text-blue-800" target="_blank" href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-policy-language-overview.html">bucket policy</a>:</p>
<pre class="text-xs text-gray-500">
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::BUCKET_NAME/*"
}
]
}
</pre>
</div>
<div class="my-4">
</div>
</section>
<section class="space-y-6">
<h1 class="text-4xl font-bold text-center">Uploading files</h1>
<div class="space-y-4">
<p>Work in progress...</p>
</div>
</section>
</div>
<script>
document.querySelectorAll('pre, code').forEach(codeArea => {
codeArea.innerHTML = codeArea.innerHTML.replace(/UPL_HOSTNAME/g, window.location.host);
});
</script>
{{template "foot.tmpl"}}