basic file upload validation added

src/components/Page/index.js

@@ -50,7 +50,7 @@ const TrackConnect = connect(
 )(Track)
 
 const SortableItem = sortableElement(TrackConnect);
-const SortableContainer = sortableContainer(({ children }) => { return <ul>{children}</ul> });
+const SortableContainer = sortableContainer(({ children }) => <ul>{children}</ul> );
 
 const Playlist = ({ player, playlist, setPlaylist, updPlaylist, setIndex }) => {
   let [_tracks, setTracks] = useState()
@@ -98,7 +98,7 @@ const PlaylistTrackDropzone = ({ playlist, uploadTrack }) => {
   }, [playlist])
 
   const onDrop = useCallback(acceptedFiles => {
-    uploadTrack(acceptedFiles[0], playlistId)
+    if(acceptedFiles[0].type === 'audio/mpeg') uploadTrack(acceptedFiles[0], playlistId)
   }, [uploadTrack, playlistId])
   const { getRootProps, isDragActive } = useDropzone({ onDrop })
   return (
@@ -140,8 +140,9 @@ const UserTracksConnect = connect(state => ({
 
 const UserTracksDropzone = ({ onLoad }) => {
   const onDrop = useCallback(acceptedFiles => {
-    onLoad(acceptedFiles[0])
+    if(acceptedFiles[0].type === 'audio/mpeg') onLoad(acceptedFiles[0])
   }, [onLoad])
+  
   const { getRootProps, isDragActive } = useDropzone({ onDrop })
   return (
     <div

src/components/Sidebar/index.js

@@ -36,7 +36,7 @@ export const ProfileWindowConnect = connect(state => ({ user: state.promise.user
 
 const ProfileWindowDropzone = ({ onLoad }) => {
   const onDrop = useCallback(acceptedFiles => {
-    onLoad(acceptedFiles[0])
+    if(acceptedFiles[0].type === 'image/png' || acceptedFiles[0].type === 'image/jpeg') onLoad(acceptedFiles[0])
   }, [onLoad])
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })