Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added file type check when pasting an image. Also added subtitle to svg tool file dropzone. #80

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added file type check when pasting an image. Also added subtitle to svg tool file dropzone. #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions src/app/(tools)/rounded-border/rounded-tool.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,12 +240,20 @@ function RoundedToolCore(props: { fileUploaderProps: FileUploaderResult }) {
}

export function RoundedTool() {
const fileUploaderProps = useFileUploader();
const acceptedFileTypes = [
"image/*",
".jpg",
".jpeg",
".png",
".webp",
".svg",
];
const fileUploaderProps = useFileUploader(acceptedFileTypes);

return (
<FileDropzone
setCurrentFile={fileUploaderProps.handleFileUpload}
acceptedFileTypes={["image/*", ".jpg", ".jpeg", ".png", ".webp", ".svg"]}
acceptedFileTypes={acceptedFileTypes}
dropText="Drop image file"
>
<RoundedToolCore fileUploaderProps={fileUploaderProps} />
Expand Down
12 changes: 10 additions & 2 deletions src/app/(tools)/square-image/square-tool.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,12 +138,20 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
}

export function SquareTool() {
const fileUploaderProps = useFileUploader();
const acceptedFileTypes = [
"image/*",
".jpg",
".jpeg",
".png",
".webp",
".svg",
];
const fileUploaderProps = useFileUploader(acceptedFileTypes);

return (
<FileDropzone
setCurrentFile={fileUploaderProps.handleFileUpload}
acceptedFileTypes={["image/*", ".jpg", ".jpeg", ".png", ".webp", ".svg"]}
acceptedFileTypes={acceptedFileTypes}
dropText="Drop image file"
>
<SquareToolCore fileUploaderProps={fileUploaderProps} />
Expand Down
6 changes: 4 additions & 2 deletions src/app/(tools)/svg-to-png/svg-tool.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ function SVGToolCore(props: { fileUploaderProps: FileUploaderResult }) {
<UploadBox
title="Make SVGs into PNGs. Also makes them bigger. (100% free btw.)"
description="Upload SVG"
subtitle="Allows pasting images from clipboard"
accept=".svg"
onChange={handleFileUploadEvent}
/>
Expand Down Expand Up @@ -217,11 +218,12 @@ function SVGToolCore(props: { fileUploaderProps: FileUploaderResult }) {
}

export function SVGTool() {
const fileUploaderProps = useFileUploader();
const acceptedFileTypes = ["image/svg+xml", ".svg"];
const fileUploaderProps = useFileUploader(acceptedFileTypes);
return (
<FileDropzone
setCurrentFile={fileUploaderProps.handleFileUpload}
acceptedFileTypes={["image/svg+xml", ".svg"]}
acceptedFileTypes={acceptedFileTypes}
dropText="Drop SVG file"
>
<SVGToolCore fileUploaderProps={fileUploaderProps} />
Expand Down
7 changes: 5 additions & 2 deletions src/hooks/use-file-uploader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,17 @@ export type FileUploaderResult = {

/**
* A hook for handling file uploads, particularly images and SVGs
* @param acceptedFileTypes {string[]} an array of accepted file types.
* @returns {FileUploaderResult} An object containing:
* - imageContent: Use this as the src for an img tag
* - rawContent: The raw file content as a string (useful for SVG tags)
* - imageMetadata: Width, height, and name of the image
* - handleFileUpload: Function to handle file input change events
* - cancel: Function to reset the upload state
*/
export const useFileUploader = (): FileUploaderResult => {
export const useFileUploader = (
acceptedFileTypes: string[],
): FileUploaderResult => {
const [imageContent, setImageContent] = useState<string>("");
const [rawContent, setRawContent] = useState<string>("");
const [imageMetadata, setImageMetadata] = useState<{
Expand Down Expand Up @@ -125,7 +128,7 @@ export const useFileUploader = (): FileUploaderResult => {

useClipboardPaste({
onPaste: handleFilePaste,
acceptedFileTypes: ["image/*", ".jpg", ".jpeg", ".png", ".webp", ".svg"],
acceptedFileTypes,
});

const cancel = () => {
Expand Down