mirror of
https://github.com/go-gitea/gitea.git
synced 2026-09-06 04:53:22 +09:00
enhance(web): show attachment URL and UUID in dropzone preview (#39203)
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Grigor Tonikyan
co-authored by
wxiaoguang
wxiaoguang
parent
eb501f6b19
commit
bde1af541c
@@ -112,7 +112,7 @@ var (
|
||||
AllowedTypes string
|
||||
DefaultPagingNum int
|
||||
FileMaxSize int64
|
||||
MaxFiles int64
|
||||
MaxFiles int
|
||||
} `ini:"repository.release"`
|
||||
|
||||
Signing struct {
|
||||
@@ -226,7 +226,7 @@ var (
|
||||
AllowedTypes string
|
||||
DefaultPagingNum int
|
||||
FileMaxSize int64
|
||||
MaxFiles int64
|
||||
MaxFiles int
|
||||
}{
|
||||
AllowedTypes: "",
|
||||
DefaultPagingNum: 10,
|
||||
|
||||
@@ -97,6 +97,7 @@
|
||||
"locked": "Locked",
|
||||
"copy": "Copy",
|
||||
"copy_url": "Copy URL",
|
||||
"copy_link": "Copy link",
|
||||
"copy_hash": "Copy hash",
|
||||
"copy_content": "Copy content",
|
||||
"copy_branch": "Copy branch name",
|
||||
@@ -1547,10 +1548,9 @@
|
||||
"repo.issues.num_comments": "%d comments",
|
||||
"repo.issues.commented_at": "commented <a href=\"#%s\">%s</a>",
|
||||
"repo.issues.delete_comment_confirm": "Are you sure you want to delete this comment?",
|
||||
"repo.issues.context.copy_link": "Copy Link",
|
||||
"repo.issues.context.copy_source": "Copy Source",
|
||||
"repo.issues.context.quote_reply": "Quote Reply",
|
||||
"repo.issues.context.reference_issue": "Reference in New Issue",
|
||||
"repo.issues.context.copy_source": "Copy source",
|
||||
"repo.issues.context.quote_reply": "Quote reply",
|
||||
"repo.issues.context.reference_issue": "Reference in new issue",
|
||||
"repo.issues.context.edit": "Edit",
|
||||
"repo.issues.context.delete": "Delete",
|
||||
"repo.issues.no_content": "No description provided.",
|
||||
|
||||
@@ -92,27 +92,44 @@ func Verify(buf []byte, fileName, allowedTypesStr string) error {
|
||||
return ErrFileTypeForbidden{Type: fullMimeType}
|
||||
}
|
||||
|
||||
type uploadOptions struct {
|
||||
UploadUrl string
|
||||
UploadRemoveUrl string
|
||||
UploadLinkUrl string
|
||||
UploadAccepts string
|
||||
UploadMaxFiles int
|
||||
UploadMaxSize int64
|
||||
NeedUuidLink bool // issue/comment Markdown editor needs the uuid link to be copiable
|
||||
}
|
||||
|
||||
// AddUploadContext renders template values for dropzone
|
||||
func AddUploadContext(ctx *context.Context, uploadType string) {
|
||||
switch uploadType {
|
||||
case "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.ReplaceAll(setting.Repository.Release.AllowedTypes, "|", ",")
|
||||
ctx.Data["UploadMaxFiles"] = setting.Repository.Release.MaxFiles
|
||||
ctx.Data["UploadMaxSize"] = setting.Repository.Release.FileMaxSize
|
||||
ctx.Data["UploadOptions"] = uploadOptions{
|
||||
UploadUrl: ctx.Repo.RepoLink + "/releases/attachments",
|
||||
UploadRemoveUrl: ctx.Repo.RepoLink + "/releases/attachments/remove",
|
||||
UploadLinkUrl: ctx.Repo.RepoLink + "/releases/attachments",
|
||||
UploadAccepts: strings.ReplaceAll(setting.Repository.Release.AllowedTypes, "|", ","),
|
||||
UploadMaxFiles: setting.Repository.Release.MaxFiles,
|
||||
UploadMaxSize: setting.Repository.Release.FileMaxSize,
|
||||
}
|
||||
case "comment":
|
||||
ctx.Data["UploadUrl"] = ctx.Repo.RepoLink + "/issues/attachments"
|
||||
ctx.Data["UploadRemoveUrl"] = ctx.Repo.RepoLink + "/issues/attachments/remove"
|
||||
var uploadLinkUrl string
|
||||
if len(ctx.PathParam("index")) > 0 {
|
||||
ctx.Data["UploadLinkUrl"] = ctx.Repo.RepoLink + "/issues/" + url.PathEscape(ctx.PathParam("index")) + "/attachments"
|
||||
uploadLinkUrl = ctx.Repo.RepoLink + "/issues/" + url.PathEscape(ctx.PathParam("index")) + "/attachments"
|
||||
} else {
|
||||
ctx.Data["UploadLinkUrl"] = ctx.Repo.RepoLink + "/issues/attachments"
|
||||
uploadLinkUrl = ctx.Repo.RepoLink + "/issues/attachments"
|
||||
}
|
||||
ctx.Data["UploadOptions"] = uploadOptions{
|
||||
UploadUrl: ctx.Repo.RepoLink + "/issues/attachments",
|
||||
UploadRemoveUrl: ctx.Repo.RepoLink + "/issues/attachments/remove",
|
||||
UploadLinkUrl: uploadLinkUrl,
|
||||
UploadAccepts: strings.ReplaceAll(setting.Attachment.AllowedTypes, "|", ","),
|
||||
UploadMaxFiles: setting.Attachment.MaxFiles,
|
||||
UploadMaxSize: setting.Attachment.MaxSize,
|
||||
NeedUuidLink: true,
|
||||
}
|
||||
ctx.Data["UploadAccepts"] = strings.ReplaceAll(setting.Attachment.AllowedTypes, "|", ",")
|
||||
ctx.Data["UploadMaxFiles"] = setting.Attachment.MaxFiles
|
||||
ctx.Data["UploadMaxSize"] = setting.Attachment.MaxSize
|
||||
default:
|
||||
setting.PanicInDevOrTesting("Invalid upload type: %s", uploadType)
|
||||
}
|
||||
@@ -120,10 +137,12 @@ func AddUploadContext(ctx *context.Context, uploadType string) {
|
||||
|
||||
func AddUploadContextForRepo(ctx reqctx.RequestContext, repo *repo_model.Repository) {
|
||||
ctxData, repoLink := ctx.GetData(), repo.Link()
|
||||
ctxData["UploadUrl"] = repoLink + "/upload-file"
|
||||
ctxData["UploadRemoveUrl"] = repoLink + "/upload-remove"
|
||||
ctxData["UploadLinkUrl"] = repoLink + "/upload-file"
|
||||
ctxData["UploadAccepts"] = strings.ReplaceAll(setting.Repository.Upload.AllowedTypes, "|", ",")
|
||||
ctxData["UploadMaxFiles"] = setting.Repository.Upload.MaxFiles
|
||||
ctxData["UploadMaxSize"] = setting.Repository.Upload.FileMaxSize
|
||||
ctxData["UploadOptions"] = uploadOptions{
|
||||
UploadUrl: repoLink + "/upload-file",
|
||||
UploadRemoveUrl: repoLink + "/upload-remove",
|
||||
// UploadLinkUrl: TODO: REPO-UPLOAD-FILE-VIEW: there is no endpoint for this yet, it is in "upload" table but not "attachment" table
|
||||
UploadAccepts: strings.ReplaceAll(setting.Repository.Upload.AllowedTypes, "|", ","),
|
||||
UploadMaxFiles: setting.Repository.Upload.MaxFiles,
|
||||
UploadMaxSize: setting.Repository.Upload.FileMaxSize,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -255,7 +255,7 @@
|
||||
</div>
|
||||
{{if .IsAttachmentEnabled}}
|
||||
<div class="field">
|
||||
{{template "repo/upload" .}}
|
||||
{{template "repo/upload" dict "UploadOptions" $.UploadOptions}}
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="field flex-text-block tw-justify-end">
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
{{if $.root.IsAttachmentEnabled}}
|
||||
<div class="field">
|
||||
{{template "repo/upload" $.root}}
|
||||
{{template "repo/upload" dict "UploadOptions" ctx.RootData.UploadOptions}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</div>
|
||||
{{if .IsAttachmentEnabled}}
|
||||
<div class="field">
|
||||
{{template "repo/upload" .}}
|
||||
{{template "repo/upload" dict "UploadOptions" $.UploadOptions}}
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="divider"></div>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
{{template "repo/editor/common_breadcrumb" .}}
|
||||
</div>
|
||||
<div class="field">
|
||||
{{template "repo/upload" .}}
|
||||
{{template "repo/upload" dict "UploadOptions" $.UploadOptions}}
|
||||
</div>
|
||||
{{template "repo/editor/commit_form" .}}
|
||||
</form>
|
||||
|
||||
@@ -16,6 +16,6 @@
|
||||
|
||||
{{if .IsAttachmentEnabled}}
|
||||
<div class="field">
|
||||
{{template "repo/upload" .}}
|
||||
{{template "repo/upload" dict "UploadOptions" $.UploadOptions}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
{{if .root.IsAttachmentEnabled}}
|
||||
<div class="tw-mt-4 form-field-dropzone tw-hidden">{{/*TODO: need to refactor the "repo/upload" template and remove this wrapper */}}
|
||||
{{template "repo/upload" .root}}
|
||||
{{template "repo/upload" dict "UploadOptions" ctx.RootData.UploadOptions}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -156,7 +156,7 @@
|
||||
|
||||
{{if .IsAttachmentEnabled}}
|
||||
<div class="field">
|
||||
{{template "repo/upload" .}}
|
||||
{{template "repo/upload" dict "UploadOptions" $.UploadOptions}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
{{else}}
|
||||
{{$referenceHTMLURL = printf "%s/files#%s" $issueHTMLURL .item.HashTag}}
|
||||
{{end}}
|
||||
<div class="item context js-aria-clickable" data-clipboard-text="{{$referenceHTMLURL}}">{{ctx.Locale.Tr "repo.issues.context.copy_link"}}</div>
|
||||
<div class="item context js-aria-clickable" data-clipboard-text="{{$referenceHTMLURL}}">{{ctx.Locale.Tr "copy_link"}}</div>
|
||||
<div class="item context js-aria-clickable" data-clipboard-target="#{{.item.HashTag}}-raw">{{ctx.Locale.Tr "repo.issues.context.copy_source"}}</div>
|
||||
{{if ctx.RootData.IsSigned}}
|
||||
{{$needDivider := false}}
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
{{end}}
|
||||
{{if .IsAttachmentEnabled}}
|
||||
<div class="field">
|
||||
{{template "repo/upload" .}}
|
||||
{{template "repo/upload" dict "UploadOptions" $.UploadOptions}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
|
||||
+14
-10
@@ -1,15 +1,19 @@
|
||||
{{$opts := $.UploadOptions}}
|
||||
<div
|
||||
class="dropzone"
|
||||
data-link-url="{{.UploadLinkUrl}}"
|
||||
data-upload-url="{{.UploadUrl}}"
|
||||
data-remove-url="{{.UploadRemoveUrl}}"
|
||||
data-accepts="{{.UploadAccepts}}"
|
||||
data-max-file="{{.UploadMaxFiles}}"
|
||||
data-max-size="{{.UploadMaxSize}}"
|
||||
data-default-message="{{ctx.Locale.Tr "dropzone.default_message"}}"
|
||||
data-invalid-input-type="{{ctx.Locale.Tr "dropzone.invalid_input_type"}}"
|
||||
data-file-too-big="{{ctx.Locale.Tr "dropzone.file_too_big"}}"
|
||||
data-remove-file="{{ctx.Locale.Tr "dropzone.remove_file"}}"
|
||||
data-link-url="{{$opts.UploadLinkUrl}}"
|
||||
data-upload-url="{{$opts.UploadUrl}}"
|
||||
data-remove-url="{{$opts.UploadRemoveUrl}}"
|
||||
data-accepts="{{$opts.UploadAccepts}}"
|
||||
data-max-file="{{$opts.UploadMaxFiles}}"
|
||||
data-max-size="{{$opts.UploadMaxSize}}"
|
||||
data-need-uuid-link="{{$opts.NeedUuidLink}}"
|
||||
|
||||
data-text-default-message="{{ctx.Locale.Tr "dropzone.default_message"}}"
|
||||
data-text-invalid-input-type="{{ctx.Locale.Tr "dropzone.invalid_input_type"}}"
|
||||
data-text-file-too-big="{{ctx.Locale.Tr "dropzone.file_too_big"}}"
|
||||
data-text-remove-file="{{ctx.Locale.Tr "dropzone.remove_file"}}"
|
||||
data-text-copy-link="{{ctx.Locale.Tr "copy_link"}}"
|
||||
>
|
||||
<div class="files"></div>
|
||||
</div>
|
||||
|
||||
@@ -423,7 +423,7 @@ func testForkToEditFile(t *testing.T, session *TestSession, user, owner, repo, b
|
||||
uploadForm := htmlDoc.doc.Find(".repo-file-upload.form-fetch-action")
|
||||
formAction := uploadForm.AttrOr("action", "")
|
||||
assert.Equal(t, fmt.Sprintf("/%s/%s-1/_upload/%s/%s?from_base_branch=%s&foo=bar", user, repo, branch, filePath, branch), formAction)
|
||||
uploadLink := uploadForm.Find(".dropzone").AttrOr("data-link-url", "")
|
||||
uploadLink := uploadForm.Find(".dropzone").AttrOr("data-upload-url", "")
|
||||
assert.Equal(t, fmt.Sprintf("/%s/%s-1/upload-file", user, repo), uploadLink)
|
||||
newBranchName := uploadForm.Find("input[name=new_branch_name]").AttrOr("value", "")
|
||||
assert.Equal(t, user+"-patch-1", newBranchName)
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
.ui .field .dropzone {
|
||||
/* because dropzone css is imported after our css, so use double class selector to override dropzone styles */
|
||||
.dropzone.dropzone {
|
||||
border: 2px dashed var(--color-secondary);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
@@ -7,16 +8,62 @@
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ui .field .dropzone .dz-message {
|
||||
.dropzone.dropzone .dz-message {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.dropzone .dz-button {
|
||||
color: var(--color-text-light) !important;
|
||||
.dropzone.dropzone .dz-preview .dz-success-mark svg,
|
||||
.dropzone.dropzone .dz-preview .dz-error-mark svg {
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.dropzone:hover .dz-button {
|
||||
color: var(--color-text) !important;
|
||||
.dropzone.dropzone .dz-preview .dz-progress {
|
||||
/* by default the progress-bar is vertically centered (top: 50%), it's better to put it after the "details (size, filename)",
|
||||
then the layout from top to bottom is: size, filename, progress */
|
||||
top: 7em;
|
||||
}
|
||||
|
||||
.dropzone .dz-default.dz-message .dz-button {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.dropzone .dz-default.dz-message .dz-button:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.dz-custom-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--gap-block);
|
||||
margin-top: var(--gap-block);
|
||||
}
|
||||
|
||||
.dz-custom-buttons button {
|
||||
background: transparent;
|
||||
color: var(--color-text-light);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dz-custom-buttons button:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.dropzone a.dz-filename,
|
||||
.dropzone a.dz-filename *,
|
||||
.dz-custom-buttons button {
|
||||
cursor: pointer !important; /* override ".dz-clickable *" */
|
||||
}
|
||||
|
||||
.dropzone .dz-filename span[data-dz-name] {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dropzone .dz-filename span[data-dz-name]:hover {
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.dropzone .dz-error-message {
|
||||
@@ -27,7 +74,11 @@
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
border-radius: 0 !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-file-preview .dz-image {
|
||||
background: var(--color-secondary-bg) !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-image img {
|
||||
@@ -51,9 +102,3 @@
|
||||
.dropzone .dz-preview:hover .dz-image img {
|
||||
filter: opacity(0.5) !important;
|
||||
}
|
||||
|
||||
.ui .field .dropzone .dz-preview .dz-progress {
|
||||
/* by default the progress-bar is vertically centered (top: 50%), it's better to put it after the "details (size, filename)",
|
||||
then the layout from top to bottom is: size, filename, progress */
|
||||
top: 7em;
|
||||
}
|
||||
|
||||
@@ -109,7 +109,8 @@ async function handleUploadFiles(editor: CodeMirrorEditor | TextareaEditor, drop
|
||||
|
||||
editor.insertPlaceholder(placeholder);
|
||||
await uploadFile(dropzoneEl, file); // the "file" will get its "uuid" during the upload
|
||||
editor.replacePlaceholder(placeholder, generateMarkdownLinkForAttachment(file, {width, dppx}));
|
||||
const fileWithUuid = {name: file.name, uuid: (file as unknown as {uuid: string}).uuid};
|
||||
editor.replacePlaceholder(placeholder, generateMarkdownLinkForAttachment(fileWithUuid, {width, dppx}));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,23 @@
|
||||
import {svgRaw} from '../svg.ts';
|
||||
import {html} from '../utils/html.ts';
|
||||
import {copyToClipboardWithFeedback} from '../modules/clipboard.ts';
|
||||
import {GET, POST} from '../modules/fetch.ts';
|
||||
import {showErrorToast} from '../modules/toast.ts';
|
||||
import {createElementFromHTML, createElementFromAttrs} from '../utils/dom.ts';
|
||||
import {createElementFromAttrs, queryElems, showElem} from '../utils/dom.ts';
|
||||
import {errorMessage} from '../modules/errors.ts';
|
||||
import {isImageFile, isVideoFile} from '../utils.ts';
|
||||
import type Dropzone from '@deltablot/dropzone';
|
||||
|
||||
type CustomDropzoneFile = Dropzone.DropzoneFile & {uuid: string};
|
||||
type CustomDropzoneFile = {
|
||||
uuid: string;
|
||||
|
||||
// the following fields are from Dropzone.DropzoneFile
|
||||
previewElement?: HTMLElement; // will be set during the "addedfile" event
|
||||
name: string;
|
||||
size: number;
|
||||
};
|
||||
|
||||
type UploadResponse = {uuid: string};
|
||||
type FileUuidDict = Record<string, {submitted: boolean}>;
|
||||
|
||||
// dropzone has its owner event dispatcher (emitter)
|
||||
export const DropzoneCustomEventReloadFiles = 'dropzone-custom-reload-files';
|
||||
@@ -24,42 +32,44 @@ async function createDropzone(el: HTMLElement, opts: Dropzone.DropzoneOptions) {
|
||||
return new Dropzone(el, opts);
|
||||
}
|
||||
|
||||
export function generateMarkdownLinkForAttachment(file: Partial<CustomDropzoneFile>, {width, dppx}: {width?: number, dppx?: number} = {}) {
|
||||
let fileMarkdown = `[${file.name}](/attachments/${file.uuid})`;
|
||||
if (isImageFile(file)) {
|
||||
export function generateMarkdownLinkForAttachment(file: {uuid: string, name: string}, {width, dppx}: {width?: number, dppx?: number} = {}) {
|
||||
// Markdown always renders the image with a relative path, so the final URL is "/sub-path/owner/repo/attachments/{uuid}"
|
||||
let fileMarkdown = `[${file.name}](attachments/${file.uuid})`;
|
||||
if (isImageFile({name: file.name, type: null})) {
|
||||
if (width && width > 0 && dppx && dppx > 1) {
|
||||
// Scale down images from HiDPI monitors. This uses the <img> tag because it's the only
|
||||
// method to change image size in Markdown that is supported by all implementations.
|
||||
// Make the image link relative to the repo path, then the final URL is "/sub-path/owner/repo/attachments/{uuid}"
|
||||
fileMarkdown = html`<img width="${Math.round(width / dppx)}" alt="${file.name}" src="attachments/${file.uuid}">`;
|
||||
} else {
|
||||
// Markdown always renders the image with a relative path, so the final URL is "/sub-path/owner/repo/attachments/{uuid}"
|
||||
// TODO: it should also use relative path for consistency, because absolute is ambiguous for "/sub-path/attachments" or "/attachments"
|
||||
fileMarkdown = ``;
|
||||
fileMarkdown = ``;
|
||||
}
|
||||
} else if (isVideoFile(file)) {
|
||||
} else if (isVideoFile({name: file.name, type: null})) {
|
||||
fileMarkdown = html`<video src="attachments/${file.uuid}" title="${file.name}" controls></video>`;
|
||||
}
|
||||
return fileMarkdown;
|
||||
}
|
||||
|
||||
function addCopyLink(file: Partial<CustomDropzoneFile>) {
|
||||
// Create a "Copy Link" element, to conveniently copy the image or file link as Markdown to the clipboard
|
||||
// The "<a>" element has a hardcoded cursor: pointer because the default is overridden by .dropzone
|
||||
const copyLinkEl = createElementFromHTML<HTMLDivElement>(html`
|
||||
<div class="tw-text-center">
|
||||
<a href="#" class="tw-cursor-pointer">${svgRaw('octicon-copy', 14)} Copy link</a>
|
||||
</div>
|
||||
`);
|
||||
copyLinkEl.addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
await copyToClipboardWithFeedback(copyLinkEl, generateMarkdownLinkForAttachment(file));
|
||||
});
|
||||
file.previewTemplate!.append(copyLinkEl);
|
||||
export function decorateAttachmentPreview(dzInst: Dropzone, file: CustomDropzoneFile, attachmentBaseLinkUrl: string) {
|
||||
const el = file.previewElement!;
|
||||
if (attachmentBaseLinkUrl) {
|
||||
// TODO: REPO-UPLOAD-FILE-VIEW: repo file upload doesn't support viewing the uploaded file yet
|
||||
const fileUrl = `${attachmentBaseLinkUrl}/${file.uuid}`;
|
||||
queryElems<HTMLAnchorElement>(el, 'a[data-dz-custom-link]', (elLink) => {
|
||||
elLink.target = '_blank';
|
||||
elLink.href = fileUrl;
|
||||
});
|
||||
}
|
||||
const needUuidLink = dzInst.element.getAttribute('data-need-uuid-link') === 'true';
|
||||
if (needUuidLink) {
|
||||
// only issues and comments need to show use the UUID link
|
||||
const elCopyLink = el.querySelector<HTMLButtonElement>('button[data-dz-custom-copy-link]')!;
|
||||
const markdownLink = generateMarkdownLinkForAttachment(file);
|
||||
el.setAttribute('data-tooltip-content', `Name: ${file.name}\nUUID: ${file.uuid}`);
|
||||
elCopyLink.setAttribute('data-clipboard-text', markdownLink);
|
||||
showElem(elCopyLink);
|
||||
}
|
||||
}
|
||||
|
||||
type FileUuidDict = Record<string, {submitted: boolean}>;
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} dropzoneEl
|
||||
*/
|
||||
@@ -72,15 +82,35 @@ export async function initDropzone(dropzoneEl: HTMLElement) {
|
||||
let fileUuidDict: FileUuidDict = {}; // to record: if a comment has been saved, then the uploaded files won't be deleted from server when clicking the Remove in the dropzone
|
||||
const opts: Dropzone.DropzoneOptions = {
|
||||
url: dropzoneEl.getAttribute('data-upload-url')!,
|
||||
addRemoveLinks: true,
|
||||
dictDefaultMessage: dropzoneEl.getAttribute('data-default-message')!,
|
||||
dictInvalidFileType: dropzoneEl.getAttribute('data-invalid-input-type')!,
|
||||
dictFileTooBig: dropzoneEl.getAttribute('data-file-too-big')!,
|
||||
dictRemoveFile: dropzoneEl.getAttribute('data-remove-file')!,
|
||||
dictInvalidFileType: dropzoneEl.getAttribute('data-text-invalid-input-type')!,
|
||||
dictFileTooBig: dropzoneEl.getAttribute('data-text-file-too-big')!,
|
||||
timeout: 0,
|
||||
thumbnailMethod: 'contain',
|
||||
thumbnailWidth: 480,
|
||||
thumbnailHeight: 480,
|
||||
// template reference: preview-template.js in the dropzone source code
|
||||
previewTemplate: html`
|
||||
<div class="dz-preview dz-file-preview">
|
||||
<div class="dz-default dz-message">
|
||||
<button class="dz-button" type="button">${dropzoneEl.getAttribute('data-text-default-message')!}</button>
|
||||
</div>
|
||||
<div class="dz-image"><a data-dz-custom-link><img data-dz-thumbnail/></a></div>
|
||||
<div class="dz-details">
|
||||
<div class="dz-size"><span data-dz-size></span></div>
|
||||
<a class="dz-filename muted" data-dz-custom-link><span data-dz-name></span></a>
|
||||
</div>
|
||||
<div class="dz-progress">
|
||||
<span class="dz-upload" data-dz-uploadprogress></span>
|
||||
</div>
|
||||
<div class="dz-error-message"><span data-dz-errormessage></span></div>
|
||||
<div class="dz-success-mark">${svgRaw('octicon-check-circle', 54, 'tw-text-green')}</div>
|
||||
<div class="dz-error-mark">${svgRaw('octicon-x-circle', 54, 'tw-text-red')}</div>
|
||||
<div class="dz-custom-buttons">
|
||||
<button type="button" class="btn" data-dz-remove>${dropzoneEl.getAttribute('data-text-remove-file')!}</button>
|
||||
<button type="button" class="btn tw-hidden" data-dz-custom-copy-link>${svgRaw('octicon-copy', 14)} ${dropzoneEl.getAttribute('data-text-copy-link')!}</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
const accepts = dropzoneEl.getAttribute('data-accepts')!;
|
||||
if (!['*/*', ''].includes(accepts)) opts.acceptedFiles = accepts;
|
||||
@@ -96,7 +126,7 @@ export async function initDropzone(dropzoneEl: HTMLElement) {
|
||||
fileUuidDict[file.uuid] = {submitted: false};
|
||||
const input = createElementFromAttrs('input', {name: 'files', type: 'hidden', id: `dropzone-file-${resp.uuid}`, value: resp.uuid});
|
||||
dropzoneEl.querySelector('.files')!.append(input);
|
||||
addCopyLink(file);
|
||||
decorateAttachmentPreview(dzInst, file, attachmentBaseLinkUrl);
|
||||
dzInst.emit(DropzoneCustomEventUploadDone, {file});
|
||||
});
|
||||
|
||||
@@ -131,14 +161,14 @@ export async function initDropzone(dropzoneEl: HTMLElement) {
|
||||
for (const el of dropzoneEl.querySelectorAll('.dz-preview')) el.remove();
|
||||
fileUuidDict = {};
|
||||
for (const attachment of respData) {
|
||||
const file = {name: attachment.name, uuid: attachment.uuid, size: attachment.size};
|
||||
const file: CustomDropzoneFile = {name: attachment.name, uuid: attachment.uuid, size: attachment.size};
|
||||
dzInst.emit('addedfile', file);
|
||||
dzInst.emit('complete', file);
|
||||
if (isImageFile(file.name)) {
|
||||
if (isImageFile({name: file.name, type: null})) {
|
||||
const imgSrc = `${attachmentBaseLinkUrl}/${file.uuid}`;
|
||||
dzInst.emit('thumbnail', file, imgSrc);
|
||||
}
|
||||
addCopyLink(file); // it is from server response, so no "type"
|
||||
decorateAttachmentPreview(dzInst, file, attachmentBaseLinkUrl); // it is from server response, so no "type"
|
||||
fileUuidDict[file.uuid] = {submitted: true};
|
||||
const input = createElementFromAttrs('input', {name: 'files', type: 'hidden', id: `dropzone-file-${file.uuid}`, value: file.uuid});
|
||||
dropzoneEl.querySelector('.files')!.append(input);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import tippy, {followCursor} from 'tippy.js';
|
||||
import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
|
||||
import type {Content, Instance, Placement, Props} from 'tippy.js';
|
||||
import {html} from '../utils/html.ts';
|
||||
import {html, htmlEscape} from '../utils/html.ts';
|
||||
import {stripTags} from '../utils.ts';
|
||||
|
||||
type TippyOpts = {
|
||||
@@ -128,6 +128,13 @@ function attachTooltip(target: Element, content: Content | null = null): Instanc
|
||||
content = content ?? target.getAttribute('data-tooltip-content');
|
||||
if (!content) return null;
|
||||
|
||||
let allowHTML = target.getAttribute('data-tooltip-render') === 'html';
|
||||
if (!allowHTML && typeof content === 'string') {
|
||||
content = htmlEscape(content);
|
||||
content = content.replace(/\n/g, '<br>');
|
||||
allowHTML = true;
|
||||
}
|
||||
|
||||
// when element has a clipboard target, we update the tooltip after copy
|
||||
// in which case it is undesirable to automatically hide it on click as
|
||||
// it would momentarily flash the tooltip out and in.
|
||||
@@ -140,7 +147,7 @@ function attachTooltip(target: Element, content: Content | null = null): Instanc
|
||||
role: 'tooltip',
|
||||
theme: 'tooltip',
|
||||
hideOnClick,
|
||||
allowHTML: target.getAttribute('data-tooltip-render') === 'html',
|
||||
allowHTML,
|
||||
placement: target.getAttribute('data-tooltip-placement') as Placement || 'top',
|
||||
followCursor: target.getAttribute('data-tooltip-follow-cursor') as Props['followCursor'] || false,
|
||||
...((target.getAttribute('data-tooltip-interactive') === 'true') && {interactive: true, aria: {content: 'describedby', expanded: false}}),
|
||||
|
||||
@@ -13,6 +13,7 @@ import octiconBlocked from '../../public/assets/img/svg/octicon-blocked.svg';
|
||||
import octiconBold from '../../public/assets/img/svg/octicon-bold.svg';
|
||||
import octiconCheck from '../../public/assets/img/svg/octicon-check.svg';
|
||||
import octiconCheckbox from '../../public/assets/img/svg/octicon-checkbox.svg';
|
||||
import octiconCheckCircle from '../../public/assets/img/svg/octicon-check-circle.svg';
|
||||
import octiconCheckCircleFill from '../../public/assets/img/svg/octicon-check-circle-fill.svg';
|
||||
import octiconChevronDown from '../../public/assets/img/svg/octicon-chevron-down.svg';
|
||||
import octiconChevronLeft from '../../public/assets/img/svg/octicon-chevron-left.svg';
|
||||
@@ -86,6 +87,7 @@ import octiconTag from '../../public/assets/img/svg/octicon-tag.svg';
|
||||
import octiconTrash from '../../public/assets/img/svg/octicon-trash.svg';
|
||||
import octiconTriangleDown from '../../public/assets/img/svg/octicon-triangle-down.svg';
|
||||
import octiconX from '../../public/assets/img/svg/octicon-x.svg';
|
||||
import octiconXCircle from '../../public/assets/img/svg/octicon-x-circle.svg';
|
||||
import octiconXCircleFill from '../../public/assets/img/svg/octicon-x-circle-fill.svg';
|
||||
import octiconZoomIn from '../../public/assets/img/svg/octicon-zoom-in.svg';
|
||||
import octiconZoomOut from '../../public/assets/img/svg/octicon-zoom-out.svg';
|
||||
@@ -103,6 +105,7 @@ const svgs = {
|
||||
'octicon-blocked': octiconBlocked,
|
||||
'octicon-bold': octiconBold,
|
||||
'octicon-check': octiconCheck,
|
||||
'octicon-check-circle': octiconCheckCircle,
|
||||
'octicon-check-circle-fill': octiconCheckCircleFill,
|
||||
'octicon-checkbox': octiconCheckbox,
|
||||
'octicon-chevron-down': octiconChevronDown,
|
||||
@@ -177,6 +180,7 @@ const svgs = {
|
||||
'octicon-trash': octiconTrash,
|
||||
'octicon-triangle-down': octiconTriangleDown,
|
||||
'octicon-x': octiconX,
|
||||
'octicon-x-circle': octiconXCircle,
|
||||
'octicon-x-circle-fill': octiconXCircleFill,
|
||||
'octicon-zoom-in': octiconZoomIn,
|
||||
'octicon-zoom-out': octiconZoomOut,
|
||||
|
||||
@@ -126,16 +126,17 @@ test('formatBytes', () => {
|
||||
});
|
||||
|
||||
test('file detection', () => {
|
||||
const type = null;
|
||||
for (const name of ['a.avif', 'a.jpg', '/a.jpeg', '.file.png', '.webp', 'file.svg']) {
|
||||
expect(isImageFile({name})).toBeTruthy();
|
||||
expect(isImageFile({name, type})).toBeTruthy();
|
||||
}
|
||||
for (const name of ['', 'a.jpg.x', '/path.png/x', 'webp']) {
|
||||
expect(isImageFile({name})).toBeFalsy();
|
||||
expect(isImageFile({name, type})).toBeFalsy();
|
||||
}
|
||||
for (const name of ['a.mpg', '/a.mpeg', '.file.mp4', '.webm', 'file.mkv']) {
|
||||
expect(isVideoFile({name})).toBeTruthy();
|
||||
expect(isVideoFile({name, type})).toBeTruthy();
|
||||
}
|
||||
for (const name of ['', 'a.mpg.x', '/path.mp4/x', 'webm']) {
|
||||
expect(isVideoFile({name})).toBeFalsy();
|
||||
expect(isVideoFile({name, type})).toBeFalsy();
|
||||
}
|
||||
});
|
||||
|
||||
+2
-2
@@ -173,11 +173,11 @@ export function sleep(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
export function isImageFile({name, type}: {name?: string, type?: string}): boolean {
|
||||
export function isImageFile({name, type}: {name: string | null, type: string | null}): boolean {
|
||||
return Boolean(/\.(avif|jpe?g|png|gif|webp|svg|heic)$/i.test(name || '') || type?.startsWith('image/'));
|
||||
}
|
||||
|
||||
export function isVideoFile({name, type}: {name?: string, type?: string}): boolean {
|
||||
export function isVideoFile({name, type}: {name: string | null, type: string | null}): boolean {
|
||||
return Boolean(/\.(mpe?g|mp4|mkv|webm)$/i.test(name || '') || type?.startsWith('video/'));
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user