Upload image to Firebase Storage and show as Profile Image - swift

I need help with uploading image to Firebase Storage. I have a profile menu in my app. When user tap on this menu he/she can see profile with their info and Profile Image. So I made it so you can select a photo from the gallery. But I need to save photo to Firebase Storage and add ref to Firebase Database by uid.
In addition, the user may not have a photo, so it will be nill because nothing in Database. Look at photo and you will understand everything
extension ProfileViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
var selectedImage: UIImage?
if let editedImage = info[.editedImage] as? UIImage {
selectedImage = editedImage
self.profileImage.image = selectedImage!
self.savedImage = selectedImage
picker.dismiss(animated: true, completion: nil)
} else if let originalImage = info[.originalImage] as? UIImage {
selectedImage = originalImage
self.profileImage.image = selectedImage!
self.savedImage = selectedImage
picker.dismiss(animated: true, completion: nil)
}
}
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleSelectProfileImageView) )
profileImage.addGestureRecognizer(tapGesture)
profileImage.isUserInteractionEnabled = true
#objc func handleSelectProfileImageView () {
print("Tapped")
let pickerController = UIImagePickerController()
pickerController.delegate = self
present(pickerController, animated: true, completion: nil)
}
So, how to upload and dowload image.
If the user does not have a photo (ref in Database). He will see image from assets.
If the user have photo he will see image from FB.
image

For Uploading to Firebase storage
let imgData: NSData = NSData(data: UIImageJPEGRepresentation((self.img_Photo?.image)!, 0.5)!)
let _:NSData = NSData(data:UIImagePNGRepresentation(((self.img_Photo?.image)!))!)
self.uploadProfileImageToFirebase(data: imgData)
Function for uploading
func uploadProfileImageToFirebase(data:NSData){
let randomPic = randomString(length: 10)
let storageRef = Storage.storage().reference().child("Pictures").child("\(value(forKey: "UserUID") ?? randomPic).jpg")
if data != nil {
storageRef.putData(data as Data, metadata: nil, completion: { (metadata, error) in
if(error != nil){
print(error)
return
}
guard let userID = Auth.auth().currentUser?.uid else {
return
}
// Fetch the download URL
storageRef.downloadURL { url, error in
if let error = error {
// Handle any errors
if(error != nil){
print(error)
return
}
} else {
// Get the download URL for 'images/stars.jpg'
let urlStr:String = (url?.absoluteString) ?? ""
let values = ["photo_url": urlStr]
self.registerUserIntoDatabaseWithUID(uid: userID, values: values as [String : AnyObject])
}
}
})
}
}
func registerUserIntoDatabaseWithUID(uid:String, values:[String:AnyObject]){
let ref = Database.database().reference(fromURL: "https://domain.firebaseio.com/")
let usersReference = ref.child("users").child((Auth.auth().currentUser?.uid)!)
usersReference.updateChildValues(values) { (error, ref) in
if(error != nil){
print(error)
return
}
self.parentVC?.dismiss(animated: true, completion: nil)
}
}

Related

Check if picture is selected from photo library

The user can select a picture as a profile picture in my app.
After that he can click on done and the picture gets uploaded.
If the user does not select a picture my code still upload a blank picture by clicking on done.
How can I check if the user selected a picture and then trigger the function?
I need an if else statement but don't know how to get the status "is a picture selected?"
I could maybe also use a default value. But that would mean to download the actual picture and reupload it again as default. That does not sound good.
#IBOutlet weak var tapToChangeProfileButton: UIButton!
var imagePicker: UIImagePickerController!
var ref: DatabaseReference!
#IBAction func updateProfile(_ sender: UIButton) {
uploadPic(arg: true, completion: { (success) -> Void in
if success {
addUrlToFirebaseProfile()
} else {
}
})
func uploadPic(arg: Bool, completion: #escaping (Bool) -> ()) {
guard let imageSelected = self.image else {
completion(false);
return
}
guard let imageData = imageSelected.jpegData(compressionQuality: 0.1) else {
completion(false);
return
}
let storageRef = Storage.storage().reference(forURL: "gs://....e.appspot.com")
let storageProfileRef = storageRef.child("profilePictures").child(Auth.auth().currentUser!.uid)
let metadata = StorageMetadata()
metadata.contentType = "image/jpg"
storageProfileRef.putData(imageData, metadata: metadata, completion: {
(storageMetadata, error) in
if error != nil {
//print(error?.localizedDescription)
completion(false);
return
}
storageProfileRef.downloadURL(completion: { (url, error) in
if let metaImageURL = url?.absoluteString {
print(metaImageURL)
self.urltoPicture = metaImageURL
completion(true)
}
else
{
completion(false); return
}
})
})
}
func addUrlToFirebaseProfile(){
ref = Database.database().reference()
let userID = Auth.auth().currentUser!.uid
ref.child("user/\(userID)").updateChildValues(["profileText": profileText.text!])
print(urltoPicture)
ref.child("user/\(userID)").updateChildValues(["picture": urltoPicture])
}
self.navigationController?.popViewController(animated: true)
}
override func viewDidLoad() {
super.viewDidLoad()
let imageTap = UITapGestureRecognizer(target: self, action: #selector(openImagePicker))
profileImageView.isUserInteractionEnabled = true
profileImageView.addGestureRecognizer(imageTap)
tapToChangeProfileButton.addTarget(self, action: #selector(openImagePicker), for: .touchUpInside)
imagePicker = UIImagePickerController()
imagePicker.allowsEditing = true
imagePicker.sourceType = .photoLibrary
imagePicker.delegate = self
}
#objc func openImagePicker(_ sender:Any){
self.present(imagePicker, animated: true, completion: nil)
}
extension ImagePickerViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
func imagePickerControllerDidCancel(_ picker: UIImagePickerController){
picker.dismiss(animated: true, completion: nil)
}
internal func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any])
{
if let pickedImage = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
self.profileImageView.image = pickedImage
image = pickedImage
}
picker.dismiss(animated: true, completion: nil)
}
}
As I see from your code, whenever you get an image from imagePickerController you store it into variable self.image. Then whenever you click Done you just upload this self.image
Make variable self.image can be nil then remember to unset it after uploading successfully
Code will be like this
var image : UIImage? = nil
#IBAction func updateProfile(_ sender: UIButton) {
uploadPic(arg: true, completion: { (success) -> Void in
if success {
addUrlToFirebaseProfile()
self.image = nil // reset image to nil if success
} else {
}
})
}
You are setting self.image if the user selects a photo.
But you are not unsetting self.image if the user doesn't select a photo. It needs to be set to nil (not to an empty UIImage()).

