How to deal with Live photo (IOS) in flutter
Hello Fluter developers,
I hope in the era of AI, you are doing well. Today we will discuss about Live photo from IOS device. All the low socio economic peasants ( like me 😣) who can’t afford to have an IOS but yet a flutter developers can ignore this post. 😛
Anyways, let’s get jump right into it.
It is seen that, after we pick Live Photos from our IOS gallery using image or file picker, the image paths does not work as other image or file formate works.
In flutter when you want to pick an image, there are several ways of doing that. There are “image_picker” or “file_picker” etc.
I can assume that you can install them in your project’s by adding them in “pubspec.ymal” file. Now let’s move into the implementations.
For File picker:
FilePickerResult? result = await FilePicker.platform.pickFiles(
allowMultiple: true,
type: FileType.media,
allowCompression: false,
);
if(result != null){
// do something with result.paths (List of String)
}For Image picker:
final List<XFile> images = await picker.pickMultiImage();
if(images.isNotEmpty){
// do something with images (List of XFile)
}Now that you have the list of file for both cases, all we need is just the paths of each and every file we have picked.
Now for other images like jpeg, jpg, png etc formate, the code it self works just fine. But in the case of Live photo, this code wont work as expected. Ok let me explain.
Say you want to pick one or many files or images and upload them into server through REST api. Yeah, obviously you will gonna need Multipart to do that right?
We already know that there are 2 ways to upload files or images using Multi part.
- fromFile()
- fromByte()
Now this is where will the problem will arise.
After you pick a Live photo from internal storage of the IOS device, the image or the file will provide a path like this:
example-internal-storage-path/…/file_name.pvt
Look closely, the extension here is “.pvt”. But if you look at the extension of the live photo from IOS device you will see that it is “HEIF” or “HEIC”. So the question arise where does this “.pvt” extension comes from. Let’s dive a bit deeper with this “.pvt” extension.
“.pvt” extension is nothing but a Directory. This is not a file. If you see the image bellow, the particular directory actually contains 3 files here.
- HEIC file
- MOV file
- metadeta
So here as you can see, you can directly access to this directory and and get you desired file and do anything you want. You can access these files by simply
example-internal-storage-path/…/file_name.pvt/file_name.HEIC (or .MOV)
But there are many cases where the name of the “.pvt” directory and the “HEIC” or “MOV” file name are not the same. so I think the best practice can be like this:
// you rest of codes
for (File item in fileList) {
try {
// getting the extension
String extension = item.path.split('.').last;
// check if the extension is "pvt"
if (extension == 'pvt') {
try{
List<FileSystemEntity> pvtFileList = Directory(item.path).listSync();
// list the files in the pvt directory
for(FileSystemEntity file in pvtFileList){
if(file.path.toLowerCase().contains(".heic")){
// Here you will find the HEIC file
}
else if(file.path.toLowerCase().contains(".mov")){
// Here you will find the MOV file
}
else if(file.path.toLowerCase().contains("metadata")){
// Here you will find the metadata file
}
}
}
catch(e,s){
printData("$e $s");
}
// you rest of codes
}
} catch (e, s) {
printData("$e $s");
}
}
// you rest of codesHere I have traverse the “.pvt” directory and searched for my desired file.
There you go. Happy coding ❤
Special thanks to Monir Hossain ❤
Reference: