fix: issue attachment improvement (#730)

* fix: invalid file error state bug fix

* style: icons updated
This commit is contained in:
Anmol Singh Bhatia 2023-04-06 19:16:50 +05:30 committed by GitHub
parent 35455c2bf7
commit ea06ee4529
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 48 additions and 5 deletions

View File

@ -1,6 +1,8 @@
import {
AudioIcon,
CssIcon,
CsvIcon,
DefaultIcon,
DocIcon,
FigmaIcon,
HtmlIcon,
@ -11,6 +13,7 @@ import {
SheetIcon,
SvgIcon,
TxtIcon,
VideoIcon,
} from "components/icons";
export const getFileIcon = (fileType: string) => {
@ -39,8 +42,18 @@ export const getFileIcon = (fileType: string) => {
return <TxtIcon height={28} width={28} />;
case "svg":
return <SvgIcon height={28} width={28} />;
case "mp3":
return <AudioIcon height={28} width={28} />;
case "wav":
return <AudioIcon height={28} width={28} />;
case "mp4":
return <VideoIcon height={28} width={28} />;
case "wmv":
return <VideoIcon height={28} width={28} />;
case "mkv":
return <VideoIcon height={28} width={28} />;
default:
return <DocIcon height={28} width={28}/>;
return <DefaultIcon height={28} width={28} />;
}
};

View File

@ -0,0 +1,9 @@
import React from "react";
import Image from "next/image";
import type { Props } from "./types";
import AudioFileIcon from "public/attachment/audio-icon.png";
export const AudioIcon: React.FC<Props> = ({ width, height }) => (
<Image src={AudioFileIcon} height={height} width={width} alt="AudioFileIcon" />
);

View File

@ -0,0 +1,9 @@
import React from "react";
import Image from "next/image";
import type { Props } from "./types";
import DefaultFileIcon from "public/attachment/default-icon.png";
export const DefaultIcon: React.FC<Props> = ({ width, height }) => (
<Image src={DefaultFileIcon} height={height} width={width} alt="DefaultFileIcon" />
);

View File

@ -69,4 +69,7 @@ export * from "./img-file-icon";
export * from "./png-file-icon";
export * from "./jpg-file-icon";
export * from "./svg-file-icon";
export * from "./txt-file-icon";
export * from "./txt-file-icon";
export * from "./default-file-icon";
export * from "./video-file-icon";
export * from "./audio-file-icon";

View File

@ -0,0 +1,9 @@
import React from "react";
import Image from "next/image";
import type { Props } from "./types";
import VideoFileIcon from "public/attachment/video-icon.png";
export const VideoIcon: React.FC<Props> = ({ width, height }) => (
<Image src={VideoFileIcon} height={height} width={width} alt="VideoFileIcon" />
);

View File

@ -26,7 +26,6 @@ export const IssueAttachmentUpload = () => {
const { setToastAlert } = useToast();
const onDrop = useCallback((acceptedFiles: File[]) => {
setIsLoading(true);
if (!acceptedFiles[0] || !workspaceSlug) return;
const formData = new FormData();
@ -38,7 +37,7 @@ export const IssueAttachmentUpload = () => {
size: acceptedFiles[0].size,
})
);
setIsLoading(true);
issuesService
.uploadIssueAttachment(
workspaceSlug as string,
@ -88,12 +87,13 @@ export const IssueAttachmentUpload = () => {
<span className="flex items-center gap-2">
{isDragActive ? (
<p>Drop here...</p>
) : fileError ? (
<p className="text-center text-red-500">{fileError}</p>
) : isLoading ? (
<p className="text-center">Uploading....</p>
) : (
<p className="text-center">Drag & Drop or Click to add new file</p>
)}
{fileError && <p className="text-red-500 mt-2">{fileError}</p>}
</span>
</div>
);

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB