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

@ -102,12 +102,14 @@ const FileUploadForm = (
const selectedFile = selectedFiles.shift(); const selectedFile = selectedFiles.shift();
if (selectedFile) { if (selectedFile) {
const { file, fileName, fileType } = selectedFile; const { file, fileName } = selectedFile;
const fileFormData = new FormData(); const fileFormData = new FormData();
fileFormData.append('file', new File([file], fileName, { ...file })); 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 }; const inUploadFile: InUploadFile = { fileName, progressValue: 0 };
inUploadFiles.push(inUploadFile); inUploadFiles.push(inUploadFile);
@ -183,13 +185,15 @@ const FileUploadForm = (
{ {
file: { name: originalFileName }, file: { name: originalFileName },
fileName, 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, fileLocations,
}, },
fileIndex, fileIndex,
) => ( ) => (
<FileInfo <FileInfo
{...{ fileName, fileType, fileLocations }} {...{ fileName, fileLocations }}
// Use a non-changing key to prevent recreating the component. // 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. // fileName holds the string from the file-name input, thus it changes when users makes a change.
key={`selected-${originalFileName}`} key={`selected-${originalFileName}`}

Loading…
Cancel
Save