How can I accomplish this?

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.

Answered by Claude31 in 762762022

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) 
    }
}

All five of your buttons are the same, and they're using the same variables, so once you add one photo all the buttons react to the variables they're all using.

Why not have one button to add a photo, and once a valid image is chosen you increment a counter, then you disable or hide the button once you hit five. (And implement some means of removing an image once selected.)

Accepted Answer

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) 
    }
}
How can I accomplish this?
 
 
Q