Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

Updated global file upload component in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3318
This commit is contained in:
Peter Zimon 2023-06-01 17:50:34 +02:00
parent 3923b5cc88
commit 8246a56846
2 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ghost/admin-x-settings/src/admin-x-ds/global/FileUpload.stories.tsx
View file

@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
import FileUpload from './FileUpload'; import FileUpload from './FileUpload';
const meta = { const meta = {
title: 'Global / Basic File Upload', title: 'Global / File Upload',
component: FileUpload, component: FileUpload,
tags: ['autodocs'] tags: ['autodocs']
} satisfies Meta<typeof FileUpload>; } satisfies Meta<typeof FileUpload>;
@ -12,5 +12,15 @@ export default meta;
type Story = StoryObj<typeof FileUpload>; type Story = StoryObj<typeof FileUpload>;
export const Default: Story = { export const Default: Story = {
args: {} args: {
id: 'test-file',
onUpload: (file: File) => {
alert(`You're uploading: ${file.name}`);
},
children: (
<div className='max-w-xl cursor-pointer bg-grey-100 px-10 py-5 text-center'>
Click here to upload
</div>
)
}
}; };

32
ghost/admin-x-settings/src/admin-x-ds/global/FileUpload.tsx
View file

@ -1,12 +1,17 @@
import Button from './Button'; import React, {useCallback, useEffect} from 'react';
import React from 'react';
import {ChangeEvent, useState} from 'react'; import {ChangeEvent, useState} from 'react';
export interface FileUploadProps { export interface FileUploadProps {
id: string;
/**
* Can be any component that has no default onClick eventh handline. E.g. buttons and links won't work
*/
children?: React.ReactNode;
onUpload: (file: File) => void; onUpload: (file: File) => void;
} }
const FileUpload: React.FC<FileUploadProps> = ({onUpload}) => { const FileUpload: React.FC<FileUploadProps> = ({id, onUpload, children, ...props}) => {
const [selectedFile, setSelectedFile] = useState<File | null>(null); const [selectedFile, setSelectedFile] = useState<File | null>(null);
const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => { const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
@ -15,22 +20,21 @@ const FileUpload: React.FC<FileUploadProps> = ({onUpload}) => {
} }
}; };
const handleFileUpload = () => { const handleFileUpload = useCallback(() => {
if (selectedFile) { if (selectedFile) {
onUpload?.(selectedFile); onUpload?.(selectedFile);
} }
}; }, [onUpload, selectedFile]);
useEffect(() => {
handleFileUpload();
}, [handleFileUpload]);
return ( return (
<div> <label htmlFor={id} {...props}>
<input type="file" onChange={handleFileChange} /> <input id={id} type="file" hidden onChange={handleFileChange} />
<Button {children}
className='mt-2' </label>
color='green'
label='Upload'
onClick={handleFileUpload}
/>
</div>
); );
}; };