file type detection on upload

src/components/node/CommentForm/index.tsx

@@ -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>
           )
       )}

src/redux/uploads/constants.ts

@@ -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'],
+};

src/utils/uploader.ts

@@ -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
+  );
+};