I'm able to choose a list of images from Image Picker Web and display it on my app.
Future _pickMultiImages() async {
final images = await ImagePickerWeb.getMultiImagesAsWidget();
_pickedImages.clear();
if (images != null) _pickedImages.addAll(images);
setState(() {
_photo = _pickedImages;
});
I am NOT able to upload the list of images (or as individual images) to Firebase Storage. There's always some kind of complete problem.
void UploadImage(List<Image> pickedImages) async {
Directory appDocDir = await getApplicationDocumentsDirectory();
String appDocPath = appDocDir.path;
print(appDocPath);
final filePath = "${appDocPath}/path/to/mountains.jpg";
final file = File(filePath);
// Create the file metadata
final metadata = SettableMetadata(contentType: "image/jpeg");
// Create a reference to the Firebase Storage bucket
final storageRef = FirebaseStorage.instance.ref();
// Upload file and metadata to the path 'images/mountains.jpg'
final uploadTask =
storageRef.child("images/mountains.jpg").putFile(file, metadata);
}
I understand the above code isn't catered to my app yet and the reason is so you can see the default code. I don't get past appDocDir = await getApplicationDocumentsDirectory() I always get this:
void _complete() {
assert(_completed == null);
_completed = true;
_primaryCompleter.complete();
_secondaryCompleter?.complete();
}
CURRENT CODE THAT'S NOT WORKING TO DISPLAY IMAGE
import 'package:file_selector/file_selector.dart';
import 'package:flutter/material.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'dart:async';
import 'package:image_picker_web/image_picker_web.dart';
class UploadImageTest extends StatefulWidget {
const UploadImageTest({Key? key}) : super(key: key);
@override
State<UploadImageTest> createState() => _UploadImageTestState();
}
class _UploadImageTestState extends State<UploadImageTest> {
///////////////// VARIABLES ////////////////////////////////////////////////////////////////////
List<XFile> images = [];
var _pickedImages;
var _photo;
////////////////// IMAGE PICKING AND UPLOADING FUNCTIONS ////////////////////////////////////////
Future _pickMultiImages() async {
final images = await ImagePickerWeb.getMultiImagesAsBytes();
_pickedImages.clear();
if (images != null) _pickedImages.addAll(images);
setState(() {
_photo = _pickedImages;
});
print('pickMultiImages');
}
Future<List<XFile>?> _pickWebImages() async {
final typeGroup = XTypeGroup(label: 'images', extensions: ['jpg', 'png']);
final images = await openFiles(acceptedTypeGroups: [typeGroup]);
if (images == null) return null;
return images;
}
Future<void> uploadWebImages(List<XFile> images) async {
// Create the file metadata
final metadata = SettableMetadata(contentType: 'image/jpeg');
// Create a reference to the Firebase Storage bucket
final storageRef = FirebaseStorage.instance.ref('images');
// Upload files and metadata to the bucket
for (final image in images) {
final data = await image.readAsBytes();
final uploadTask = storageRef.child(image.name).putData(
data,
metadata,
);
await uploadTask;
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////
@override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
body: SingleChildScrollView(
child: Container(
child: Column(children: [
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Wrap(
// spacing: 15.0,
children: <Widget>[
AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
switchInCurve: Curves.easeIn,
child: SizedBox(
width: 500,
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 3,
/// length method not found
itemBuilder: (_, index) => _pickedImages[index]),
),
),
],
),
ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
_pickMultiImages();
},
child: const Text('Select Images'),
),
ElevatedButton(
onPressed: () {
uploadWebImages(_pickedImages);
},
child: const Text('Upload Images'),
),
]),
]),
),
])))),
);
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////
