frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove preview for all file except images

Browse Source
This commit is contained in:
smanylov
2026-02-23 14:44:22 +07:00
parent a33ccf4180
commit 332788a77a
5 changed files with 76 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/lib/getFileType.ts
+28
View File
@@ -0,0 +1,28 @@
export const getFileType = (fileName: string, allowedExtensions: {
images: string[],
videos: string[],
audios: string[],
documents: string[]
}): 'image' | 'video' | 'audio' | 'document' | 'unknown' => {
const lastDotIndex = fileName.lastIndexOf('.');
const extension = fileName.substring(lastDotIndex + 1).toLowerCase();
if (allowedExtensions.images.includes(extension)) {
return 'image';
}
if (allowedExtensions.videos.includes(extension)) {
return 'video';
}
if (allowedExtensions.audios.includes(extension)) {
return 'audio';
}
if (allowedExtensions.documents.includes(extension)) {
return 'document';
}
return 'unknown';
}
src/app/styles/pages-styles.scss
+6 -16
View File
@@ -3388,19 +3388,6 @@
}
}
.preview-fallback {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
background: #f3f4f6;
}
.result-info {
flex: 1;
}
@@ -3533,11 +3520,14 @@
background: v.$white;
&-wrapper {
display: grid;
grid-template-columns: 1fr 300px;
gap: 20px;
height: 100%;
max-height: 80vh;
&.image {
display: grid;
grid-template-columns: 1fr 300px;
gap: 20px;
}
}
.image-section {
src/app/ui/search/file-search-panel.tsx
+3 -2
View File
@@ -5,6 +5,7 @@ import { searchUserFiles, searchGlobalFiles } from '@/app/actions/searchActions'
import { useQueryClient } from '@tanstack/react-query';
import { Pagination } from '@/app/components/Pagination';
import { useTranslations } from 'next-intl';
import { AllowedExtensions } from '@/app/ui/search/section-search-file';
export interface SearchItem {
url: string,
@@ -15,7 +16,7 @@ export interface SearchItem {
pageUrl: string
}
export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: any }) {
export function FileSearchPanel({ fileId, ref, allowedExtensions }: { fileId: string | null, ref: any, allowedExtensions: AllowedExtensions }) {
const [searchedUserFiles, setSearchedUserFiles] = useState<string[]>([]);
const [searchedUserFilesShowNull, setSearchedUserFilesShowNull] = useState<boolean>(false);
const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<SearchItem[]>([]);
@@ -117,7 +118,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
</div>
{(searchedUserFiles.length !== 0) && (
<SearchedUserFilesList list={searchedUserFiles} />
<SearchedUserFilesList list={searchedUserFiles} allowedExtensions={allowedExtensions} />
)}
{searchedUserFilesShowNull && (
src/app/ui/search/searched-user-files-list.tsx
+29 -20
View File
@@ -4,8 +4,11 @@ import { useState, ReactNode } from 'react';
import { useTranslations } from 'next-intl';
import ModalWindow from '@/app/components/ModalWindow';
import { IconEye, IconDownload } from '@/app/ui/icons/icons';
import { getFileType } from '@/app/lib/getFileType';
import { AllowedExtensions } from '@/app/ui/search/section-search-file';
import { FileTypeIcon } from '@/app/components/FileTypeIcon';
export function SearchedUserFilesList({ list }: { list: any }) {
export function SearchedUserFilesList({ list, allowedExtensions }: { list: string[], allowedExtensions: AllowedExtensions }) {
const [isFileLoading, setIsFileLoading] = useState(false);
const [openWindow, setOpenWindow] = useState<boolean>(false);
const [openWindowChildren, setOpenWindowChildren] = useState<ReactNode>(null);
@@ -38,7 +41,7 @@ export function SearchedUserFilesList({ list }: { list: any }) {
}
};
const handlerViewfile = async (e: any) => {
const handlerViewfile = async (e: any, fileType: string) => {
setOpenWindowChildren(() => {
return (
<div
@@ -54,15 +57,17 @@ export function SearchedUserFilesList({ list }: { list: any }) {
<div
className="modal-window-view-file-content"
>
<div className="modal-window-view-file-content-wrapper">
<div className="image-section">
<div className="image-container">
<img
src={e.url ? e.url : '#'}
alt="img"
/>
<div className={`modal-window-view-file-content-wrapper ${fileType}`}>
{fileType === 'image' && (
<div className="image-section">
<div className="image-container">
<img
src={e.url ? e.url : '#'}
alt="img"
/>
</div>
</div>
</div>
)}
<div
className="file-info-card"
>
@@ -117,6 +122,8 @@ export function SearchedUserFilesList({ list }: { list: any }) {
className="results-list"
>
{list.map((e: any, index: number) => {
const fileType = getFileType(e.originalFileName, allowedExtensions);
if (e.similarityLevel !== 'DIFFERENT') {
return (
<div
@@ -125,15 +132,17 @@ export function SearchedUserFilesList({ list }: { list: any }) {
>
<div className="result-item">
<div className="result-header">
<div className="result-preview">
{e.url ? (
<img src={e.url} alt="Preview" />
) : (
<div className="preview-fallback">
<span>📄</span>
</div>
)}
</div>
{fileType === 'image' ? (
<div className="result-preview">
{e.url ? (
<img src={e.url} alt="Preview" />
) : (
<FileTypeIcon type={fileType} />
)}
</div>
) : (
<FileTypeIcon type={fileType} />
)}
<div className="result-info">
<div className="result-filename" title={e.originalFileName}>
{e.originalFileName}
@@ -161,7 +170,7 @@ export function SearchedUserFilesList({ list }: { list: any }) {
<button
className="btn btn-secondary gap-1"
onClick={() => {
handlerViewfile(e);
handlerViewfile(e, fileType);
}}
>
<IconEye />
src/app/ui/search/section-search-file.tsx
+10 -37
View File
@@ -8,6 +8,7 @@ import { useNavigationBlocker } from '@/app/hooks/useNavigationBlocker';
import { useQueryClient } from '@tanstack/react-query';
import { removeUserFile } from '@/app/actions/fileEntity';
import { FileSearchPanel } from '@/app/ui/search/file-search-panel';
import { getFileType } from '@/app/lib/getFileType';
interface SelectedFile {
file: File;
preview: string | undefined;
@@ -23,13 +24,15 @@ interface FileUploadInitResponse {
status: string
}
export interface AllowedExtensions {
images: string[],
videos: string[],
audios: string[],
documents: string[]
}
interface SectionSearchFile {
allowedExtensions: {
images: string[],
videos: string[],
audios: string[],
documents: string[]
}
allowedExtensions: AllowedExtensions
maxFileSize: number
}
@@ -58,36 +61,6 @@ export default function SectionSearchFile({ allowedExtensions, maxFileSize }: Se
return allExtensions.map(e => `.${e}`).join(', ');
}, [allExtensions]);
const getFileType = (fileName: string, allowedExtensions: {
images: string[],
videos: string[],
audios: string[],
documents: string[]
}): 'image' | 'video' | 'audio' | 'document' | 'unknown' => {
const lastDotIndex = fileName.lastIndexOf('.');
const extension = fileName.substring(lastDotIndex + 1).toLowerCase();
if (allowedExtensions.images.includes(extension)) {
return 'image';
}
if (allowedExtensions.videos.includes(extension)) {
return 'video';
}
if (allowedExtensions.audios.includes(extension)) {
return 'audio';
}
if (allowedExtensions.documents.includes(extension)) {
return 'document';
}
return 'unknown';
}
const validateFile = (file: File): { isValid: boolean; errorMessage?: string } => {
if (!allExtensions.includes(file.type as string)) {
const extension = file.name.split('.').pop()?.toLowerCase();
@@ -375,7 +348,7 @@ export default function SectionSearchFile({ allowedExtensions, maxFileSize }: Se
</div>
{isFileUploaded && (
<FileSearchPanel fileId={fileId} ref={childRef} />
<FileSearchPanel fileId={fileId} ref={childRef} allowedExtensions={allowedExtensions} />
)}
</div>
);