Heyy, i am trying to upload a cropped image to firebase.
I would prefer to use the ionic native "image-picker" and "Crop".
I really dont know how to upload the image after cropping it, because it only returns the path of the new image.
I have already tryed something like this. This worked, but i was not able to crop the image. But as i mentioned, i would prefer using the native tools anyways.
export interface UploadData {
name: string;
filepath: string;
size: number;
}
uploadFile(event: FileList) {
// The File object
const file = event.item(0);
// Validation for Images Only
if (file.type.split('/')[0] !== 'image') {
console.error('unsupported file');
return;
}
// The storage path
const path = `whatever/${new Date().getTime()}_${file.name}`;
// File reference
const fileRef = this.storage.ref(path);
// The main task
this.task = this.storage.upload(path, file, { customMetadata });
this.snapshot = this.task.snapshotChanges().pipe(
finalize(() => {
// Get uploaded file storage path
this.UploadedFileURL = fileRef.getDownloadURL();
this.UploadedFileURL.subscribe(resp => {
this.addImagetoDB({
name: file.name,
filepath: resp,
size: this.fileSize
});
}, error => {
console.error(error);
});
}),
tap(snap => {
this.fileSize = snap.totalBytes;
})
);
}
addImagetoDB(image: UploadData) {
const id = this.db.createId();
// Set document id with value in database
this.imageCollection.doc(id).set(image).then(resp => {
console.log(resp);
}).catch(error => {
console.log('error ' + error);
});
}
}
This is how i would like to do it. But i really have no idea, how to upload it at this point.
pickImage() {
this.imagePicker.getPictures(this.imagePickerOptions).then((results)
=> {
// tslint:disable-next-line: prefer-for-of
for (let i = 0; i < results.length; i++) {
this.cropImage(results[i]);
}
}, (err) => {
alert(err);
});
}
cropImage(imgPath) {
this.crop.crop(imgPath, { quality: 50 })
.then(
newPath => {
// ?????
},
error => {
alert('Error cropping image' + error);
}
);
}
Sorry, i am very new to this stuff.
Thanks for your help :)
It seems that you might be able to do this without the crop feature being needed.
These are the options according to the docs:
options = {
// Android only. Max images to be selected, defaults to 15. If this is set to 1, upon
// selection of a single image, the plugin will return it.
maximumImagesCount: int,
// max width and height to allow the images to be. Will keep aspect
// ratio no matter what. So if both are 800, the returned image
// will be at most 800 pixels wide and 800 pixels tall. If the width is
// 800 and height 0 the image will be 800 pixels wide if the source
// is at least that wide.
width: int,
height: int,
// quality of resized image, defaults to 100
quality: int (0-100),
// output type, defaults to FILE_URIs.
// available options are
// window.imagePicker.OutputType.FILE_URI (0) or
// window.imagePicker.OutputType.BASE64_STRING (1)
outputType: int
};
So you could use:
options = {
maximumImagesCount: 3,
width: 800,
height: 600,
quality: 50,
outputType: 1
};
From what I've been researching you could then put the image into Firebase Storage using:
storageRef.putString("Your base64 string substring variable", 'base64');
I'm not sure if this is enough to get you fixed up but I thought I would post what I had found anyway.
I just tried this, but it dosn´t work too. I have no idea why...
constructor(private imagePicker: ImagePicker, private crop: Crop,
private file: File) {
let storageDb = firebase.storage();
this.storageRef = storageDb.ref();
}
pickImage() {
this.imagePicker.getPictures(this.imagePickerOptions).then((results)
=> {
// tslint:disable-next-line: prefer-for-of
for (let i = 0; i < results.length; i++) {
this.cropImage(results[i]);
}
}, (err) => {
alert(err);
});
}
cropImage(imgPath) {
this.crop.crop(imgPath, { quality: 50 })
.then(
newPath => {
try {
let n = newPath.lastIndexOf("/");
let x = newPath.lastIndexOf("g");
let nameFile = newPath.substring(n + 1, x + 1);
this.file.readAsArrayBuffer(newPath, nameFile).then((res) => {
let blob = new Blob([res], { type: "image/jpeg" });
var uploadTask = this.storageRef.child('images/' + this.event.id).put(blob);
uploadTask.on('state_changed', (snapshot) => {
let url = uploadTask.snapshot.downloadURL;
this.croppedImagepath = url;
}, (error) => {
alert("error: " + error);
}, () => {
alert("uploaded");
let url = uploadTask.snapshot.downloadURL;
this.croppedImagepath = url;
})
})
}
catch (z) {
alert('error beim erstellen des blobs' + z);
}
},
error => {
alert('Error cropping image' + error);
}
);
}
Related
I am using html-to-image library to convert div element to image, which is working fine for single div, but if i use it for divs in for loop then it breaks
<div *ngFor="let template of templates; index as i">
<div id="{{template.templateName}}_front_{{i}}" [innerHTML]="(template.templateHtmlFront) | safeHtml">
</div>
<div id="{{template.templateName}}_back_{{i}}"
[innerHTML]="(template.templateHtmlBack) | safeHtml"></div>
</div>
I want to convert each front and back template in an image. so i have written following code in ts file
async createFiles() {
const imageData: any[] = [];
for (let tempIdx = 0; tempIdx < this.templates.length; tempIdx++) {
const containerFront = document.getElementById(`${template.templateName}_front_${tempIdx}`);
//save front template
if (containerFront) {
await htmlToImage.toJpeg(containerFront)
.then((dataUrl) => {
const imageName = `${template.templateId}_front.jpeg`;
const imageBlob: Blob = this.service.dataURItoBlob(dataUrl);
const imageFile = new File([imageBlob], imageName, { type: 'image/jpeg' });
imageData.push(imageFile);
}).catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
//Save back
const containerBack = document.getElementById(`${template.templateName}_back_${tempIdx}`);
if (containerBack) {
await htmlToImage.toJpeg(containerBack)
.then((dataUrl) => {
const imageName = `${template.templateId}_back.jpeg`;
const imageBlob: Blob = this.service.dataURItoBlob(dataUrl);
const imageFile = new File([imageBlob], imageName, { type: 'image/jpeg' });
imageData.push(imgFile);
}).catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
}
}
}
This works fine for max 10 to 15 record, but of templates size is more than 15 then application hangs(or crashes). For 10-15 records also it takes 15mins(which is very slow) Is there any better way to make it work?
I'm building an Ionic app with Angular and Firebase.
I want to be able to upload an image and gif to my firebase database, but I've only been able to get image to work. Also, I don't want videos.
My code is as follows:
takePhoto(sourceType:number) {
const options: CameraOptions = {
quality: 40,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
sourceType:sourceType,
}
this.camera.getPicture(options).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
this.uploadToStorage(base64Image);
}, (err) => {
// Handle error
});
}
uploadToStorage(src) {
this.uploadProgress = true;
let storageRef = firebase.storage().ref();
// Create a timestamp as filename
this.imageFileName = Math.floor(Date.now() / 1000) + "_" + this.userData.uid;
// Create a reference to 'images/todays-date.jpg'
const imageRef = storageRef.child('posts/'+this.imageFileName+'.jpg');
imageRef.putString(src, firebase.storage.StringFormat.DATA_URL).then((snapshot)=> {
snapshot.ref.getDownloadURL().then(downloadURL => {
this.imageURL = downloadURL;
this.uploadProgress = false;
this.uploadSuccess = true;
console.log(this.imageURL)
this.logEvent("Uploaded Image");
});
}, (err) => {
console.log(err)
});
}
But this only allows still images. According to the docs for the Ionic Camera
you can change mediaType: this.camera.MediaType.PICTURE to mediaType: this.camera.MediaType.ALLMEDIA but that doesn't work for me. It works when I'm testing on my computer, but not on iOS or Android.
Any ideas how I can allow images and gifs from being selected? Thank you!
photos ;
OpenGallery(){
console.log("taktit");
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
console.log("taktit");
let base64Image = 'data:image/jpeg;base64,' + imageData;
this.photos.push(base64Image);
this.photos.reverse();
}, (err) => {
// Handle error
}); else { }
}
Now you can uplode your object photos to your firebase
// add no of images equal to Qty
handleQuantity(qty) {
this.setState({ qty: qty })
for (let i = 0; i < qty; i++) {
this.selectPhotoTapped(i)
}
}
selectPhotoTapped(count) {
const options = {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
storageOptions: {
skipBackup: true
}
};
ImagePicker.launchCamera(options, (response) => {
console.log(response);
if (response.didCancel) {
console.log('User cancelled photo picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else {
//let source = { uri: response.uri };
// this.setState({
// ImageSourceArr: [...this.state.ImageSourceArr, source]
// });
Realm.open(databaseOptions).then(realm => {
realm.write(() => {
realm.create(Images_SCHEMA, {
id: count,
path: response.uri
});
// this.setState({ size: realm.objects(Images_SCHEMA).length });
const res = realm.objects(Images_SCHEMA)
let res2 = JSON.parse(JSON.stringify(res))
for (let key in res2) {
this.setState({
ImageSourceArr: [...this.state.ImageSourceArr, res2[key].path],
size: realm.objects(Images_SCHEMA).length
});
}
});
});
}
});
}
handleQuantity() function call no of quantity times selectedPhototap() function
and selectedPhotoTap() function insert path into realm , but the problem is that it store only last image path,i want to insert all images that capture by function selectedPhotoTap
Please anybody help me
react-native-image-picker does not support for multiple image selection, crop tool, and landscape support for native iOS functionality - not issues with the library. If you need these things, react-native-image-crop-picker might be a better choice for you.
https://github.com/ivpusic/react-native-image-crop-picker
Problem
I am trying to create an app with react native and firebase. One of the features I would like for this app is the ability to upload images. I am having some trouble uploading the images to firebase storage though. I am using expo's image picker to find the path of the image that the user wants to upload, but once I have the path I don't know how to convert that to something I can upload to firebase.
Can somebody help me convert the path of an image to something I can upload to firebase storage with react native?
What I've tried
I tried using:
_pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
MediaTypeOptions: 'Images',
quality: 0.4,
_uploadAsByteArray = async (pickerResultAsByteArray, progressCallback) => {
try {
var metadata = {
contentType: 'image/jpeg',
};
var storageRef = firebase.storage().ref();
var ref = storageRef.child('images/'+expoID+'/'+this.state.time)
let uploadTask = ref.put(pickerResultAsByteArray, metadata)
uploadTask.on('state_changed', function (snapshot) {
progressCallback && progressCallback(snapshot.bytesTransferred / snapshot.totalBytes)
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
}, function (error) {
console.log("in _uploadAsByteArray ", error)
}, function () {
var downloadURL = uploadTask.snapshot.downloadURL;
console.log("_uploadAsByteArray ", uploadTask.snapshot.downloadURL)
this.setState({imageUploaded:true})
});
} catch (ee) {
console.log("when trying to load _uploadAsByteArray ", ee)
}
}
convertToByteArray = (input) => {
var binary_string = this.atob(input);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes
}
atob = (input) => {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
let str = input.replace(/=+$/, '');
let output = '';
if (str.length % 4 == 1) {
throw new Error("'atob' failed: The string to be decoded is not correctly encoded.");
}
for (let bc = 0, bs = 0, buffer, i = 0;
buffer = str.charAt(i++);
~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer,
bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0
) {
buffer = chars.indexOf(buffer);
}
return output;
}
uploadImage(bsfdata){
this.setState({imageUploaded:false})
this._uploadAsByteArray(this.convertToByteArray(bsfdata), (progress) => {
this.setState({ progress:progress })
})
}
base64:true,
});
/* if (!result.cancelled) {
this.setState({ image: result.uri });
let formData = new FormData();
formData.append('photo', {
uri,
name: `photo.${fileType}`,
type: `image/${fileType}`,
});}*/
this.uploadImage(result.base64);
};
}
I've tried it with the commented code added, which doesn't upload anything, and I've tried it with how the code is now, which gives me the error Can currently only create a Blob from other Blobs, and the uploading progress never gets above 0%.
If you are using expo (>=26), then you can do it easily with the following lines of code.
uploadImage = async(imageUri) => {
const response = await fetch(imageUri);
const blob = await response.blob();
var ref = firebase.storage().ref().child("image.jpg");
return ref.put(blob);
}
Reference: https://youtu.be/KkZckepfm2Q
Refer this link - https://github.com/dailydrip/react-native-firebase-storage/blob/master/src/App.js#L43-L69
Following block of code is working fine.
uploadImage(uri, mime = 'application/octet-stream') {
return new Promise((resolve, reject) => {
const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
let uploadBlob = null
const imageRef = FirebaseClient.storage().ref('images').child('image_001')
fs.readFile(uploadUri, 'base64')
.then((data) => {
return Blob.build(data, { type: `${mime};BASE64` })
})
.then((blob) => {
uploadBlob = blob
return imageRef.put(blob, { contentType: mime })
})
.then(() => {
uploadBlob.close()
return imageRef.getDownloadURL()
})
.then((url) => {
resolve(url)
})
.catch((error) => {
reject(error)
})
})
}
You need to install rn-fetch-blob module:
npm install --save rn-fetch-blob
Then, do the following:
import RNFetchBlob from 'rn-fetch-blob';
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;
function uploadImage(path) {
const imageFile = RNFetchBlob.wrap(path);
// 'path/to/image' is where you wish to put your image in
// the database, if you would like to put it in the folder
// 'subfolder' inside 'mainFolder' and name it 'myImage', just
// replace it with 'mainFolder/subfolder/myImage'
const ref = firebase.storage().ref('path/to/image');
var uploadBlob = null;
Blob.build(imageFile, { type: 'image/jpg;' })
.then((imageBlob) => {
uploadBlob = imageBlob;
return ref.put(imageBlob, { contentType: 'image/jpg' });
})
.then(() => {
uploadBlob.close();
return ref.getDownloadURL();
})
.((url) => {
// do something with the url if you wish to
})
.catch(() => {
dispatch({
type: UPDATE_PROFILE_INFO_FAIL,
payload: 'Unable to upload profile picture, please try again'
});
});
}
Please do ask if there's any part of the code that you don't understand. To upload multiple images, simply wrap this code with a for loop. Or if you want to make sure that every image is uploaded without any error, use Promise
Not sure whom this might help, but if you're using MediaLibrary to load images from the gallery, then the uri comes in the format of uri = file:///storage/emulated/0/DCIM/Camera/filename.jpg
In this case, using fetch(uri) didn't help me get the blob.
But if you use fetch(uri.replace("file:///","file:/")) and then follow #sriteja Sugoor's answer, you'll be able to upload the file blob.
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
let uploadBlob;
await fs
.readFile(params?.file.path, 'base64')
.then((data) => {
return Blob.build(data, {type: `BASE64`});
})
.then((blob) => {
uploadBlob = blob;
console.log(uploadBlob, 'uploadBlob');
});
I am working on a React project and I am using the Cordova plug-in for the first time. I have it taking pictures correctly but now I want to store them locally on the device using persistent storage. I found pretty good documentation but for some reason cannot get this code to work. If anyone could help I would really appreciate it!
Here is my function:
takePicture() {
navigator.camera.getPicture(
imageData => {
this.setState({image: imageData});
let path = 'filesystem:' + imageData;
window.resolveLocalFileSystemURL(
path,
(entry) => {
window.requestFileSystem(
LocalFileSystem.PERSISTENT,
50 * 1024 * 1024,
(fileSys) => {
//The folder is created if doesn't exist
fileSys.root.getDirectory(
'Observation Photos',
{create:true, exclusive: false},
directory => {
let d = new Date(),
n = d.getTime(),
filename = n + '.jpg';
entry.moveTo(directory, filename, (entry) => {
Photos.insert(entry);
}, handleError);
},
handleError
);
},
handleError
);
}, (error) => {
console.log(error);
}
);
}, message => {
console.log(message);
}
);
}
Here is an example of the paths I am passing in:
filesystem:file:///storage/emulated/0/Android/data/com.id1b9kkvri4mj2dnqkf9p/cache/1470171102308.jpg
Returns this in the inspector:
FileError {code: 5}
value of Path should be Android/data/com.id1b9kkvri4mj2dnqkf9p/cache/1470171102308.jpg;
so it needs a small change:
let path = imageData.replace("file:///storage/emulated/0/","");