music-player/src/pages/tools/playlistdropzone.js

import {useCallback, useRef} from "react";
import {useDropzone} from "react-dropzone";
import {connect} from "react-redux";
import {actionFullUploadPlaylists} from "../../actions";



function PlaylistDropZone({playlist={}, onLoad, children }) {
    const files = useRef(playlist.tracks || [])

    const onDrop = useCallback( (acceptedFiles) => {
         files.current = ([...files.current,
            ...acceptedFiles
        ])
        onLoad(files.current);
       }, []);
    const { getRootProps, isDragActive } = useDropzone({ onDrop });

    return (
        <div className='drop-zone'{...getRootProps()}>
            {isDragActive ? (
                <p >Перетащите файл сюда ...</p>
            ) : (
                <p>Для добавления трэка перетащите файлы в плейлист</p>
            )}
            {children}
        </div>
    );

}



export const CPlaylistDropZone = connect(state => ({playlist: state.promise.playlistById?.payload || []}),
    {onLoad: actionFullUploadPlaylists})(PlaylistDropZone)