First step for multiple dropzones per page.

Author: KN4CK3R

templates/repo/editor/upload.tmpl

@@ -26,7 +26,6 @@
 				</div>
 			</div>
 			<div class="field">
-				<div class="files"></div>
 				{{template "repo/upload" .}}
 			</div>
 			{{template "repo/editor/commit_form" .}}

templates/repo/issue/comment_tab.tmpl

@@ -14,7 +14,6 @@
 </div>
 {{if .IsAttachmentEnabled}}
 	<div class="field">
-		<div class="files"></div>
 		{{template "repo/upload" .}}
 	</div>
 {{end}}

templates/repo/issue/view_content.tmpl

@@ -197,7 +197,6 @@
 		</div>
 		{{if .IsAttachmentEnabled}}
 			<div class="field">
-				<div class="comment-files"></div>
 				{{template "repo/upload" .}}
 			</div>
 		{{end}}

templates/repo/release/new.tmpl

@@ -76,7 +76,6 @@
 				{{end}}
 				{{if .IsAttachmentEnabled}}
 					<div class="field">
-						<div class="files"></div>
 						{{template "repo/upload" .}}
 					</div>
 				{{end}}

templates/repo/upload.tmpl

@@ -1,6 +1,5 @@
 <div
 	class="ui dropzone"
-	id="dropzone"
 	data-link-url="{{.UploadLinkUrl}}"
 	data-upload-url="{{.UploadUrl}}"
 	data-remove-url="{{.UploadRemoveUrl}}"
@@ -11,4 +10,6 @@
 	data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}"
 	data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}"
 	data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"
-></div>
+>
+	<div class="files"></div>
+</div>

web_src/js/index.js

@@ -327,11 +327,11 @@ function getPastedImages(e) {
   return files;
 }
 
