Flutter web the type File is defined in multiple classes

Question

I have a Flutter web project, where I would like to select a picture from the device and upload it to Firebase Storage. I found this solution:

Future<void> uploadToFirebase(File imageFile) async { //I get the error here
    final filePath = 'images/${DateTime.now()}.png';
    StorageTaskSnapshot snapshot = await FirebaseStorage.instance
        .ref()
        .child(filePath)
        .putFile(imageFile)
        .onComplete;
    print("UploadToFirebase");
    if (snapshot.error == null) {
      final String downloadUrl = await snapshot.ref.getDownloadURL();
      await Firestore.instance
          .collection("images")
          .add({"url": downloadUrl, "name": "${DateTime.now()}.png"});
    } else {
      print('Error from image repo ${snapshot.error.toString()}');
      throw ('This file is not an image');
    }
  }

void uploadImage() async {
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.click();
    uploadInput.onChange.listen(
      (changeEvent) {
        final file = uploadInput.files.first;
        final reader = FileReader();

        reader.readAsDataUrl(file);
        reader.onLoadEnd.listen(
          (loadEndEvent) async {
            print("Calling uploadToFirebase");
            uploadToFirebase(file);
            print("Done");
          },
        );
      },
    );
  }

But this code has the following error in the line with the comment:

The name 'File' is defined in the libraries 'dart:html' and 'dart:io'. Try using 'as prefix' for one of the import directives, or hiding the name from all but one of the imports.dartambiguous_import

After this I added a hide in my import dart html:

import 'dart:html' hide File;

However this resulted in another error in the uploadImage function, where I call uploadToFirebase(file): The argument type 'File (where File is defined in

C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\html\html_dart2js.dart)' can't be assigned to the parameter type 'File (where File is defined in C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\io\file.dart)'.dartargument_type_not_assignable html_dart2js.dart(15975, 7): File is defined in C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\html\html_dart2js.dart file.dart(241, 16): File is defined in C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\io\file.dart

My index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="12 órás eventek kezelésére">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="event_maker">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>event_maker</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->

  <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-firestore.js"></script>

<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-analytics.js"></script>
</script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    ...
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>     
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

Any other ideas on how to solve this? Or is there a better way to upload a file with a web app?
I'm a beginner to Flutter, so sorry, if it is a dumb question. Thanks for your help in advance!

Does this answer your question? Flutter web - Upload Image File to Firebase Storage — Spatz

jdsflk jdsflk · Accepted Answer · 2020-08-27T08:04:21

I think you're missing a for Firebase storage. Try adding the following line:

<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-storage.js"></script>

Flutter web the type File is defined in multiple classes

2 Answers