Я создал функцию, позволяющую пользователям делать 1 фотографию, а затем загружать ее в мою базу данных Firebase. Однако я борюсь с:
1) Разрешение пользователям делать несколько снимков (скажем, 6). Есть ли какая-нибудь функция, которую я могу использовать, чтобы позволить камере оставаться открытой, чтобы позволить пользователям продолжать фотографировать, пока она не достигнет предела 6?
2) Объединение всех изображений и загрузка их в виде группы в базу данных Firebase. Прямо сейчас я просто определяю путь для хранения.
Я включил 5 функций, которые использую для:
1) Разрешить пользователю делать снимки с камеры (findNewImage)
2) Перед загрузкой убедитесь, что есть заголовок с изображением (uploadPublish)
3) Создайте путь к файлу для изображения на основе его формата: .png, .jpeg и т. Д. (UploadImage)
4) Загрузка изображения в Firebase с использованием пути к файлу, сгенерированного из «uploadImage» (completeUploadBlob)
5) Связывание изображения с базой данных в реальном времени (processUpload)
findNewImage = async () => {
this._checkPermissions();
let result = await ImagePicker.launchCameraAsync({
mediaTypes: "Images",
allowsEditing: true,
quality: 1
});
console.log("image picked is = result = ", result);
if (!result.cancelled) {
console.log("upload image");
this.setState({
imageSelected: true,
imageId: this.uniqueId(),
uri: result.uri
});
} else {
console.log("cancel");
this.setState({
imageSelected: false
});
}
};
uploadPublish = () => {
if (this.state.uploading == false) {
if (this.state.caption != "") {
//uploading image to firebase, as we have img with caption
this.uploadImage(this.state.uri);
} else {
alert("Please enter caption for your photo before posting!");
}
} else {
console.log("Ignoring click more than once.");
}
};
// this is main function to upload upload img
uploadImage = async uri => {
let that = this;
let userid = f.auth().currentUser.uid;
let imageId = this.state.imageId; // imgId = uniqueIdGenerated()
// check file extension ofo uploaded img
let re = /(?:\.([^.]+))?$/; // filename, regular-expression
let ext = re.exec(uri)[1]; // extension
this.setState({
currentFileType: ext,
uploading: true
});
let FilePath = imageId + "." + that.state.currentFileType;
const oReq = new XMLHttpRequest();
oReq.open("GET", uri, true);
oReq.responseType = "blob";
oReq.onload = () => {
const blob = oReq.response;
//Call function to complete upload with the new blob to handle the uploadTask.
this.completeUploadBlob(blob, FilePath);
};
oReq.send();
};
completeUploadBlob = (blob, FilePath) => {
let that = this;
let userid = f.auth().currentUser.uid;
let imageId = this.state.imageId;
let uploadTask = storage
.ref("user/" + userid + "/img")
.child(FilePath)
.put(blob);
uploadTask.on(
"state_changed",
snapshot => {
let progress = ((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(0);
console.log("Upload is " + progress + "% completed.");
that.setState({
progress: progress
});
},
err => { console.log("error with upload - " + err); },
// now upload is completed,
() => {
that.setState({
progress: 100
});
uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
console.log("downloadURL is =", downloadURL);
that.processUpload(downloadURL);
});
}
);
};
processUpload = imageUrl => {
// set needed info of user
//Set needed info
let imageId = this.state.imageId;
let userId = f.auth().currentUser.uid;
let dateTime = Date.now();
let caption = this.state.caption;
let timestamp = Math.floor(dateTime / 1000);
// we have uploaded img to storage, but we have to link that url with realtime-db
// photo-json = author, caption, posted-timestamp, urlofimg
let photoObj = {
author: userId,
caption: caption,
posted: timestamp,
url: imageUrl
};
// now, add info to realtime-db in two locations. as feed & profile
// add data to photo-obj and user-object
console.log("f.auth().currentUser.uid ", f.auth().currentUser.uid);
// first to add photo to main feed of photos database.ref("/photos/" + imageId).set(photoObj);
// add photosobj to user-json as well.
database.ref("/users/" + userId + "/photos/" + imageId).set(photoObj);
// photo was not uploaded automatically to photos collection, on adding it to user's collection
// then, manually adding that entry in photo collection after adding to users/userId/photosColln
database.ref("/photos/" + imageId).set(photoObj);
// for debugging to see why image is not uploaded to database
console.log("upload_226, userId =", userId);
console.log("upload_226, imageId =", imageId);
console.log("upload_226, photoObj is \n", photoObj);
alert("Image Successfully Uploaded. Refresh Feed to View.");
// after uploading photo, reset photo-attribute/ states
this.setState({
uploading: false,
imageSelected: false,
caption: "",
uri: ""
});
};
Заранее спасибо