Improve inline documentation
parent
72a85a825d
commit
f2ede11c60
|
@ -86,7 +86,7 @@
|
||||||
placeholder="">
|
placeholder="">
|
||||||
</div>
|
</div>
|
||||||
<p class="mt-1 text-sm text-gray-500">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -113,7 +113,7 @@
|
||||||
value="">
|
value="">
|
||||||
</div>
|
</div>
|
||||||
<p class="mt-1 text-sm text-gray-500">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -164,6 +164,11 @@
|
||||||
data-derive-notice="#expiry-notice">
|
data-derive-notice="#expiry-notice">
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-end">
|
<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
|
<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"
|
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"
|
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.classList.add('hidden');
|
||||||
noticeArea.innerText = message;
|
noticeArea.innerText = message;
|
||||||
}
|
}
|
||||||
|
window.scrollTo({ top: 0 });
|
||||||
}
|
}
|
||||||
|
|
||||||
createArea.addEventListener('submit', e => {
|
createArea.addEventListener('submit', e => {
|
||||||
|
@ -65,6 +66,7 @@ Prefix: ${data.get('Prefix')}
|
||||||
Expires: ${data.get('ExpiresNumber')}${data.get('ExpiresUnits')}
|
Expires: ${data.get('ExpiresNumber')}${data.get('ExpiresUnits')}
|
||||||
`.trim(),
|
`.trim(),
|
||||||
});
|
});
|
||||||
|
window.scrollTo({ top: 0 });
|
||||||
})
|
})
|
||||||
.catch(showError);
|
.catch(showError);
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,9 +1,11 @@
|
||||||
{{template "head.tmpl" "Dropbox"}}
|
{{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="drop-area"></div>
|
||||||
<div class="status-area"></div>
|
<div class="status-area"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
Loading…
Reference in New Issue