Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-12-21 15:59:48 +01:00
Code Issues Packages Projects Releases Activity

Add new extension point for repository avatars (#1614)

Browse Source 
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
This commit is contained in:
Eduard Heimbuch
2021-04-15 11:14:42 +02:00
committed by GitHub
parent 29f4c754bb
commit 84c1e7ed37
7 changed files with 56 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
scm-ui/ui-components/src/forms/FileUpload.tsx
View File

@@ -27,10 +27,12 @@ import { useTranslation } from "react-i18next";
import { File } from "@scm-manager/ui-types";
type Props = {
handleFile: (file: File) => void;
handleFile: (file: File, event?: ChangeEvent<HTMLInputElement>) => void;
filenamePlaceholder?: string;
disabled?: boolean;
};
const FileUpload: FC<Props> = ({ handleFile }) => {
const FileUpload: FC<Props> = ({ handleFile, filenamePlaceholder = "", disabled = false }) => {
const [t] = useTranslation("commons");
const [file, setFile] = useState<File | null>(null);
@@ -41,21 +43,26 @@ const FileUpload: FC<Props> = ({ handleFile }) => {
className="file-input"
type="file"
name="resume"
disabled={disabled}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
const uploadedFile = event?.target?.files![0];
// @ts-ignore the uploaded file doesn't match our types
setFile(uploadedFile);
// @ts-ignore the uploaded file doesn't match our types
handleFile(uploadedFile);
handleFile(uploadedFile, event);
}}
/>
<span className="file-cta">
<span className="file-icon">
<i className="fas fa-arrow-circle-up" />
</span>
<span className="file-label">{t("fileUpload.label")}</span>
<span className="file-label has-text-weight-bold">{t("fileUpload.label")}</span>
</span>
<span className="file-name">{file?.name || ""}</span>
{file?.name ? (
<span className="file-name">{file?.name}</span>
) : (
<span className="file-name has-text-weight-light has-text-grey-light ">{filenamePlaceholder}</span>
)}
</label>
</div>
);