Improve inline documentation
parent
72a85a825d
commit
f2ede11c60
|
|
@ -86,7 +86,7 @@
|
|||
placeholder="">
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Your keys will be stored in the database until the dropbox link expires.
|
||||
Your keys will be stored in the database until the dropbox link expires. See <a class="text-blue-600 hover:text-blue-800" href="help#credentials">creating credentials</a> for more information.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
value="">
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Specify a <a class="text-blue-600 hover:text-blue-800" target="_blank" href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/acl-overview.html#canned-acl">canned ACL</a>. Otherwise, object access permissions will follow bucket defaults.
|
||||
Specify a <a class="text-blue-600 hover:text-blue-800" target="_blank" href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/acl-overview.html#canned-acl">canned ACL</a>. Otherwise, object access permissions will follow bucket defaults, usually private unless <a class="text-blue-600 hover:text-blue-800" href="help#public-access">public access</a> is configured.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -164,6 +164,11 @@
|
|||
data-derive-notice="#expiry-notice">
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<a
|
||||
class="px-6 py-2 rounded-md text-blue-600 hover:text-blue-800 focus:ring-2 focus:ring-offset-2 focus:ring-blue-600"
|
||||
href="help#create">
|
||||
Help
|
||||
</a>
|
||||
<input
|
||||
class="px-6 py-2 rounded-md bg-green-600 text-white hover:bg-green-700 focus:ring-2 focus:ring-offset-2 focus:ring-green-600"
|
||||
type="submit"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
{{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"}}
|
||||
|
|
@ -38,6 +38,7 @@ createAreas.forEach(createArea => {
|
|||
noticeArea.classList.add('hidden');
|
||||
noticeArea.innerText = message;
|
||||
}
|
||||
window.scrollTo({ top: 0 });
|
||||
}
|
||||
|
||||
createArea.addEventListener('submit', e => {
|
||||
|
|
@ -65,6 +66,7 @@ Prefix: ${data.get('Prefix')}
|
|||
Expires: ${data.get('ExpiresNumber')}${data.get('ExpiresUnits')}
|
||||
`.trim(),
|
||||
});
|
||||
window.scrollTo({ top: 0 });
|
||||
})
|
||||
.catch(showError);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
{{template "head.tmpl" "Dropbox"}}
|
||||
<div class="upload space-y-8 px-6 my-8">
|
||||
<div class="upload space-y-12 px-6 my-12">
|
||||
|
||||
<h1 class="my-4 text-4xl font-bold text-center">Drop a file</h1>
|
||||
<section class="space-y-4">
|
||||
<h1 class="text-4xl font-bold text-center">Drop a file</h1>
|
||||
|
||||
<div class="notice-area hidden p-4 bg-red-100 text-red-700"></div>
|
||||
|
||||
<section>
|
||||
<div class="drop-area"></div>
|
||||
<div class="status-area"></div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue