fix(striker-ui): hide file type during file upload

main
Tsu-ba-me 3 years ago
parent 8c0841ca71
commit 554a94a9ad
  1. 54
      striker-ui/components/Files/FileInfo.tsx
  2. 12
      striker-ui/components/Files/FileUploadForm.tsx

@ -18,13 +18,11 @@ import {
import { BLUE, GREY, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
import { UPLOAD_FILE_TYPES_ARRAY } from '../../lib/consts/UPLOAD_FILE_TYPES';
type FileInfoProps = Pick<
FileDetailMetadata,
'fileName' | 'fileLocations' | 'fileType'
> & {
isReadonly?: boolean;
onChange?: FileInfoChangeHandler;
};
type FileInfoProps = Pick<FileDetailMetadata, 'fileName' | 'fileLocations'> &
Partial<Pick<FileDetailMetadata, 'fileType'>> & {
isReadonly?: boolean;
onChange?: FileInfoChangeHandler;
};
const FILE_INFO_DEFAULT_PROPS: Partial<FileInfoProps> = {
isReadonly: undefined,
@ -69,26 +67,28 @@ const FileInfo = (
onChange?.call(null, { fileName: value })
}
/>
<Select
defaultValue={fileType}
disabled={isReadonly}
id="file-type"
label="File type"
onChange={({ target: { value } }) =>
onChange?.call(null, { fileType: value as FileType })
}
sx={{ color: TEXT }}
>
{UPLOAD_FILE_TYPES_ARRAY.map(
([fileTypeKey, [, fileTypeDisplayString]]) => {
return (
<MenuItem key={fileTypeKey} value={fileTypeKey}>
{fileTypeDisplayString}
</MenuItem>
);
},
)}
</Select>
{fileType && (
<Select
defaultValue={fileType}
disabled={isReadonly}
id="file-type"
label="File type"
onChange={({ target: { value } }) =>
onChange?.call(null, { fileType: value as FileType })
}
sx={{ color: TEXT }}
>
{UPLOAD_FILE_TYPES_ARRAY.map(
([fileTypeKey, [, fileTypeDisplayString]]) => {
return (
<MenuItem key={fileTypeKey} value={fileTypeKey}>
{fileTypeDisplayString}
</MenuItem>
);
},
)}
</Select>
)}
{fileLocations.map(
(
{ anvilName, anvilDescription, anvilUUID, isFileLocationActive },

@ -102,12 +102,14 @@ const FileUploadForm = (
const selectedFile = selectedFiles.shift();
if (selectedFile) {
const { file, fileName, fileType } = selectedFile;
const { file, fileName } = selectedFile;
const fileFormData = new FormData();
fileFormData.append('file', new File([file], fileName, { ...file }));
fileFormData.append('file-type', fileType);
// Re-add when the back-end tools can support changing file type on file upload.
// Note: get file type from destructuring selectedFile.
// fileFormData.append('file-type', fileType);
const inUploadFile: InUploadFile = { fileName, progressValue: 0 };
inUploadFiles.push(inUploadFile);
@ -183,13 +185,15 @@ const FileUploadForm = (
{
file: { name: originalFileName },
fileName,
fileType,
// Re-add when the back-end tools can support changing file type on file upload.
// Note: file type must be supplied to FileInfo.
// fileType,
fileLocations,
},
fileIndex,
) => (
<FileInfo
{...{ fileName, fileType, fileLocations }}
{...{ fileName, fileLocations }}
// Use a non-changing key to prevent recreating the component.
// fileName holds the string from the file-name input, thus it changes when users makes a change.
key={`selected-${originalFileName}`}

Loading…
Cancel
Save