Hi all, I am having an issue here that I can't seem to figure out. What I want to happen is the user can select an image by clicking on the 'addPhoto' button, which does work. the problem is after the image is selected the other 'addPhoto" buttons disappear from the screen. I want the user to be able to upload up to 5 images but with the other disappearing once the first image is selected obviously that cannot happen. Does anyone have recommendations on the best way to implement this?
Here is my code:
struct PostItemView: View { @State private var selectedImage: UIImage? @State var postImage: Image? @State var description = "" @State var imagePickerPresented = false
var body: some View {
NavigationView {
VStack(spacing: 10) {
HStack {
CircularProfileImageView(size: .medium)
Text("User Name")
.font(.system(size: 18,weight: .semibold))
}.padding(.top,30)
.padding()
Spacer()
Text("Add Photos (max. of 5)")
.padding()
.font(.system(size: 18,weight: .semibold))
ScrollView(.horizontal) {
HStack{
if postImage == nil {
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
} else if let image = postImage {
image
.resizable()
.scaledToFill()
.frame(width: 120,height: 120)
.clipped()
}
}
.foregroundColor(.black)
.padding(4)
}
Spacer()
Text("Give us some details:")
.font(.system(size: 18,weight: .semibold))
.padding()
TextField("Enter your information", text: $description)
.padding()
Spacer()
Button(action: {}, label: {
Text("Post my Item")
})
.font(.system(size: 20,weight: .semibold))
.frame(width: 300, height: 50)
.background(Color.green)
.cornerRadius(8)
.foregroundColor(.white)
}
.navigationTitle("Post Item")
.navigationBarTitleDisplayMode(.inline)
}
}
}
extension PostItemView { func loadImage() { guard let selectedImage = selectedImage else { return } postImage = Image(uiImage: selectedImage) } }
Thanks in advance.
what @darkpaw said, plus.
If you do want to keep 5 buttons (why would you need ?), you could keep track of buttons thatwere tapped:
@State private var buttonTapped = [false, false, false, false, false]
You turn tue in the relevant button action (here for the first 2)
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
buttonTapped[0].toggle()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
buttonTapped[1].toggle()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
And the test should be on buttonTapped.
Here would be the complete code (I could not test, so there may be some errors, but that should be the logic).
struct PostItemView: View {
@State private var selectedImage: UIImage?
@State var postImage: Image?
@State var description = "" @State
var imagePickerPresented = false
var body: some View {
NavigationView {
VStack(spacing: 10) {
HStack {
CircularProfileImageView(size: .medium)
Text("User Name")
.font(.system(size: 18,weight: .semibold))
}.padding(.top,30)
.padding()
Spacer()
Text("Add Photos (max. of 5)")
.padding()
.font(.system(size: 18,weight: .semibold))
ScrollView(.horizontal) {
HStack{
if buttonTapped[0] == false {
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
}
if buttonTapped[1] == false {
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
}
if buttonTapped[2] == false {
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
}
if buttonTapped[3] == false {
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
}
if buttonTapped[4] == false {
Button(action: {imagePickerPresented.toggle()}, label: {
AddPhotoButton()
}).sheet(isPresented: $imagePickerPresented, onDismiss: loadImage,content: {
ImagePicker(image: $selectedImage)
})
}
if let image = postImage {
image
.resizable()
.scaledToFill()
.frame(width: 120,height: 120)
.clipped()
}
}
.foregroundColor(.black)
.padding(4)
}
Spacer()
Text("Give us some details:")
.font(.system(size: 18,weight: .semibold))
.padding()
TextField("Enter your information", text: $description)
.padding()
Spacer()
Button(action: {}, label: {
Text("Post my Item")
})
.font(.system(size: 20,weight: .semibold))
.frame(width: 300, height: 50)
.background(Color.green)
.cornerRadius(8)
.foregroundColor(.white)
}
.navigationTitle("Post Item")
.navigationBarTitleDisplayMode(.inline)
}
}
}
extension PostItemView {
func loadImage() {
guard let selectedImage = selectedImage else { return }
postImage = Image(uiImage: selectedImage)
}
}