The XMLHttpRequest onError while converting s3bucket image to Unit8List.

[kanakapalli]

Description

in flutter web , uploading images is working fine. but, when I try to covert image Unit8List using Dio is throws the error: DioError [connection error]: The connection errored: The XMLHttpRequest onError callback was called. This typically indicates an error on the network layer.

code snippet to upload :

 final result = await Amplify.Storage.uploadFile(
          localFile: AWSFile.fromStream(
            file.openRead(),
            size: await file.length(),
          ),
          key: key,
          onProgress: (p0) => print(p0),
          options:  StorageUploadFileOptions(
              metadata: {"Content-Type": file.mimeType!})).result;

getting URL :

 final result = await Amplify.Storage.list(
      path: '$uploadTo/$barcode/',
      options: const StorageListOptions(
        accessLevel: StorageAccessLevel.guest,
        pageSize: 50,
        // excludeSubPaths: true,
      ),
    ).result;

observation : when I upload two same images to the s3 bucket first image throws the error but the second image Is converted into Unit8List.

flutter doctor:

[✓] Flutter (Channel stable, 3.7.11, on macOS 13.3.1 22E261 darwin-arm64, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.77.3)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

Categories

• [ ] Analytics
• [ ] API (REST)
• [ ] API (GraphQL)
• [ ] Auth
• [ ] Authenticator
• [ ] DataStore
• [X] Storage

Steps to Reproduce

• upload image to s3 bucket in a folder

• get list of image from the folder

• use dio to convert into unit8list code snippet :

  Future<Uint8List> getUnit8List(String url) async {
  print(url);
  try {
    Response response = await _dio.get<List<int>>(url,
        options: Options(responseType: ResponseType.bytes));
    return Uint8List.fromList(response.data);
  } catch (e) {
    print("error ========= ");
    print(e);
    rethrow;
  }
  }

• you will get the error here.

Screenshots

Platforms

• [ ] iOS
• [ ] Android
• [X] Web
• [ ] macOS
• [ ] Windows
• [ ] Linux

Flutter Version

3.7.11

Amplify Flutter Version

1.0.0

Deployment Method

Amplify CLI

Schema

No response

[dnys1]

Hi @kanakapalli, can you try a couple things?

• Can you set contentType on the AWSFile itself?

localFile: AWSFile.fromStream(
  file.openRead(),
  size: await file.length(),
  contentType: file.mimeType!,
),

• You mention using the list method to get the URL. Can you try with the getUrl method like this?

final result = await Amplify.Storage.getUrl(
  key: key,
  options: const StorageGetUrlOptions(
    accessLevel: StorageAccessLevel.guest,
  ),
).result;
final url = result.url.toString();

• Can you share any logs that show in the browser console itself?

[HuiSF]

Hi @kanakapalli wanted to check in with you regarding this issue.

Following Dillon's comment above, when you are downloading a file from your Storage, you will need to use the getUrl API to generate a downloadable URL. The the file keys contained in list API call result is not a downloadable URL. Please let us know if you need any further assistance.