diff --git a/assets/js/__tests__/upload.spec.ts b/assets/js/__tests__/upload.spec.ts
index 4647fbb4..aa7a6ef5 100644
--- a/assets/js/__tests__/upload.spec.ts
+++ b/assets/js/__tests__/upload.spec.ts
@@ -58,10 +58,10 @@ describe('Image upload form', () => {
let scraperError: HTMLDivElement;
let fetchButton: HTMLButtonElement;
let tagsEl: HTMLTextAreaElement;
- let tagsinputEl: HTMLDivElement;
- let tagEl: HTMLSpanElement;
+ let taginputEl: HTMLDivElement;
let sourceEl: HTMLInputElement;
let descrEl: HTMLTextAreaElement;
+ let submitButton: HTMLButtonElement;
const assertFetchButtonIsDisabled = () => {
if (!fetchButton.hasAttribute('disabled')) throw new Error('fetchButton is not disabled');
@@ -79,19 +79,12 @@ describe('Image upload form', () => {
-
-
- "safe x"
-
-
- "pony x"
-
-
- "tag3 x"
-
-
+
+
+
+
`,
);
@@ -101,11 +94,11 @@ describe('Image upload form', () => {
remoteUrl = assertNotUndefined($$('.js-scraper')[1]);
scraperError = assertNotUndefined($$('.js-scraper')[2]);
tagsEl = assertNotNull($('.js-image-tags-input'));
- tagsinputEl = assertNotNull($('.js-taginput'));
- tagEl = assertNotNull($('.tag')); // ensure at least one exists
+ taginputEl = assertNotNull($('.js-taginput'));
sourceEl = assertNotNull($('.js-source-url'));
descrEl = assertNotNull($('.js-image-descr-input'));
fetchButton = assertNotNull($('#js-scraper-preview'));
+ submitButton = assertNotNull($('.actions > .button'))
setupImageUpload();
fetchMock.resetMocks();
diff --git a/assets/js/upload.js b/assets/js/upload.js
index b9d2b3fa..3380e4bd 100644
--- a/assets/js/upload.js
+++ b/assets/js/upload.js
@@ -176,40 +176,26 @@ function setupImageUpload() {
const errorElement = makeEl('span', { className: 'help-block tag-error' });
errorElement.innerText = message;
- buttonAfter.parentElement.insertBefore(errorElement, buttonAfter);
+ buttonAfter.insertAdjacentElement('beforebegin', errorElement);
}
function clearTagErrors() {
- const tagErrorElements = $$('.tag-error');
-
- // remove() causes the length to decrease
- while (tagErrorElements.length > 0) {
- tagErrorElements[0].remove();
- }
+ $$('.tag-error').forEach(el => el.remove());
}
// populate tag error helper bars as necessary
// return true if all checks pass
// return false if any check fails
function validateTags() {
- const tags = $$('.tag');
+ const tagInput = $('textarea.js-taginput');
- if (tags.length === 0) {
- createTagError('Tag input must contain at least 3 tags');
- return false;
+ if (!tagInput) {
+ return true;
}
- const tagsArr = [];
-
- for (const i in tags) {
- let tag = tags[i].innerText;
-
- tag = tag.substring(0, tag.length - 2); // remove " x" from the end
- tagsArr.push(tag);
- }
+ const tagsArr = tagInput.value.split(',').map(t => t.trim());
const ratingsTags = ['safe', 'suggestive', 'questionable', 'explicit', 'semi-grimdark', 'grimdark', 'grotesque'];
-
const errors = [];
let hasRating = false;