Flutter File Upload - Pick, Crop, and Save Images to the Cloud

Hey Jeff, can you make a tutorial implementing JWT auth in Flutter with something like Laravel. Thank you.

Very good👍 nice video

thank you!

dont work on flutter web

Good video, but the code is deprecated, here is code bit for pulling and cropping image that works:

```
//* Get an image, crop and store
Future<void> _updateImage(ImageSource source) async {
//* Pull the img
File? img = await _pickImage(source);
//? Exn: bad img, clear state
if (img == null) return _setState();
//* Crop the image
File? croppedFile = await _cropImage(img);
_setState(img: croppedFile);
}

//* Helper to update the state variables
_setState({File? img}) {
setState(() => _imageFinal = img);
}

//* Pull image from given source using ImagePicker
Future<File?> _pickImage(ImageSource source) async {
ImagePicker _picker = ImagePicker();
XFile? img = await _picker.pickImage(source: source);
if (img == null) return null; //? Exn
return File(img.path);
}

//* Crops image
Future<File?> _cropImage(File img) async {
return await ImageCropper.cropImage(
sourcePath: img.path,
aspectRatioPresets: [
CropAspectRatioPreset.square,
CropAspectRatioPreset.original,
],
androidUiSettings: AndroidUiSettings(
toolbarTitle: 'Cropper',
toolbarColor: Colors.deepPurple,
toolbarWidgetColor: Colors.white,
initAspectRatio: CropAspectRatioPreset.original,
lockAspectRatio: false),
iosUiSettings: IOSUiSettings(
minimumAspectRatio: 1.0,
));
}
```

thanks for the video , what about Web ?

is there a newer version of this video? this stuff is deprecated

I am getting an error "field _image must be initialized" and "field _image isnt used".
How can I solve this?

Hey could u update the code?
Some of the code don't work anymore..
AWESOME VIDEO :) !

if (uploadTask.state == firebase_storage.TaskState.canceled)
and u can handle the rest

Awesome tutorial, keep it up 👍

I want to add a button action so that it can take a photo for my images and one of these images under listview. how can I do it?

Is there any plugin to compress the size of image?

is there a way to pick a pdf file?

What's the editor font??

This channel is seriously amazing. 👏

Please tell how you copy paste things....!

that's awesome.for a little problem I can't launch the app on iPhone any help

shows error in all those codelines related to toolbar please any solution for that will be really helpful

Thanks for take time to teach this!

Great video! One question: how, oh how, to change the color of AppBar in image_picker?? Please

If you are developing and you don't subscribe to this channel then are you even developing?

You helped me a lot!!!! love from India!! hoW CAN I UPLOAD TO ANY API?

i have done the same thing but the android app crashes at the croping part .. but works on ios ...do you have any idea?

Hello, Please how did you deal with the ... error?

Awesome Tutorial.

thanks alot, this saved me a huge deal of stress...

I love you

plse share me code

Please remember that Image cropper in Android will not work without adding this in AndroidManifest.xml file . It will crash the app <activity
android:name="com.yalantis.ucrop.UCropActivity"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

Use the latest version of the packages. That's very important!!!

Great and concise material, tons of functionality in a few lines of code!

Works great on iOS but I'm getting an app crash when saving or clearing the cropped image on Android. Any advice?

It seems once you close the App and re-open the app then the cropper does not work and shows No implementation found for cropper error. Anyone knows why?

i wrote the code but toobarColor , toolbarWidgetColor, toolbarTitle still showing an error please i need you help

And how do you delete these images? Looks like once you upload there is no way to delete, there are no tutorials on how to delete images from firebase storage in flutter.

source code

very cool and simple, thanks.

i wanted the uploaded images to be associated with a product e.g a thumbnail. How do i do that?

anyone have any resources for downloading the same image back?

Is it supposed to take a while for Xcode build to finish running? I am getting:
Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
Xcode build done. 19.0s
path: satisfied (Path is satisfied), interface: en0
Configuring the default Firebase app...
* First throw call stack:
(
0 CoreFoundation 0x0000000107e2002e __exceptionPreprocess + 350
1 libobjc.A.dylib 0x0000000107c8db20 objc_exception_throw + 48
2 CoreFoundation 0x0000000107e1fe6c +[NSException raise:format:] + 188
3 Runner 0x0000000101e8882a +[FIRApp configure] + 138
4 Runner 0x00000001023863f6 -[FLTFirebaseStoragePlugin init] + 214
5 Runner 0x000000010238621d +[FLTFirebaseStoragePlugin registerWithRegistrar:] + 173
6 Runner 0x0000000101e83cd4 +[GeneratedPluginRegistrant registerWithRegistry:] + 212
7 Runner <…> and it just keeps running Xcode build...thanks

Just added everything here into our app to support profile pictures. Video was a great help :)

Great video!
How can I save locally the image I take to use later in the app?
thanks

How can i get download link ? please

wow !

Amazing videos .. i was looking for some design patterns and best practices for javascript and u jumped into my head 🙂🙂 .. who would do such videos better than jeff !!! So i will be greedy and ask for that 😏 .. 🙏