Cómo elegir archivos e imágenes para cargar con flutter web

Este equipo de expertos pasados ciertos días de investigación y de recopilar de datos, encontramos la respuesta, esperamos que resulte útil para ti en tu trabajo.

Solución:

Probé el siguiente código y funcionó.

primero import 'dart:html';

// variable to hold image to be displayed 

      Uint8List uploadedImage;

//method to load image and update `uploadedImage`


    _startFilePicker() async 
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.click();

    uploadInput.onChange.listen((e) 
      // read file content as dataURL
      final files = uploadInput.files;
      if (files.length == 1) 
        final file = files[0];
        FileReader reader =  FileReader();

        reader.onLoadEnd.listen((e) 
                    setState(() 
                      uploadedImage = reader.result;
                    );
        );

        reader.onError.listen((fileEvent) 
          setState(() 
            option1Text = "Some Error occured while reading the file";
          );
        );

        reader.readAsArrayBuffer(file);
      
    );
    

ahora solo cualquier Widget, como un botón y llamar al método _startFilePicker()

He probado este paquete y estoy muy contento con el resultado imagePickerWeb devuelve 3 tipos diferentes que pueden ser en forma de imagen (widget para vista previa), byte, archivo (carga)

entonces puedes usar esto para obtener los valores

html.File _cloudFile;
 var _fileBytes;
 Image _imageWidget;
 
 Future getMultipleImageInfos() async {
    var mediaData = await ImagePickerWeb.getImageInfo;
    String mimeType = mime(Path.basename(mediaData.fileName));
    html.File mediaFile =
        new html.File(mediaData.data, mediaData.fileName, 'type': mimeType);

    if (mediaFile != null) 
      setState(() 
        _cloudFile = mediaFile;
        _fileBytes = mediaData.data;
        _imageWidget = Image.memory(mediaData.data);
      );
    

Subiendo a base de fuego

no olvide agregar esto a su index.html

Subiendo a base de fuego

import 'package:firebase/firebase.dart' as fb;
    uploadToFirebase(File file) async 

    final filePath = 'temp/$DateTime.now().png';//path to save Storage
    try 
      fb
          .storage()
          .refFromURL('urlFromStorage')
          .child(filePath)
          .put(file);
     catch (e) 
      print('error:$e');
    
  

Consulte la documentación del paquete si aún tiene problemas

La respuesta aceptada está desactualizada y usando dart:html No se recomienda empaquetar directamente en Flutter.

En su lugar, use este paquete: https://pub.dev/packages/file_picker.

Ejemplo de cómo usar en Flutter Web:

class FileUploadButton extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return RaisedButton(
      child: Text('UPLOAD FILE'),
      onPressed: () async 
        var picked = await FilePicker.platform.pickFiles();

        if (picked != null) 
          print(picked.files.first.name);
        
      ,
    );
  

Tenga en cuenta que FilePickerResult.path no es compatible con Flutter Web.

Tienes la opción de añadir valor a nuestro contenido informacional asistiendo con tu experiencia en las explicaciones.

---

---

Utiliza Nuestro Buscador