Fix attachments list in edit comment (#13036)

#11141 broke the appearance of dropzone attachments when editting
comments causing poorly updating lists.

This PR fixes this.

Fix #12583

Signed-off-by: Andrew Thornton art27@cantab.net

modules/upload/upload.go

@@ -75,18 +75,25 @@ func AddUploadContext(ctx *context.Context, uploadType string) {
 	if uploadType == "release" {
 		ctx.Data["UploadUrl"] = ctx.Repo.RepoLink + "/releases/attachments"
 		ctx.Data["UploadRemoveUrl"] = ctx.Repo.RepoLink + "/releases/attachments/remove"
+		ctx.Data["UploadLinkUrl"] = ctx.Repo.RepoLink + "/releases/attachments"
 		ctx.Data["UploadAccepts"] = strings.Replace(setting.Repository.Release.AllowedTypes, "|", ",", -1)
 		ctx.Data["UploadMaxFiles"] = setting.Attachment.MaxFiles
 		ctx.Data["UploadMaxSize"] = setting.Attachment.MaxSize
 	} else if uploadType == "comment" {
 		ctx.Data["UploadUrl"] = ctx.Repo.RepoLink + "/issues/attachments"
 		ctx.Data["UploadRemoveUrl"] = ctx.Repo.RepoLink + "/issues/attachments/remove"
+		if len(ctx.Params(":index")) > 0 {
+			ctx.Data["UploadLinkUrl"] = ctx.Repo.RepoLink + "/issues/" + ctx.Params(":index") + "/attachments"
+		} else {
+			ctx.Data["UploadLinkUrl"] = ctx.Repo.RepoLink + "/issues/attachments"
+		}
 		ctx.Data["UploadAccepts"] = strings.Replace(setting.Attachment.AllowedTypes, "|", ",", -1)
 		ctx.Data["UploadMaxFiles"] = setting.Attachment.MaxFiles
 		ctx.Data["UploadMaxSize"] = setting.Attachment.MaxSize
 	} else if uploadType == "repo" {
 		ctx.Data["UploadUrl"] = ctx.Repo.RepoLink + "/upload-file"
 		ctx.Data["UploadRemoveUrl"] = ctx.Repo.RepoLink + "/upload-remove"
+		ctx.Data["UploadLinkUrl"] = ctx.Repo.RepoLink + "/upload-file"
 		ctx.Data["UploadAccepts"] = strings.Replace(setting.Repository.Upload.AllowedTypes, "|", ",", -1)
 		ctx.Data["UploadMaxFiles"] = setting.Repository.Upload.MaxFiles
 		ctx.Data["UploadMaxSize"] = setting.Repository.Upload.FileMaxSize

templates/repo/issue/view_content.tmpl

@@ -65,9 +65,11 @@
 						<div id="comment-{{.Issue.ID}}" class="raw-content hide">{{.Issue.Content}}</div>
 						<div class="edit-content-zone hide" data-write="issue-{{.Issue.ID}}-write" data-preview="issue-{{.Issue.ID}}-preview" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/content" data-context="{{.RepoLink}}" data-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/attachments" data-view-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/view-attachments"></div>
 					{{if .Issue.Attachments}}
-						<div class="ui clearing divider"></div>
+						<div class="dropzone-attachments">
-						<div class="ui middle aligned padded grid">
+							<div class="ui clearing divider"></div>
-							{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments}}
+							<div class="ui middle aligned padded grid">
+								{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments}}
+							</div>
 						</div>
 					{{end}}
 					</div>

templates/repo/issue/view_content/attachments.tmpl

@@ -2,7 +2,7 @@
 <div class="twelve wide column" style="padding: 6px;">
 	<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}" title='{{$.ctx.i18n.Tr "repo.issues.attachment.open_tab" .Name}}'>
 	{{if FilenameIsImage .Name}}
-		<span class="ui image">{{svg "octicon-file-media"}}</span>
+		<span class="ui image">{{svg "octicon-file"}}</span>
 	{{else}}
 		<span class="ui image">{{svg "octicon-desktop-download"}}</span>
 	{{end}}

templates/repo/issue/view_content/comments.tmpl

@@ -57,9 +57,11 @@
 					<div id="comment-{{.ID}}" class="raw-content hide">{{.Content}}</div>
 					<div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
 				{{if .Attachments}}
-					<div class="ui clearing divider"></div>
+					<div class="dropzone-attachments">
-					<div class="ui middle aligned padded grid">
+						<div class="ui clearing divider"></div>
-						{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments}}
+						<div class="ui middle aligned padded grid">
+							{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments}}
+						</div>
 					</div>
 				{{end}}
 				</div>

templates/repo/upload.tmpl

@@ -1,6 +1,7 @@
 <div
 	class="ui dropzone"
 	id="dropzone"
+	data-link-url="{{.UploadLinkUrl}}"
 	data-upload-url="{{.UploadUrl}}"
 	data-remove-url="{{.UploadRemoveUrl}}"
 	data-accepts="{{.UploadAccepts}}"

web_src/js/index.js

@@ -940,7 +940,7 @@ async function initRepository() {
                   dz.removeAllFiles(true);
                   $files.empty();
                   $.each(data, function () {
-                    const imgSrc = `${$dropzone.data('upload-url')}/${this.uuid}`;
+                    const imgSrc = `${$dropzone.data('link-url')}/${this.uuid}`;
                     dz.emit('addedfile', this);
                     dz.emit('thumbnail', this, imgSrc);
                     dz.emit('complete', this);
@@ -976,7 +976,9 @@ async function initRepository() {
         $editContentZone.find('.cancel.button').on('click', () => {
           $renderContent.show();
           $editContentZone.hide();
-          dz.emit('reload');
+          if (dz) {
+            dz.emit('reload');
+          }
         });
         $editContentZone.find('.save.button').on('click', () => {
           $renderContent.show();
@@ -990,26 +992,32 @@ async function initRepository() {
             context: $editContentZone.data('context'),
             files: $attachments
           }, (data) => {
-            if (data.length === 0) {
+            if (data.length === 0 || data.content.length === 0) {
               $renderContent.html($('#no-content').html());
             } else {
               $renderContent.html(data.content);
             }
-            const $content = $segment.parent();
+            const $content = $segment;
-            if (!$content.find('.ui.small.images').length) {
+            if (!$content.find('.dropzone-attachments').length) {
               if (data.attachments !== '') {
-                $content.append(
+                $content.append(`
-                  '<div class="ui bottom attached segment"><div class="ui small images"></div></div>'
+                  <div class="dropzone-attachments">
-                );
+                    <div class="ui clearing divider"></div>
-                $content.find('.ui.small.images').html(data.attachments);
+                    <div class="ui middle aligned padded grid">
+                    </div>
+                  </div>
+                `);
+                $content.find('.dropzone-attachments .grid').html(data.attachments);
               }
             } else if (data.attachments === '') {
-              $content.find('.ui.small.images').parent().remove();
+              $content.find('.dropzone-attachments').remove();
             } else {
-              $content.find('.ui.small.images').html(data.attachments);
+              $content.find('.dropzone-attachments .grid').html(data.attachments);
+            }
+            if (dz) {
+              dz.emit('submit');
+              dz.emit('reload');
             }
-            dz.emit('submit');
-            dz.emit('reload');
             renderMarkdownContent();
           });
         });