Estoy usando lo siguiente:
const [allImages, setImages] = useState([]); const getFromFirebase = () => { //1. let storageRef = storage.ref(user1); //2. storageRef.listAll().then(function (res) { //3. res.items.forEach((imageRef) => { console.log(imageRef); imageRef.getDownloadURL().then((url) => { //4. setImages((allImages) => [...allImages, url]); }); }); }) .catch(function (error) { console.log(error); }); console.log(allImages); };y luego mostrar a través de:
<button onClick={getFromFirebase}>Show</button><br/><br/> <div id="photos"> {allImages.map((image) => { return ( <div key={image} className="image"> <img className="uploadedfile" src={image} alt="" /> <button className="buttondelete" onClick={() => deleteFromFirebase(image)}> Delete </button> </div>Me doy cuenta de que esto devuelve getDownloadURL para la URL de la imagen, pero ¿cómo devuelvo también el nombre de archivo de la imagen?
Para obtener el nombre del archivo, puede usar getMetadata :
imageRef.getMetadata().then(metadata => { // do something with metadata.name });Puede utilizar el método 'getMetaData'.
import { getStorage, ref, getMetadata } from "firebase/storage"; // Create a reference to the file whose metadata we want to retrieve const storage = getStorage(); const forestRef = ref(storage, 'images/forest.jpg'); // Get metadata properties getMetadata(forestRef) .then((metadata) => { // Metadata now contains the metadata for 'images/forest.jpg' }) .catch((error) => { // Uh-oh, an error occurred! });Puede consultar Firebase Docs - File Metadata para una mejor comprensión