How to upload image directly to s3 bucket using flutter web?

Issue

I have been following this tutorial https://docs.amplify.aws/lib/storage/getting-started/q/platform/flutter. I have a image that i have uploaded using a button. How can I upload the image directly to s3 bucket using Flutter web ? I have came across multiple stack overflow posts where there are answers but I couldn’t find the correct answers in any file. I don’t have a backend. I am just trying to upload image from button to s3 bucket. I have the following file only. I hope i could get answers. Thank you in advance.

import 'package:flutter/material.dart';
import 'package:flutter_web_image_picker/flutter_web_image_picker.dart';
void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImagePickerPage(),
    );
  }
}

class ImagePickerPage extends StatefulWidget {
  @override
  _ImagePickerPageState createState() => _ImagePickerPageState();
}

class _ImagePickerPageState extends State<ImagePickerPage> {
  Image image;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ElevatedButton(
          child: Text("Select Image"),
          onPressed: () async {
            final _image = await FlutterWebImagePicker.getImage;
            setState(() {
              image = _image;
              print(image);
            });
          },
        ),
        CircleAvatar(
          radius: 50,
          backgroundColor: Colors.transparent,
          child: image != null
              ? image
              : Image.asset(
                  'dummy.png',
                  fit: BoxFit.cover,
                ),
        ),
        SizedBox(
          height: 50,
        ),
        ElevatedButton(
          child: Text("Upload to s3 bucket"),
          onPressed: () {
            print(image.semanticLabel);
          },
        ),
      ],
    );
  }
}

Solution

I find that using flutter web for uploading image directly to s3 bucket is somewhat hard approach. But instead of uploading image directly, i can make image as a file object then, pass on the AWS S3. While choosing file, i can validate it to take images only. In this way, i have successfully uploaded image to s3 without much hassle.

Answered By – newbie dev

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0