I can't understand why posts are not loading in firebase

firebase does not write, although it seems to be syntactically correct. The application compiles, but no writes take place.
The documentation also seems to be correct.
the logic is simple. The user uploads a file from the phone, the file is sent to the repository
#IBAction func addButtonTouchUpInside(_ sender: Any) {
ProgressHUD.show("Waiting...", interaction: false)
if let profileImg = self.selectedImage, let imageData = image?.jpegData(compressionQuality: 0.4){
let photoIdString = NSUUID().uuidString
let storageRef = Storage.storage().reference(forURL: https://example.com).child("posts").child(photoIdString)
storageRef.putData(imageData, metadata: nil, completion: {(metadata, error) in
if error != nil {
ProgressHUD.showError(error!.localizedDescription)
return
}
let photoUrl = storageRef.downloadURL(completion: {url, error in
if error != nil {
print("Failed to download url:", error!)
return
} else {
let url = url?.absoluteString
self.sendDataToDatabase(photoUrl: url!)
}
})
})
}
}
func sendDataToDatabase(photoUrl: String){
let ref = Database.database().reference()
let postsReference = ref.child("posts")
let newPostId = postsReference.childByAutoId().key
let newPostReference = postsReference.child(newPostId!)
newPostReference.setValue(["photoUrl": photoUrl], withCompletionBlock: {
(Error, ref) in
if Error != nil {
ProgressHUD.showError(Error!.localizedDescription)
return
}
ProgressHUD.showSuccess("Success")
})
}
}
extension PerformViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate{
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]){
print("Did finish picking media")
if let image = info[UIImagePickerController.InfoKey.originalImage ] as? UIImage{
selectedImage = image
photo.image = image
}
dismiss(animated: true, completion: nil)
}
}

Upload image to Firebase from UIImagePicker

I would like to upload a profile picture to Firebase when my UIImage picker has been chosen. But I don't know how to do it and
I can not understand the documentation, because I'm new in coding). Please, help me. I need to upload picture to Firebase. It will be user picture, so reference to picture should save to Database.
extension ProfileViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
let image = info[UIImagePickerController.InfoKey.originalImage] as! UIImage
profileImage.image = image
picker.dismiss(animated: true, completion: nil)
}
I don't how to upload and dowload profile image.
Create a storage reference and add folder name and image names.
Storage.storage().reference().child("id").child("profile.png")
and use putData:metadata:completion: method to upload the image. Once image has been uploaded get the image url and update it in user details.
Upload profile image
import FirebaseStorage
import FirebaseAuth
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
if let image = info[.originalImage] as? UIImage, let imageData = image.pngData() {
profileImage.image = image
let storageRef = Storage.storage().reference().child("id").child("profile.png")
let metaData = StorageMetadata()
metaData.contentType = "image/png"
storageRef.putData(imageData, metadata: metaData) { (metaData, error) in
if error == nil, metaData != nil {
storageRef.downloadURL { url, error in
if let url = url {
print(url)//URL of the profile image
self.saveProfileImageUrlInUserDetails(url: url)
}
}
} else {
print(error?.localizedDescription)//upload failed
}
}
}
picker.dismiss(animated: true, completion: nil)
}
Save uploaded photo reference in user detail Update the user's profile
func saveProfileImageUrlInUserDetails(url: URL) {
let changeRequest = Auth.auth().currentUser?.createProfileChangeRequest()
changeRequest?.photoURL = url
changeRequest?.commitChanges(completion: { error in
if error == nil {
//saved
} else {
print(error?.localizedDescription)//failed to udpate
}
})
}
Download profile image
if let profileImgUrl = Auth.auth().currentUser?.photoURL?.absoluteString {
let ref = Storage.storage().reference(forURL: profileImgUrl)
ref.getData(maxSize: 1 * 1024 * 1024) { data, error in
if let error = error {
print(error.localizedDescription)
} else if let data = data, let image = UIImage(data: data) {
self.profileImage.image = image
}
}
}

