hmn
/
hmn
4
Fork 9
Code Issues 59 Pull Requests 1 Releases Activity

Fix issues with asset upload 

It didn't work when creating a new project or editing personal projects,
due to routing issues. I also took this opportunity to make the script
support multiple form submit buttons, since in some cases we will have a
submit button on each tab, and I figured they all should respect the
fact that you have an upload in progress.
This commit is contained in:
Ben Visness 2022-08-01 21:59:42 -05:00
parent a295d0ed52
commit d164a58ba0
5 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
public/js/markdown_upload.js
View File

@ -1,28 +1,31 @@
/* Requires base64.js
// Requires base64.js
Usage: setupMarkdownUpload(eSubmit, eFileInput, eUploadBar, eText, doMarkdown, maxFileSize, uploadUrl)
eSubmit is the element of the button to submit/save the markdown changes. It
will be disabled and tell users files are uploading while uploading is
happening.
eFileInput is the <input type="file">
eUploadBar usually looks like
<div class="upload_bar flex-grow-1">
<div class="instructions">
Upload files by dragging & dropping, pasting, or <label class="pointer link" for="file_input">selecting</label> them.
</div>
<div class="progress flex">
<div class="progress_text mr3"></div>
<div class="progress_bar flex-grow-1 flex-shrink-1 pa1"><div class=""></div></div>
</div>
</div>
eText is the text field that can be dropped into and is editing the markdown.
doMarkdown is the function returned by initLiveMarkdown.
maxFileSize
uploadUrl
*/
function setupMarkdownUpload(eSubmit, eFileInput, eUploadBar, eText, doMarkdown, maxFileSize, uploadUrl) {
const submitText = eSubmit.value;
/**
* Sets up file / image uploading for Markdown content.
*
* @param eSubmits A list of elements of buttons to submit/save the page you're on. They
* will be disabled and tell users files are uploading while uploading is
* happening.
* @param eFileInput The `<input type="file">`
* @param eUploadBar Usually looks like
* ```
* <div class="upload_bar flex-grow-1">
* <div class="instructions">
* Upload files by dragging & dropping, pasting, or <label class="pointer link" for="file_input">selecting</label> them.
* </div>
* <div class="progress flex">
* <div class="progress_text mr3"></div>
* <div class="progress_bar flex-grow-1 flex-shrink-1 pa1"><div class=""></div></div>
* </div>
* </div>
* ```
* @param eText The text field that can be dropped into and is editing the markdown.
* @param doMarkdown The function returned by `initLiveMarkdown`.
* @param maxFileSize The max allowed file size in bytes.
* @param uploadUrl The URL to POST assets to (unique per project to avoid CORS issues).
*/
function setupMarkdownUpload(eSubmits, eFileInput, eUploadBar, eText, doMarkdown, maxFileSize, uploadUrl) {
const submitTexts = Array.from(eSubmits).map(e => e.value);
const uploadProgress = eUploadBar.querySelector('.progress');
const uploadProgressText = eUploadBar.querySelector('.progress_text');
const uploadProgressBar = eUploadBar.querySelector('.progress_bar');
@ -207,8 +210,10 @@ function setupMarkdownUpload(eSubmit, eFileInput, eUploadBar, eText, doMarkdown,
uploadProgressText.textContent = `Uploading files ${currentBatchDone+1}/${currentBatchSize}`;
eUploadBar.classList.add("uploading");
uploadProgressBarFill.style.width = "0%";
eSubmit.disabled = true;
eSubmit.value = "Uploading files...";
for (const e of eSubmits) {
e.disabled = true;
e.value = "Uploading files...";
}
try {
let utf8Filename = strToUTF8Arr(next.file.name);
@ -228,8 +233,10 @@ function setupMarkdownUpload(eSubmit, eFileInput, eUploadBar, eText, doMarkdown,
uploadNext();
}
} else {
eSubmit.disabled = false;
eSubmit.value = submitText;
for (const [i, e] of eSubmits.entries()) {
e.disabled = false;
e.value = submitTexts[i];
}
eUploadBar.classList.remove("uploading");
currentBatchSize = 0;
currentBatchDone = 0;

12
src/migration/seed.go
View File

@ -163,16 +163,8 @@ func SampleSeed() {
}
}
// admin := CreateAdminUser("admin", "12345678")
// user := CreateUser("regular_user", "12345678")
// hmnProject := CreateProject("hmn", "Handmade Network")
// Create category
// Create thread
// Create accepted user project
// Create pending user project
// Create showcase items
// Create codelanguages
// Create library and library resources
// Finally, set sequence numbers to things that won't conflict
utils.Must1(tx.Exec(ctx, "SELECT setval('project_id_seq', 100, true);"))
utils.Must0(tx.Commit(ctx))
}

2
src/templates/src/editor.html
View File

@ -123,7 +123,7 @@
/ Asset upload
*/
setupMarkdownUpload(
document.querySelector("#form input[type=submit]"),
document.querySelectorAll("#form input[type=submit]"),
document.querySelector('#file_input'),
document.querySelector('.upload_bar'),
textField,

2
src/templates/src/project_edit.html
View File

@ -389,7 +389,7 @@
// Asset upload //
//////////////////
setupMarkdownUpload(
document.querySelector("#project_form [data-name=Description] input[type=submit]"),
document.querySelectorAll("#project_form input[type=submit]"),
document.querySelector('#file_input'),
document.querySelector('.upload_bar'),
description,

5
src/website/routes.go
View File

@ -186,14 +186,15 @@ func NewWebsiteRoutes(conn *pgxpool.Pool) http.Handler {
fmt.Sprintf("blog%s", c.PathParams["remainder"]), nil,
), http.StatusMovedPermanently)
})
rb.POST(hmnurl.RegexAssetUpload, AssetUpload)
}
officialProjectRoutes := anyProject.WithMiddleware(officialProjectMiddleware)
personalProjectRoutes := hmnOnly.Group(hmnurl.RegexPersonalProject, personalProjectMiddleware)
attachProjectRoutes(&officialProjectRoutes)
attachProjectRoutes(&personalProjectRoutes)
anyProject.POST(hmnurl.RegexAssetUpload, AssetUpload)
// TODO(ben): Uh, should these all be pulled into the project route group above...?
anyProject.GET(hmnurl.RegexEpisodeList, EpisodeList)
anyProject.GET(hmnurl.RegexEpisode, Episode)
anyProject.GET(hmnurl.RegexCineraIndex, CineraIndex)