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

1,263

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.

Share:
1,263
newbie dev
Author by

newbie dev

I am currently student and trying to learn various language including the android which i am currently pursing.

Updated on December 29, 2022

Comments

  • newbie dev
    newbie dev over 1 year

    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);
              },
            ),
          ],
        );
      }
    }