From d164a58ba0f73b9cc2a50efff15ce95e8a99ad39 Mon Sep 17 00:00:00 2001 From: Ben Visness Date: Mon, 1 Aug 2022 21:59:42 -0500 Subject: [PATCH] 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. --- public/js/markdown_upload.js | 63 ++++++++++++++++------------- src/migration/seed.go | 12 +----- src/templates/src/editor.html | 2 +- src/templates/src/project_edit.html | 2 +- src/website/routes.go | 5 ++- 5 files changed, 42 insertions(+), 42 deletions(-) diff --git a/public/js/markdown_upload.js b/public/js/markdown_upload.js index 35768e6..30729b5 100644 --- a/public/js/markdown_upload.js +++ b/public/js/markdown_upload.js @@ -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 -eUploadBar usually looks like -
-
- Upload files by dragging & dropping, pasting, or them. -
-
-
-
-
-
-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 `` + * @param eUploadBar Usually looks like + * ``` + *
+ *
+ * Upload files by dragging & dropping, pasting, or them. + *
+ *
+ *
+ *
+ *
+ *
+ * ``` + * @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; diff --git a/src/migration/seed.go b/src/migration/seed.go index ec799c7..c41253c 100644 --- a/src/migration/seed.go +++ b/src/migration/seed.go @@ -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)) } diff --git a/src/templates/src/editor.html b/src/templates/src/editor.html index 5998187..5a83170 100644 --- a/src/templates/src/editor.html +++ b/src/templates/src/editor.html @@ -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, diff --git a/src/templates/src/project_edit.html b/src/templates/src/project_edit.html index 9edd068..f98d902 100644 --- a/src/templates/src/project_edit.html +++ b/src/templates/src/project_edit.html @@ -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, diff --git a/src/website/routes.go b/src/website/routes.go index 015d639..a8ad6e5 100644 --- a/src/website/routes.go +++ b/src/website/routes.go @@ -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)