Unify dropzone accept prop with accept helpers

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-03-31 16:50:54 +04:00
parent 3bac29f540
commit 687148e2c1
8 changed files with 122 additions and 69 deletions

View File

@@ -12,6 +12,7 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { acceptImage } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Button,
@@ -238,11 +239,7 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
description={__("Upload logo image (PNG, JPG, WEBP up to 5MB)")}
isUploading={isSubmitting}
onDrop={handleDrop}
accept={{
"image/png": [".png"],
"image/jpeg": [".jpg", ".jpeg"],
"image/webp": [".webp"],
}}
accept={acceptImage}
maxSize={5}
/>
{uploadedFile && (

View File

@@ -304,16 +304,11 @@ export default function AuditDetailsPage(props: Props) {
</p>
<Dropzone
description={__(
"Only PDF, DOCX files up to 25MB are allowed",
"Only PDF up to 25MB are allowed",
)}
isUploading={isUploading}
onDrop={files => void handleUploadFile(files)}
accept={{
"application/pdf": [".pdf"],
"application/msword": [".doc"],
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
"application/vnd.oasis.opendocument.text": [".odt"],
}}
accept={{ "application/pdf": [".pdf"] }}
maxSize={25}
/>
</div>

View File

@@ -12,6 +12,7 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { acceptImage } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Button,
@@ -286,12 +287,7 @@ export function CompliancePageBrandPage(props: { queryRef: PreloadedQuery<Compli
description={__("Upload logo image (PNG, JPG, SVG, WEBP up to 5MB)")}
isUploading={isUpdating}
onDrop={handleLogoDrop}
accept={{
"image/png": [".png"],
"image/jpeg": [".jpg", ".jpeg"],
"image/svg+xml": [".svg"],
"image/webp": [".webp"],
}}
accept={acceptImage}
maxSize={5}
/>
)}
@@ -336,12 +332,7 @@ export function CompliancePageBrandPage(props: { queryRef: PreloadedQuery<Compli
description={__("Upload dark logo image (PNG, JPG, SVG, WEBP up to 5MB)")}
isUploading={isUpdating}
onDrop={handleDarkLogoDrop}
accept={{
"image/png": [".png"],
"image/jpeg": [".jpg", ".jpeg"],
"image/svg+xml": [".svg"],
"image/webp": [".webp"],
}}
accept={acceptImage}
maxSize={5}
/>
)}

View File

@@ -12,7 +12,15 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { getTrustCenterVisibilityOptions } from "@probo/helpers";
import {
acceptData,
acceptDocument,
acceptImage,
acceptPresentation,
acceptSpreadsheet,
acceptText,
getTrustCenterVisibilityOptions,
} from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Badge, Button, Dialog, DialogContent, DialogFooter, type DialogRef, Dropzone, Field, Option, Spinner } from "@probo/ui";
import { useCallback, useState } from "react";
@@ -25,38 +33,12 @@ import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import { useOrganizationId } from "#/hooks/useOrganizationId";
const acceptedFileTypes = {
"application/csv": [".csv"],
"application/json": [".json"],
"application/msword": [".doc"],
"application/pdf": [".pdf"],
"application/vnd.ms-excel": [".xls"],
"application/vnd.ms-powerpoint": [".ppt"],
"application/vnd.oasis.opendocument.presentation": [".odp"],
"application/vnd.oasis.opendocument.spreadsheet": [".ods"],
"application/vnd.oasis.opendocument.text": [".odt"],
"application/vnd.openxmlformats-officedocument.presentationml.presentation": [
".pptx",
],
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
".xlsx",
],
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [
".docx",
],
"application/yaml": [".yaml", ".yml"],
"image/gif": [".gif"],
"image/jpeg": [".jpeg", ".jpg"],
"image/png": [".png"],
"image/svg+xml": [".svg"],
"image/webp": [".webp"],
"text/csv": [".csv"],
"text/json": [".json"],
"text/markdown": [".md"],
"text/plain": [".txt"],
"text/uri-list; charset=utf-8": [".uri"],
"text/uri-list": [".uri"],
"text/x-log": [".log"],
"text/yaml": [".yaml", ".yml"],
...acceptDocument,
...acceptSpreadsheet,
...acceptPresentation,
...acceptText,
...acceptImage,
...acceptData,
};
const createCompliancePageFileMutation = graphql`

View File

@@ -12,6 +12,14 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import {
acceptData,
acceptDocument,
acceptImage,
acceptPresentation,
acceptSpreadsheet,
acceptText,
} from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Breadcrumb,
@@ -124,18 +132,12 @@ function EvidenceUpload({ measureId, connectionId }: Omit<Props, "ref">) {
isUploading={isUpdating}
onDrop={files => void handleDrop(files)}
accept={{
"text/plain": [".uri"],
"text/csv": [".csv"],
"application/pdf": [".pdf"],
"application/vnd.openxmlformats-officedocument.wordprocessingml.document":
[".docx"],
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
[".xlsx"],
"application/vnd.openxmlformats-officedocument.presentationml.presentation":
[".pptx"],
"image/jpeg": [".jpg", ".jpeg"],
"image/png": [".png"],
"image/webp": [".webp"],
...acceptDocument,
...acceptSpreadsheet,
...acceptPresentation,
...acceptText,
...acceptData,
...acceptImage,
}}
maxSize={20}
/>

View File

@@ -0,0 +1,75 @@
// Copyright (c) 2025-2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
export const acceptDocument = {
"application/pdf": [".pdf"],
"application/msword": [".doc"],
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
"application/vnd.oasis.opendocument.text": [".odt"],
} satisfies Record<string, string[]>;
export const acceptSpreadsheet = {
"application/vnd.ms-excel": [".xls"],
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
"application/vnd.oasis.opendocument.spreadsheet": [".ods"],
} satisfies Record<string, string[]>;
export const acceptPresentation = {
"application/vnd.ms-powerpoint": [".ppt"],
"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
"application/vnd.oasis.opendocument.presentation": [".odp"],
} satisfies Record<string, string[]>;
export const acceptText = {
"text/markdown": [".md"],
"text/plain": [".txt"],
"text/x-log": [".log"],
"text/uri-list": [".uri"],
"text/uri-list; charset=utf-8": [".uri"],
} satisfies Record<string, string[]>;
export const acceptImage = {
"image/jpeg": [".jpg", ".jpeg"],
"image/png": [".png"],
"image/gif": [".gif"],
"image/svg+xml": [".svg"],
"image/webp": [".webp"],
} satisfies Record<string, string[]>;
export const acceptData = {
"application/yaml": [".yaml", ".yml"],
"application/json": [".json"],
"text/yaml": [".yaml", ".yml"],
"text/json": [".json"],
"text/csv": [".csv"],
"application/csv": [".csv"],
} satisfies Record<string, string[]>;
export const acceptVideo = {
"video/mp4": [".mp4"],
"video/mpeg": [".mpeg", ".mpg"],
"video/quicktime": [".mov"],
"video/x-msvideo": [".avi"],
"video/webm": [".webm"],
} satisfies Record<string, string[]>;
export const acceptAll = {
...acceptDocument,
...acceptSpreadsheet,
...acceptPresentation,
...acceptText,
...acceptImage,
...acceptData,
...acceptVideo,
} satisfies Record<string, string[]>;

View File

@@ -84,6 +84,16 @@ export {
} from "./trustCenterVisibility";
export { promisifyMutation } from "./relay";
export { fileType, fileSize } from "./file";
export {
acceptDocument,
acceptSpreadsheet,
acceptPresentation,
acceptText,
acceptImage,
acceptData,
acceptVideo,
acceptAll,
} from "./fileAccept";
export {
formatDatetime,
formatDate,

View File

@@ -63,6 +63,7 @@ var FileTypes = []FileType{
{MimeType: "application/vnd.oasis.opendocument.presentation", Extensions: []string{".odp"}, Category: CategoryPresentation},
// Text types
{MimeType: "text/markdown", Extensions: []string{".md"}, Category: CategoryText},
{MimeType: "text/plain", Extensions: []string{".txt"}, Category: CategoryText},
{MimeType: "text/x-log", Extensions: []string{".log"}, Category: CategoryText},
{MimeType: "text/uri-list", Extensions: []string{".uri"}, Category: CategoryText},