muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

file type detection on upload

Browse source
This commit is contained in:
Fedor Katurov 2019-10-09 21:06:14 +07:00
parent 219d05f8ba
commit 60dbb496c4
3 changed files with 24 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/node/CommentForm/index.tsx
View file

@ -16,6 +16,7 @@ import uuid from 'uuid4';
import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
import { selectUploads } from '~/redux/uploads/selectors';
import { IState } from '~/redux/store';
import { getFileType } from '~/utils/uploader';
const mapStateToProps = (state: IState) => ({
node: selectNode(state),
@ -53,7 +54,7 @@ const CommentFormUnconnected: FC<IProps> = ({
temp_id: uuid(),
subject: UPLOAD_SUBJECTS.COMMENT,
target: UPLOAD_TARGETS.COMMENTS,
type: UPLOAD_TYPES.IMAGE,
type: getFileType(file),
})
);
@ -127,7 +128,8 @@ const CommentFormUnconnected: FC<IProps> = ({
</div>
<Group horizontal className={styles.buttons}>
<input type="file" onInput={onInputChange} multiple />
<input type="file" onInput={onInputChange} multiple accept="image/*" />
<input type="file" onInput={onInputChange} multiple accept="audio/*" />
<Filler />
@ -138,6 +140,7 @@ const CommentFormUnconnected: FC<IProps> = ({
</Button>
</Group>
</form>
{comment.temp_ids.map(
temp_id =>
statuses[temp_id] &&
@ -145,11 +148,12 @@ const CommentFormUnconnected: FC<IProps> = ({
<div key={statuses[temp_id].temp_id}>{statuses[temp_id].progress}</div>
)
)}
{comment.files.map(
file =>
file.name && (
<div key={file.id}>
{file.name} {file.mime} {file.size}
[{file.mime}] {file.name}
</div>
)
)}

5
src/redux/uploads/constants.ts
View file

@ -60,3 +60,8 @@ export const UPLOAD_TYPES: Record<string, IUploadType> = {
VIDEO: 'video',
OTHER: 'other',
};
export const FILE_MIMES = {
[UPLOAD_TYPES.image]: ['image/jpeg', 'image/jpg', 'image/png'],
[UPLOAD_TYPES.audio]: ['audio/mpeg3', 'audio/mpeg', 'audio/mp3'],
};

15
src/utils/uploader.ts
View file

@ -3,7 +3,7 @@ import { eventChannel, END, EventChannel } from 'redux-saga';
import { VALIDATORS } from '~/utils/validators';
import { IResultWithStatus, IFile } from '~/redux/types';
import { HTTP_RESPONSES } from './api';
import { EMPTY_FILE } from '~/redux/uploads/constants';
import { EMPTY_FILE, FILE_MIMES, UPLOAD_TYPES } from '~/redux/uploads/constants';
export const IMAGE_MIME_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'];
@ -16,7 +16,7 @@ export function createUploader<T extends {}, R extends {}>(
] {
let emit;
const chan = eventChannel((emitter) => {
const chan = eventChannel(emitter => {
emit = emitter;
return () => null;
});
@ -30,7 +30,7 @@ export function createUploader<T extends {}, R extends {}>(
return [wrappedCallback, chan];
}
export const uploadGetThumb = async (file) => {
export const uploadGetThumb = async file => {
if (!file.type || !VALIDATORS.IS_IMAGE_MIME(file.type)) return '';
return await new Promise((resolve, reject) => {
@ -70,3 +70,12 @@ export const fakeUploader = ({
}, 3000);
});
};
export const getFileType = (file: File) => {
console.log({ type: file.type });
return (
(file.type && Object.keys(FILE_MIMES).find(mime => FILE_MIMES[mime].includes(file.type))) ||
UPLOAD_TYPES.OTHER
);
};