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({tracks=[], onLoad, children }) {
    const files = useRef(tracks || [])

    const onDrop = useCallback( (acceptedFiles) => {
         files.current = ([...files.current,
            ...acceptedFiles
        ])
        console.log(tracks, files.current, acceptedFiles)
        onLoad(files.current);
       }, []);
    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
    return (
        <div className='drop-zone'{...getRootProps()}>
            <input {...getInputProps()} />
            {isDragActive ? (
                <p >Перетащите файл сюда ...</p>
            ) : (
                <p>Для добавления трэка нажмите или перетащите файлы СЮДА</p>
            )}
            {children}
        </div>
    );

}



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