-async function uploadFile(file) {
+async function uploadFile(file, uploadUrl) {
   const formData = new FormData();
   formData.append('file', file, file.name);
 
-  const res = await fetch($('#dropzone').data('upload-url'), {
+  const res = await fetch(uploadUrl, {
     method: 'POST',
     headers: {'X-Csrf-Token': csrf},
     body: formData,
@@ -345,24 +345,33 @@ function reload() {
 
 function initImagePaste(target) {
   target.each(function () {
-    this.addEventListener('paste', async (e) => {
-      for (const img of getPastedImages(e)) {
-        const name = img.name.substr(0, img.name.lastIndexOf('.'));
-        insertAtCursor(this, `![${name}]()`);
-        const data = await uploadFile(img);
-        replaceAndKeepCursor(this, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`);
-        const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
-        $('.files').append(input);
-      }
-    }, false);
+    const dropzone = this.querySelector('.dropzone');
+    if (!dropzone) {
+      return;
+    }
+    const uploadUrl = dropzone.dataset.uploadUrl;
+    const dropzoneFiles = dropzone.querySelector('.files');
+    for (const textarea of this.querySelectorAll('textarea')) {
+      textarea.addEventListener('paste', async (e) => {
+        for (const img of getPastedImages(e)) {
+          const name = img.name.substr(0, img.name.lastIndexOf('.'));
+          insertAtCursor(textarea, `![${name}]()`);
+          const data = await uploadFile(img, uploadUrl);
+          replaceAndKeepCursor(textarea, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`);
+          const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
+          dropzoneFiles.appendChild(input[0]);
+        }
+      }, false);
+    }
   });
 }
 
-function initSimpleMDEImagePaste(simplemde, files) {
+function initSimpleMDEImagePaste(simplemde, dropzone, files) {
+  const uploadUrl = dropzone.dataset.uploadUrl;
   simplemde.codemirror.on('paste', async (_, e) => {
     for (const img of getPastedImages(e)) {
       const name = img.name.substr(0, img.name.lastIndexOf('.'));
-      const data = await uploadFile(img);
+      const data = await uploadFile(img, uploadUrl);
       const pos = simplemde.codemirror.getCursor();
       simplemde.codemirror.replaceRange(`![${name}](${AppSubUrl}/attachments/${data.uuid})`, pos);
       const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
@@ -381,7 +390,7 @@ function initCommentForm() {
   autoSimpleMDE = setCommentSimpleMDE($('.comment.form textarea:not(.review-textarea)'));
   initBranchSelector();
   initCommentPreviewTab($('.comment.form'));
-  initImagePaste($('.comment.form textarea'));
+  initImagePaste($('.comment.form'));
 
   // Listsubmit
   function initListSubmits(selector, outerSelector) {
@@ -993,8 +1002,7 @@ async function initRepository() {
 
         let dz;
         const $dropzone = $editContentZone.find('.dropzone');
-        const $files = $editContentZone.find('.comment-files');
-        if ($dropzone.length > 0) {
+        if ($dropzone.length === 1) {
           $dropzone.data('saved', false);
 
           const filenameDict = {};
@@ -1020,7 +1028,7 @@ async function initRepository() {
                   submitted: false
                 };
                 const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
-                $files.append(input);
+                $dropzone.find('.files').append(input);
               });
               this.on('removedfile', (file) => {
                 if (!(file.name in filenameDict)) {
@@ -1042,7 +1050,7 @@ async function initRepository() {
               this.on('reload', () => {
                 $.getJSON($editContentZone.data('attachment-url'), (data) => {
                   dz.removeAllFiles(true);
-                  $files.empty();
+                  $dropzone.find('.files').empty();
                   $.each(data, function () {
                     const imgSrc = `${$dropzone.data('link-url')}/${this.uuid}`;
                     dz.emit('addedfile', this);
@@ -1055,7 +1063,7 @@ async function initRepository() {
                     };
                     $dropzone.find(`img[src='${imgSrc}']`).css('max-width', '100%');
                     const input = $(`<input id="${this.uuid}" name="files" type="hidden">`).val(this.uuid);
-                    $files.append(input);
+                    $dropzone.find('.files').append(input);
                   });
                 });
               });
@@ -1075,7 +1083,9 @@ async function initRepository() {
         $simplemde = setCommentSimpleMDE($textarea);
         commentMDEditors[$editContentZone.data('write')] = $simplemde;
         initCommentPreviewTab($editContentForm);
-        initSimpleMDEImagePaste($simplemde, $files);
+        if ($dropzone.length === 1) {
+          initSimpleMDEImagePaste($simplemde, $dropzone[0], $dropzone.find('.files'));
+        }
 
         $editContentZone.find('.cancel.button').on('click', () => {
           $renderContent.show();
@@ -1087,7 +1097,7 @@ async function initRepository() {
         $editContentZone.find('.save.button').on('click', () => {
           $renderContent.show();
           $editContentZone.hide();
-          const $attachments = $files.find('[name=files]').map(function () {
+          const $attachments = $dropzone.find('.files').find('[name=files]').map(function () {
             return $(this).val();
           }).get();
           $.post($editContentZone.data('update-url'), {
@@ -1827,7 +1837,8 @@ function initReleaseEditor() {
   const $files = $editor.parent().find('.files');
   const $simplemde = setCommentSimpleMDE($textarea);
   initCommentPreviewTab($editor);
-  initSimpleMDEImagePaste($simplemde, $files);
+  const dropzone = $editor.parent().find('.dropzone')[0];
+  initSimpleMDEImagePaste($simplemde, dropzone, $files);
 }
 
 function initOrganization() {
@@ -2610,11 +2621,10 @@ $(document).ready(async () => {
   initLinkAccountView();
 
   // Dropzone
-  const $dropzone = $('#dropzone');
-  if ($dropzone.length > 0) {
+  for (const el of document.querySelectorAll('.dropzone')) {
     const filenameDict = {};
-
-    await createDropzone('#dropzone', {
+    const $dropzone = $(el);
+    await createDropzone(el, {
       url: $dropzone.data('upload-url'),
       headers: {'X-Csrf-Token': csrf},
       maxFiles: $dropzone.data('max-file'),
@@ -2633,7 +2643,7 @@ $(document).ready(async () => {
         this.on('success', (file, data) => {
           filenameDict[file.name] = data.uuid;
           const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
-          $('.files').append(input);
+          $dropzone.find('.files').append(input);
         });
         this.on('removedfile', (file) => {
           if (file.name in filenameDict) {