Flutter Web - Télécharger un fichier image sur Firebase Storage

Pour accéder à Cloud Storage dans votre application Flutter pour Web, vous pouvez utiliser le plugin firebase-dart . Vous pouvez trouver un exemple d' accès au stockage via firebase-dart dans le référentiel.

Finalement, j'ai réussi à trouver une solution à ce problème. Pour y parvenir, j'avais besoin d'installer deux dépendances, firebase et universal_html . Pourtant, difficile de trouver la solution, sa mise en œuvre était en fait simple. Voici le code de la fonction que j'ai utilisée pour télécharger le fichier image html sur Firebase Storage, dans le dossier "images":

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

Future<Uri> 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;
}

J'espère que cela aide quelqu'un qui a le même besoin que moi.

Voici l'extrait complet qui fonctionne pour moi pour télécharger l'image: html.File ne fonctionne pas pour moi, le fichier est téléchargé mais vous verrez Error loading preview dans le stockage Firebase, donc le simple fait de passer les octets fonctionne directement pour moi.

Pour afficher une image, vous pouvez utiliser mediaInfo.bytes avec un widget mediaInfo.bytes en charge les octets, par exemple FadeInImage vous pouvez utiliser MemoryImage(mediaInfo.bytes) et Image.memory(mediaInfo.bytes)

packages utilisés:

1. firebase
2. image_picker_web
3. chemin
4. type_mime

    Future<MediaInfo> imagePicker() async {    
        MediaInfo mediaInfo = await ImagePickerWeb.getImageInfo;
        return mediaInfo;
     }
     
     Future<Uri> 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;
        }
      }

Addendum connexe: Comment télécharger: Pourquoi c'était un tel secret caché, je n'en ai aucune idée. Merci à Learn Flutter Code pour ce joli petit tutoriel.

Ne faites pas de Firebase Storage une dépendance, juste Firebase avec:

        FutureBuilder<Uri>(
        future: myDownloadURL(),
        builder: (context, AsyncSnapshot<dynamic> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return <Something as a placeholder>;
          }
          return CircleAvatar(
            radius: backgroundRadius * 2,
            child: Image.network(snapshot.data.toString()),
          );
        },
      )

Puis créez une méthode:

        Future<Uri> myDownloadURL() async {return await fb.storage().refFromURL('gs://<your storage reference>').child('$id.jpg').getDownloadURL();}

Appelez-le d'un FutureBuilder comme ceci:

import 'package:firebase/firebase.dart' as fb;