Flutter web – Sube un archivo de imagen a Firebase Storage

Si encuentras alguna parte que no entiendes puedes dejarlo en la sección de comentarios y trataremos de ayudarte rápidamente.

Solución:

Finalmente logré encontrar una solución a este problema. Para lograr esto necesitaba instalar dos dependencias, firebase y universal_html. Aunque difícil de encontrar la solución, su implementación fue realmente simple. Aquí está el código de la función que usé para cargar el archivo de imagen html en Firebase Storage, en la carpeta “imágenes”:

import 'dart:async';
import 'package:universal_html/prefer_universal/html.dart' as html;
import 'package:firebase/firebase.dart' as fb;

Future uploadImageFile(html.File image,
      String imageName) async 
    fb.StorageReference storageRef = fb.storage().ref('images/$imageName');
    fb.UploadTaskSnapshot uploadTaskSnapshot = await storageRef.put(image).future;
    
    Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
    return imageUri;

Espero que le sirva a alguien con la misma necesidad que yo.

Aquí está el recorte completo que funciona para mí para cargar la imagen:
html.File no me funciona, el archivo esta subido pero veras Error loading preview en el almacenamiento de base de fuego, por lo que simplemente pasar los bytes funciona directamente para mí.

Para mostrar una imagen puedes usar mediaInfo.bytes con widget que admite bytes, por ejemplo FadeInImage puedes usar MemoryImage(mediaInfo.bytes) y Image.memory(mediaInfo.bytes)

paquetes utilizados:

1. base de fuego
2. image_picker_web
3. sendero
4. tipo de Mimica

    Future imagePicker() async     
        MediaInfo mediaInfo = await ImagePickerWeb.getImageInfo;
        return mediaInfo;
     
     
     Future uploadFile(
          MediaInfo mediaInfo, String ref, String fileName) async 
        try 
          String mimeType = mime(Path.basename(mediaInfo.fileName));

          // html.File mediaFile =
          //     new html.File(mediaInfo.data, mediaInfo.fileName, 'type': mimeType); 
          final String extension = extensionFromMime(mimeType);

          var metadata = fb.UploadMetadata(
            contentType: mimeType,
          );

          fb.StorageReference storageReference =
              fb.storage().ref(ref).child(fileName + ".$extension");

          fb.UploadTaskSnapshot uploadTaskSnapshot =
              await storageReference.put(mediaInfo.data, metadata).future;

          Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
          print("download url $imageUri");
          return imageUri;
         catch (e) 
          print("File Upload Error $e");
          return null;
        
      

Para acceder a Cloud Storage en su aplicación Flutter para Web, puede usar el firebase-dart enchufar. Puede encontrar un ejemplo de cómo acceder al almacenamiento a través de firebase-dart en el repositorio.

Comentarios y puntuaciones del post

Si te apasiona este mundo, eres capaz de dejar una división acerca de qué te ha gustado de este artículo.

---

---

Utiliza Nuestro Buscador