Uploaded file to S3 via PreSigned URL from Flutter App. but the file is corrupted when i download it

Question

I am working on a Flutter App, where I upload image file (PUT Request) to AWS S3 using a presigned URL. The upload is successful as I can see the file in S3. But when I click and download it from the bucket, the downloaded file is corrupted.

I am using Dio library for uploading the file. Uploading the image file as binary via postman works perfectly

uploadFileToPresignedS3(
    File payload, String fileName, String presignedURL) async {
  try {
    Dio dio = new Dio();

    FormData formData = new FormData.from(
        {"name": fileName, "file1": new UploadFileInfo(payload, fileName)});
    dio.put(presignedURL, data: formData);
  } catch (ex) {
    print(ex);
  }
}

Expected: The uploaded file not to be corrupted

Actual result: The uploaded file is corrupted

Update: I tried to upload using javascript XHR, and it worked fine. — Balaji, Jun 27 '19 at 07:19
Instead of Dio library, i just used http.put(presignedURL, body: payload.readAsBytesSync()); and it worked fine. — Balaji, Jun 27 '19 at 09:28
I'm having this problem as well, can you share the code please? — wei, Dec 09 '19 at 22:46
http.put() is working fine... but how to get the upload progress with put()? Dio provides a "onSendProgress" method to do this. — Rabi Roshan, May 04 '20 at 09:47

Rabi Roshan · Answer 1 · 2020-05-10T15:05:52.003

14

Use this code to upload file (image) to S3 pre-signed-url using Dio and show upload progress:

await dio.put(
    url,
    data: image.openRead(),
    options: Options(
      contentType: "image/jpeg",
      headers: {
        "Content-Length": image.lengthSync(),
      },
    ),
    onSendProgress: (int sentBytes, int totalBytes) {
      double progressPercent = sentBytes / totalBytes * 100;
      print("$progressPercent %");
    },
  );

Note: Do not set Content-Type header along with Content-Length like this:

headers: {
   "Content-Length": image.lengthSync(),
   "Content-Type": "image/jpeg",
},

Due to some reason, it will result in corrupted uploaded file.

Just in case: Instead of print("$progressPercent %") you can use setState() to show updates in UI.

Hope this helps.

edited May 10 '20 at 15:05

answered May 04 '20 at 10:39

Rabi Roshan

1,268
1
11
9

1

I tried the above solution but it didn't work. But after some trails and error I found that surprisingly sending 'Authorization' header was my mistake. if you are sending it try removing it. – Adarsh Senghani Jan 30 '21 at 05:46
it works, but when i uploaded image need image url in response. – Farhana Naaz Ansari May 20 '21 at 11:01
1

After wasting 3 days I finally came up to your solution. This is the only answer which worked in met case. Thank you – V Nikoyan Nov 27 '21 at 19:11

Luis · Answer 2 · 2020-12-09T02:16:46.157

To piggy back off of Rabi Roshans's comment you need to modify contenType to "application/octet-stream". In your backend's S3 params you need to do the same.

client code

  await dio.put(
    url,
    data: image.openRead(),
    options: Options(
      contentType: "application/octet-stream",
      headers: {
        "Content-Length": image.lengthSync(),
      },
    ),
    onSendProgress: (int sentBytes, int totalBytes) {
      double progressPercent = sentBytes / totalBytes * 100;
      print("$progressPercent %");
    },
  );

s3 backend

  var presignedUrl = s3.getSignedUrl("putObject", {
    Bucket: "your_bucke_name",
    Key: "filename.ext", 
    Expires: 120, // expirations in seconds
    ContentType: "application/octet-stream", // this must be added or you will get 403 error
  })

;

Thank you this line made my day ContentType: "application/octet-stream" thank you — Hatem R Saber, Feb 14 '22 at 19:05
for me, the only solution was to pass *an empty string* for ContentType! — mekdigital, Feb 16 '22 at 23:25

score 1 · Answer 3 · answered Jul 13 '21 at 17:30

I created this class to send an image to s3 using pre-signed url, I'm using camera lib to send a photo to s3.

import 'dart:convert';
import 'dart:io';

import 'package:camera/camera.dart';
import 'package:http/http.dart';
import 'package:http_parser/http_parser.dart';

class AwsApi {
  Future<String> uploadToSignedUrl({required XFile file, required String signedUrl}) async {
    Uri uri = Uri.parse(signedUrl);
    var response = await put(uri, body: await file.readAsBytes(), headers: {"Content-Type": "image/jpg"});

    return response;

  }
}

Uploaded file to S3 via PreSigned URL from Flutter App. but the file is corrupted when i download it

3 Answers3