Firebase storage

I tried to upload images into firebase storage, and fyi my app is under firebase phone number Auth registration. And here is my code for uploading images:
#IBAction func addBtnClicked(_ sender: UIButton) {
let picker = UIImagePickerController()
picker.delegate = self
picker.allowsEditing = true
present(picker, animated: true, completion: nil)
}
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
var selectedImageFromPicker: UIImage?
if let editedImage = info["UIImagePickerControllerEditedImage"] as? UIImage {
selectedImageFromPicker = editedImage
} else if let originalImage = info["UIImagePickerControllerOriginalImage"] as? UIImage {
selectedImageFromPicker = originalImage
}
if let selectedImage = selectedImageFromPicker {
imageView.image = selectedImage
}
let storageRef = Storage.storage().reference().child("profile_images").child("test01.png")
if let uploadData = UIImagePNGRepresentation(self.imageView.image!) {
storageRef.putData(uploadData, metadata: nil) { (metadata, error) in
if let error = error {
print(error)
return
}
}
dismiss(animated: true, completion: nil)
}
func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
print("canceled picker")
dismiss(animated: true, completion: nil)
}
But every time after I compiled, I got this error code:
User does not have permission to access gs://cal-dev.appspot.com/profile_images/test01.png." UserInfo={object=profile_images/test01.png, ResponseBody={
"error": {
"code": 403,
"message": "Permission denied. Could not perform this operation"
}
Have you given read and write access in your firebase console? It seems that you are not authorized to write data to firebase..

UIImagePickerView gives portion of image blank while selecting image in editing mode

I am using UIImagePickerView to allow user to select profile image. After selecting image from UIImagePickerView user select portion of image (Square selection box which comes in editing mode) when user choose that image I am uploading it to a server and also storing it to a local machine part of the image comes as a black when I open that image on server as well as on device.
This is how image looks after uploading.
Following code I am using.
func launchImagePicker(){
let imagePicker = UIImagePickerController()
imagePicker.delegate = self
imagePicker.allowsEditing = true
imagePicker.navigationBar.isTranslucent = false
imagePicker.navigationBar.barTintColor = UIColor(named:"navigationColor")
imagePicker.navigationBar.tintColor = .white
present(imagePicker, animated: true, completion: {
self.closeSharedWindow()
})
}
following will get call when we cancel picker
func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
dismiss(animated: true, completion: nil)
}
Here we are getting image from picker and uploading it.
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
var selectedImageFromPicker: UIImage?
if let editedImage = info["UIImagePickerControllerEditedImage"] as? UIImage {
selectedImageFromPicker = editedImage
}
else if let originalImage = info["UIImagePickerControllerOriginalImage"] as? UIImage {
selectedImageFromPicker = originalImage
}
if let selectedImage = selectedImageFromPicker{
profileImageView.image = selectedImage
self.uploadImageToServer(image: selectedImage , userId: (self.user?.userId)!) {
self.dismiss(animated: true, completion: nil)
}
}
}
following function will upload image to server
func uploadImageToServer(image: UIImage,userId: String,completion: #escaping () -> ()){
//,completion: #escaping ([String:Any])->Void
let imgData = UIImageJPEGRepresentation(image, 0.5)!
let parameters = ["userId": userId]
Alamofire.upload(multipartFormData: { multipartFormData in
multipartFormData.append(imgData, withName: "profileImage",fileName: "file.jpg", mimeType: "image/jpg")
for (key, value) in parameters {
multipartFormData.append(value.data(using: String.Encoding.utf8)!, withName: key)
}
},
to:APPURL.updateProfileImage)
{ (result) in
switch result {
case .success(let upload, _, _):
upload.uploadProgress(closure: { (progress) in
print("Upload Progress: \(progress.fractionCompleted)")
})
upload.responseJSON { response in
self.storeProfileImageDetail(image: image)
guard let profileImage = UIImageJPEGRepresentation(image,0.9) else {
print("Error in JPG Representation Image")
return
}
//save image on local
self.saveImageToDisk(image: profileImage)
completion()
}
case .failure(_):
self.view.makeToast("Failed to upload profile image.")
completion()
}
}
}
I am unable to understand what could be wrong any one have idea about this?