I have an app which is used for taking pictures and sending them to the server. I use Image Picker -> Camera to take photos and they are stored in the default Image Picker storage.
I wrote a method to check for photos older than x days and removing them from the storage. However the path returned from the getApplicationDocumentsDirectory() method: /data/user/0/com.example.buzzbee/app_flutter is not what it is really on the phone: Android/data/com.example.buzzbee/files/Pictures.
Any ideas of what is going on? Where is this additional "app_flutter" coming from - do I need to erase it manually?
Here is the code:
Future<void> clearOldPictures({int daysOld}) async {
var directory = (await getApplicationDocumentsDirectory()).path;
debugPrint('APP STORAGE DIRECTORY: $directory');
var pictureList = Io.Directory("$directory/files/Pictures/").listSync();
debugPrint(pictureList.toString());
for (var picture in pictureList) {
var stat = Io.FileStat.statSync(picture.path);
var createdDate = stat.accessed;
var daysOld = DateTime.now().difference(createdDate).inDays;
if (daysOld >= daysOld) {
picture.delete();
}
}
}
Related
I'm using Flutter web for a webapp and having trouble converting an image from the image picker to a file in order to upload it to my server. I display the image in Image.file(xxx) but I get the error:
Error while trying to load an asset: FormatException: Illegal scheme
character (at character 6)
Image(image:%20MemoryImage(Uint8List%234267a,%20scale:%201),%20frameBuilder...
Here is the code I'm trying:
Future getImage(bool isCamera) async {
Image image;
if (isCamera) {
image = await FlutterWebImagePicker.getImage;
} else {
}
var bytes = await rootBundle.load('$image');
String tempPath = (await getTemporaryDirectory()).path;
File file = File('$tempPath/profile.png');
await file.writeAsBytes(
bytes.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes));
setState(() {
currentSelfie = file;
_accDetails['customer_selfie'] = currentSelfie;
});
}
Thanks in advance
I've tested this package and was very happy with the result imagePickerWebit returns 3 different types it can be in the form of Image(widget for preview), byte, File(upload)
then you can use this to get the values
html.File _cloudFile;
var _fileBytes;
Image _imageWidget;
Future<void> getMultipleImageInfos() async {
var mediaData = await ImagePickerWeb.getImageInfo;
String mimeType = mime(Path.basename(mediaData.fileName));
html.File mediaFile =
new html.File(mediaData.data, mediaData.fileName, {'type': mimeType});
if (mediaFile != null) {
setState(() {
_cloudFile = mediaFile;
_fileBytes = mediaData.data;
_imageWidget = Image.memory(mediaData.data);
});
}
I havent used the plugin although your code has 2 issues. One is the if statement and the second one is using Rootbundle. If you are picking from the filesystem, my assumption isCamera would be false. You have not added any logic for the falsy condition.
if (isCamera) {// This would be true if the source was camera
image = await FlutterWebImagePicker.getImage;
} else {
}
Additionally,
var bytes = await rootBundle.load('$image');
From the flutter documentation, rootbundle contains the resources that were packaged with the application when it was built. Those are assets that you define in your pubspec. yaml. You are selecting an image at runtime hence its not bundled as an asset.
Since the package appears to return an image object, use the toByteData method on the image i.e
image = await FlutterWebImagePicker.getImage;
await image.toByteData();//This method has some parameters. Look into them
I have an app that takes a photo.
I need that photo to be stored where all my assets/images/photos are.
So basically my question is :
a) how can I find the path where these assets are (on the phone)?
b) how can I add files to that same path?
Thanks
As per my knowledge you can not store image in assets package. Just because of when we build android/ios app after that assets folder is read only.
You need to store image in local mobile storage OR cloud OR catch memory
1) You can get storage path using :
Future<String> getStorageDirectory() async {
if (Platform.isAndroid) {
return (await getExternalStorageDirectory()).path; // OR return "/storage/emulated/0/Download";
} else {
return (await getApplicationDocumentsDirectory()).path;
}
}
2) Add image in path
createImage() async{
String dir= getStorageDirectory();
File directory = new File("$dir");
if (directory.exists() != true) {
directory.create();
}
File file = new File('$directory/image.jpeg');
var newFile = await file.writeAsBytes(/* image bytes*/);
await newFile.create();
}
I have small bug in my program.
I have firebase Storage in my app. I wanna let the user to upload image to the storage.
the thing is when the user uploads image and then tries to upload another image. what the program does it overwrites the image was uploaded before.
what I want is to avoid "overwrite" when the user wants to upload another image. and keep both images in different file
let currentUser = Auth.auth().currentUser
let StorageRefrenece = Storage.storage().reference()
let posterImageRef =
StorageRefrenece.child("posters").child(currentUser!.uid).child("posterOne.jpg")
Thnx
That is happening because you're storing them with the same name. In Firebase Storage you're the one in charge to decide the name of the files, there is no ".childByAutoId()".
If you want to have different files, you can create random values to name them, that is well explained here: How does one generate a random number in Apple's Swift language?
Your final code should look like this:
StorageRefrenece.child("posters").child(currentUser!.uid).child(<#Any Random Value#>)
import { v4 as uuid } from "uuid";
const unId = uuid();
const handleSubmit = async () => {
const imageRef = ref(storage, unId);
uploadBytes(imageRef, image)
.then(() => {
getDownloadURL(imageRef)
.then((url) => {
console.log("Url received from firebase: ",url)
setUrl(url);
})
})
}
I would like to do image annotation for my Ionic Application. So the flow of the app would be using the camera plugin to take a picture and use FabricJs to draw on the image then save the file.
I hit the roadblock when I am trying to save or overwrite the file. Apparently the source "http://localhost:8080/file/data/user/0/***/files/1547183479807.png" file does not update.
The flow of the app
1) Take picture with #ionic-native/camera
2) Copy the file to a local directory
3) Use this.win.Ionic.WebView.convertFileSrc to convert the file name to "http://localhost:8080/file/data/user/0/***/files/1547183479807.png"
4) Push to another page to access the canvas
5) Use the link to setBackground to my canvas (FabricJs)
6) Draw on the image (Manually)
7) Save the file via overwriting the existing file but nothing works from here on.
I tried to
- overwrite with writeFile & writeExisitingFile, did not work.
- removeFile and writeFile and did not work.
- tried converting to ArrayBuffer rather than Blob and did not work
- tried creating another new file, did not work too (it seems like after I push to a new page, all the file functions does not affect the files)
- tried using native cordova but did not work too.
- delete that same files twice, (first time I did not get an error but the second time I got an error saying "File Does not exist" but when I view the source, the file is also there and appearing in my thumbnail on my App.
private copyFileToLocalDir(namePath, currentName, newFileName,id,index) {
this.file.copyFile(namePath, currentName, this.file.dataDirectory, newFileName).then(success => {
const keys = id.split('-');
let filename = this.file.dataDirectory + newFileName;
this.fp = this.win.Ionic.WebView.convertFileSrc(filename) ;
this.navCtrl.push(AnnotationsPage, {
filepath: this.fp,
filename: newFileName
});
this.presentToast("Image Successfully Added",'middle');
}, error => {
this.presentToast('Error while storing file.','middle');
});
}
Annotation.ts
savePicture() {
let image = this.canvas.toDataURL({
format: 'png'
});
this.saveBase64(image);
}
public saveBase64(base64:string):Promise<string>{
return new Promise((resolve, reject)=>{
var realData = base64.split(",")[1]
let blob=this.b64toBlob(realData,"image/png")
this.file.writeFile(this.file.dataDirectory,this.filename,blob,{replace:true})
// this.file.writeExistingFile(this.file.dataDirectory,this.filename, blob)
.then((val)=>{
console.log('Write Info',val)
let fp = this.win.Ionic.WebView.convertFileSrc(this.file.dataDirectory+this.filename) ;
})
.catch((err)=>{
console.log('error writing blob')
console.log(err);
// reject(err)
})
})
}
b64toBlob(b64Data, contentType) {
contentType = contentType || '';
var sliceSize = 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
I check the base64 file, it is working fine (Throw the data to an online converter and it display the picture.
After the function "copyFileToLocalDir", it seems like I am unable to modify the files store in the local directory.
Thanks in advance. Feel free to ask me more question. 7 hours and no result.
Update on the testing, I am doing.
Did File.readAsDataUrl and as expected the file file:///data/user/0/*/files/1547231914843.png updated from the old image to the new edited. (Tested the base64 on some online converter) but it still does not reflect on the source http://localhost:8080/file/data/user/0/***/files/1547231914843.png
Thanks to all those who read through.
After tons of testing, I found out that Ionic Webview's files, will not be updated unless you recall them again (Kind of like a cache and apparently there is no way to reset or flush the cache).
So in my case, I would need to remove the image from the webview and call it out again then it will go back to retrieve again or create another file with another file name and display it.
I am using phonegap 2.0.0 on iOS and using basically the stock image capture code. After the image is captured it is saved to the phone, the URI is saved to the database along with the rest of the items info and the image is displayed on the page.
All this is working on both iOS and android. The issue is that when the iOS phone is turned off and allowed to sit for a period of time (overnight) the images no longer display. The rest of the data is retrieved from the database and displayed but the images just show a black square where the image should be (indicating the info is still inn the database)
Does iOS rename images after being turned off and allowed to sit for a some time? any suggestions? if the phone is turned off and back on this does not happen.. only after the phone sits for some time...
this seems very relevant...
Capturing and storing a picture taken with the Camera into a local database / PhoneGap / Cordova / iOS
for anybody else having this issue the following code worked for me...
function capturePhoto() {
navigator.camera.getPicture(movePic, onFail,{ quality : 70 });
}
function movePic(file){
window.resolveLocalFileSystemURI(file, resolveOnSuccess, resOnError);
}
function resolveOnSuccess(entry){
var d = new Date();
var n = d.getTime();
var newFileName = n + ".jpg";
var myFolderApp = "myPhotos";
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {
fileSys.root.getDirectory( myFolderApp,
{create:true, exclusive: false},
function(directory) {
entry.moveTo(directory, newFileName, successMove, resOnError);
},
resOnError);
},
resOnError);
}
function successMove(imageUri) {
document.getElementById('smallImage').src = imageUri.fullPath;
//hidden input used to save the file path to the database
document.getElementById('site_front_pic').value = "file://"+imageUri.fullPath;
smallImage.style.display = 'block';
}
function onFail(message) {
alert('Failed to load picture because: ' + message);
}
function resOnError(error) {
alert(error.code);
}