I want the user to be able to upload multiple images and tag each image with some text. For example, when they click on image input button, they can upload unlimited images but when they click each image, 3 textboxes come on the screen for them to fill and once they are complete, camera is still open and they can click the next image and fill the textboxes. once they are done, they can click on Done. When they add each image, i want to upload that image to s3 and store its link and the info in the textboxes in a new row in the retool database.
How can i achieve this? My use case is that the users can upload image of each item in the inventory and enter what it is. Each user is uploading thousands of items every day, so they want the process to be continuous and easy.
Imagine there are 1000 smartphones in the store. They want to click image of each smartphone and enter its brand, model, and year of manufacturing. They have smartphones in a pile so they dont want to add each item individually, rather have the camera open and keep clicking and adding the text without stopping.
@Aarnav_Aggarwal welcome to the forums!
am i correct in my understanding that you want to show the user's camera at the same time as the text input boxes? instead of separate screens? and then they have to fill out all three text boxes before they can proceed to Done?
i would recommend looking into the JSON Schema Form component, because it's really flexible to craft your inputs and validation from a dynamic source. you specify like " i want a text input with this formatting and this label, this other box with no label and a default value, and then a dropdown with these options". then you make your Done button's disabled property be something like:
{{ !textArea1.value || !textArea2.value || !textArea3.value }}
which says to disable the button if any of the inputs are empty.
1 Like