Need Flutter Image upload with working example

Question

I'm new with flutter, stuck with image upload, tried some example it unable to get success. I used image_picker package, looking for both support web and mobile. if some one can guide me or share any working code?

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:image_picker/image_picker.dart';

...
File? _image;

final _picker = ImagePicker();
// Implementing the image picker
Future<void> _openImagePicker() async {
final XFile? pickedImage =
    await _picker.pickImage(source: ImageSource.gallery);
if (pickedImage != null) {
  setState(() {
    _image = File(pickedImage.path);
  });
uploadImage(_image)
}
}
...
..

Future uploadImage(File _file) async 
    var request = http.MultipartRequest(
       'POST',
       Uri.parse('APi url'),
    );
    Map<String, String> headers = {
      "Authorization": "Bearer userToken"
    };
    request.files.add(await http.MultipartFile.fromPath('image', _file.path));
    request.headers.addAll(headers);
    request.fields['name'] = 'demo';
    var response = await request.send();
    if(response.statusCode == 200) {
         print('Success');
    }else {      
       print('something went wrong');
    }
}

Answer 1

Please refer to below example code of uploading multiple images

Using these packages

images_picker: ^1.2.4

flutter_image_compress: ^0.7.0

Result

class PickMultipleImagesScreen extends StatefulWidget {
  const PickMultipleImagesScreen({Key key}) : super(key: key);

  @override
  _PickMultipleImagesScreenState createState() =>
      _PickMultipleImagesScreenState();
}

class _PickMultipleImagesScreenState extends State<PickMultipleImagesScreen> {
  final ValueNotifier<bool> attachMultipleImages = ValueNotifier<bool>(false);
  List compressedPhotosList = ["place_holder"];
  int maxImagesCount = 5;

  pickPhotos() async {
    List<Media> photosList = [];
    photosList = await ImagesPicker.pick(
      count: (compressedPhotosList != null &&
              (compressedPhotosList.isNotEmpty) &&
              (compressedPhotosList.length > 1))
          ? (maxImagesCount + 1 - compressedPhotosList.length)
          : maxImagesCount,
      pickType: PickType.all,
      language: Language.System,
      cropOpt: CropOption(
        aspectRatio: CropAspectRatio(600, 400),
      ),
    );

    if (photosList != null && photosList.isNotEmpty && photosList.length > 0) {
      for (int i = 0; i < photosList.length; i++) {
        File photoCompressedFile =
            await compressImage(File(photosList[i].path));
await uploadImage(photoCompressedFile); // Image Upload

        print("Images List: $photosList");
        print("Path of UnCompressed File: ${photosList[i].path}");
        compressedPhotosList.insert(
          0,
          photoCompressedFile.path.toString(),
        );
        print("Path of Compressed File: ${photoCompressedFile.path}");
        print("Compressed Images List: $compressedPhotosList");
      }
      attachMultipleImages.value = !attachMultipleImages.value;
    }
  }

  Future<File> compressImage(File file) async {
    final filePath = file.absolute.path;
    final lastIndex = filePath.lastIndexOf(new RegExp(r'.png|.jp'));
    final splitted = filePath.substring(0, (lastIndex));
    final outPath = "${splitted}_out${filePath.substring(lastIndex)}";

    if (lastIndex == filePath.lastIndexOf(new RegExp(r'.png'))) {
      final compressedImage = await FlutterImageCompress.compressAndGetFile(
          filePath, outPath,
          minWidth: 1000,
          minHeight: 1000,
          quality: 50,
          format: CompressFormat.png);
            return compressedImage;
    } else {
      final compressedImage = await FlutterImageCompress.compressAndGetFile(
        filePath,
        outPath,
        minWidth: 1000,
        minHeight: 1000,
        quality: 50,
      );
            return compressedImage;
    }
  }

  uploadImage(File imageFile) async {
    var stream =
        new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
    var length = await imageFile.length();

    var uri = Uri.parse(uploadURL);

    var request = new http.MultipartRequest("POST", uri);
    var multipartFile = new http.MultipartFile('file', stream, length,
        filename: basename(imageFile.path));

    request.files.add(multipartFile);
    var response = await request.send();

    var result =  response.stream.transform(utf8.decoder);

    if(response.statusCode == 200){
       print("Status code: ${response.statusCode}");
      var bytes = <int>[];

      response.stream.listen((newBytes) {
        bytes.addAll(newBytes);
        print("Stream: $bytes");
      }).onDone(
        () async {
          
          print(" Done");
        },
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ValueListenableBuilder<bool>(
          valueListenable: attachMultipleImages,
          builder: (context, snapshot, child) {
            return Scaffold(
              body: (compressedPhotosList != null &&
                      compressedPhotosList.isNotEmpty &&
                      compressedPhotosList.length > 1)
                  ? GridView.builder(
                      itemCount: (compressedPhotosList != null &&
                              compressedPhotosList.isNotEmpty &&
                              compressedPhotosList.length > 1 &&
                              (compressedPhotosList.length - 1 ==
                                  maxImagesCount))
                          ? compressedPhotosList.length - 1
                          : compressedPhotosList.length,
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3,
                          crossAxisSpacing: 4.0,
                          mainAxisSpacing: 4.0),
                      itemBuilder: (BuildContext context, int index) {
                        return ((compressedPhotosList[index] ==
                                    "place_holder") &&
                                compressedPhotosList.length - 1 !=
                                    maxImagesCount)
                            ? InkWell(
                                onTap: () async {
                                  if (compressedPhotosList.length - 1 !=
                                      maxImagesCount) {
                                    pickPhotos();
                                  }
                                },
                                child: Container(
                                  margin: EdgeInsets.all(
                                    5.0,
                                  ),
                                  width: ScreenUtil().screenWidth,
                                  height: ScreenUtil().setHeight(105.0),
                                  color: Colors.blueAccent,
                                  child: Center(
                                    child: Icon(
                                      Icons.add,
                                      size: ScreenUtil().setSp(24.0),
                                      color: Colors.grey,
                                    ),
                                  ),
                                ),
                              )
                            : Stack(
                                clipBehavior: Clip.none,
                                children: [
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(4.0),
                                    child: Image.file(
                                      File(compressedPhotosList[index]),
                                      fit: BoxFit.fitHeight,
                                      width: ScreenUtil().screenWidth,
                                      height: ScreenUtil().setHeight(105.0),
                                      filterQuality: FilterQuality.low,
                                      errorBuilder:
                                          (context, error, stackTrace) {
                                        return Container(
                                          width: ScreenUtil().screenWidth,
                                          height: ScreenUtil().setHeight(105.0),
                                          color: Colors.black,
                                        );
                                      },
                                    ),
                                  ),
                                  Positioned(
                                    bottom: 10,
                                    right: 8,
                                    child: InkWell(
                                      onTap: () async {
                                        compressedPhotosList.removeAt(index);
                                        attachMultipleImages.value =
                                            !attachMultipleImages.value;
                                      },
                                      child: CircleAvatar(
                                        radius: 15.0,
                                        backgroundColor: Colors.black45,
                                        child: Icon(
                                          Icons.delete_forever,
                                          color: Colors.white,
                                          size: 20,
                                        ),
                                      ),
                                    ),
                                  )
                                ],
                              );
                      },
                    )
                  : Center(
                      child: InkWell(
                        onTap: () {
                          pickPhotos();
                        },
                        child: Text("Attach Images"),
                      ),
                    ),
            );
          }),
    );
  }
}