Как загрузить файл MP3 в базу данных Firebase-Firestore с помощью React JS?

Question

У меня на самом деле два вопроса, первый касается моего кода. вторая - о том, как загружать mp3-файлы в облачную базу данных Firestore с помощью реакции.

Следующий код должен быть формой, которая легко добавляет новые документы в коллекцию облачного хранилища:

import React, {useState} from 'react';
import db from '../index';

const AddSongs = () => {
    const [song, setSong] = useState('');
    const [artist, setArtist] = useState('');
    const [src, setSrc] = useState('');


    const inSubmit = (e) =>{

        e.preventDefault();

        let songBase = db.collection('songs');
        let data = {song, artist, src}

        songBase
            .add(data)

    }


    return ( 
        <div>
            <form onSubmit={inSubmit}>
                <label>
                    Add Your Track
                </label>
                <input type="text" placeholder="Name of the track" value={song} onChange={e => 
                 setSong(e.target.value)} />
                <input type="text" placeholder="Name of the artist" value={artist} onChange={e => 
                 setArtist(e.target.value)} />
                <input type="file" value={src} onChange={e => setSrc(e.target.value)} />
                <div>
                    <input type="submit" value="add it" />
                </div>
            </form>
        </div>
    );
}

export default AddSongs;

и документы успешно добавляются в облачное хранилище как обычные документы со свойствами, которые песня, исполнитель и ср c. и это еще один код, который должен затем взять текущие данные внутри коллекции и представить их в jsx div

import React, {useState} from 'react';
import db from '../index';

const SongList = () => {
    const [list, setList] = useState([])

    let songbase = db.collection('songs')

    songbase.onSnapshot(snapshot =>{
        snapshot.docs.forEach(doc =>{
            setList([...list, {song: doc.song, artist: doc.artist, src: doc.src, id: Math.random(0,1)}])
        })
    })

    const renderedList = list.length ? (list.map(songItem =>{
        return(
            <div key={songItem.id}>
                <span>{songItem.song}</span>
                <audio controls>
                    <source src={songItem.src} type="audio/mpeg" />
                </audio>
                <span>{songItem.artist}</span>
            </div>
        )
    })) : (<h1>nope !</h1>)
    return ( 
        <div>
            {renderedList}
        </div>
     );
}

export default SongList;

И затем здесь происходит то, что songItem (который отображается в пустом jsx) повторяется сама бесконечно и продолжает прокручивать вниз!!

Второй вопрос: как добавить mp3-файлы в облачное хранилище Firebase с моего локального устройства, потому что (sr c) добавляет путь к mp3-файлу в виде строки в свойствах do c, например: C: \ fakepath \ Black Sabbath - Падение с края света (со словами) .mp3.

Извините за длинный вопрос, ваша помощь будет высоко ценится

Answer 1

Попробуйте использовать пакет react-firebase-file-uploader.

Он состоит из реквизита, подобного storageRef - A reference to the firebase storage folder, where the file should be saved.

onUploadStart, onProgress, onUploadSuccess, onUploadError, filename, metadata, randomizeFilename, maxHeight, maxWidth, и многих других полезных реквизитов.

Вот ссылка на ссылку для больше деталей. Нажмите здесь