How to add a functional "upload picture" button?

[Rangerguy128]

I'm trying to design a UI page through QT Designer where in the middle, a button that says "Upload Picture"is offered, where it searches through the computer files and accepts only photos (png, jpeg, etc.) Once uploaded, the picture is shown. I'm not sure how I could make it work. Should I use StackedWidgets for this? Any tips?

[JonB]

@Rangerguy128
Not QStackedWidget, that allows you to show just one of a number of alternative widgets, I don't see a demand for that here. (Unless you want to replace the button with the image, but then the user can't do it again; but if that is the case/question then yes to QStackedWidget.) Just create a QLabel (simplest widget which can show an image) and a QPushButton or QToolButton. Lay them out as you please. On clicking the button display a QFileDialog, QFileDialog::getOpenFileName() should do you. You can set its filter so as to only display desired file types. When user picks file read it in and set label's pixmap to it.

[Rangerguy128]

@JonB My idea is that in the middle of a widget, there should be abutton and when it opens an image file, the button disappears and the image takes up the page:

[ChrisW67]

@Rangerguy128 If you want to replace the Upload Image button with the image then, as @JonB already confirmed, QStackedWidget is one way to go about it. However, if the user might do this more than once you need to consider how the user returns to the Upload Image button after loading an image.

[Rangerguy128]

@ChrisW67 Thanks, will keep that in mind. I've decided to use QStackedWidgets, with index 0 where the button is placed, and the location of the uploaded image on index 1. Any other way to make it work? As in, how can I make the chosen uploaded image show up in the widget? Do I have to work around it through Python? Currently using VS Code as my editor. I'm also considering on adding a button under the image in case the user wants to reupload the image if they ever chose the wrong one.

[Pl45m4]

@Rangerguy128 said in How to add a functional "upload picture" button?:

I've decided to use QStackedWidgets, with index 0 where the button is placed, and the location of the uploaded image on index 1

As @JonB and @ChrisW67 have mentioned, you need to provide a way to switch back to the button page of your QStackedWidget.
Maybe via menu bar or you add another "Back" button below the label which shows your image to flip the QStackedWidget back to the button page.
Otherwise the user uploads one image and then gets stuck there, since you can't return from your image view page.

Also, I see no layouts. Seems like you just placed the button in the middle of your form.
Better: Add a layout (horizontal), put a spacer item left and right, and then place the button in the middle...

[Rangerguy128]

@Pl45m4 I layout both the button and the widget like you said but I couldn't place the button in the middle:

Anyway to position it in the middle? Also, for the second page (index 1), this is how I laid it out (the buttons on the left are from an older file and will be changed soon):

[Pl45m4]

@Rangerguy128 said in How to add a functional "upload picture" button?:

I layout both the button and the widget like you said but I couldn't place the button in the middle:

Like this for your first StackedWidget page:
(my plain "Form" widget is your StackedWidget "page" widget in QtDesigner)

@Rangerguy128 said in How to add a functional "upload picture" button?:

Anyway to position it in the middle? Also, for the second page (index 1)

Same here. If you don't need anything else showing on your StackedWidget, you can rebuild my "Form" design here for your second StackedWidget page.
The page itself has a vertical layout, where a horizontal layout including two spacers and the image label takes the top spot, and below that, directly added to the vertical layout, sits the button.

"Design" it in this order:
Drag one spacer, the label and the other spacer on your page widget. Arrange them and select them all 3 together. Right-click this "group" and select "lay out", -> "horizontally".
Next, drag your button below this layout. After that just right click anywhere on the stackedwidget page and set the vertical base layout for the page.
The "page" widget should look like mine now.

Actually, maybe you don't even need spacers for your image label. Then just skip the first part and just drag the label and the pushbutton on the page2 and select the vertical layout.

It's difficult to explain with words, but QtDesigner is very easy to handle once you know how to do these layouts (and cascade them, for example). Might be tricky at first, but actually not that hard.

[jsulm]

This post is deleted!

[J.Hilk]

@Rangerguy128 said in How to add a functional "upload picture" button?:

Do I have to work around it through Python

the action of the button and the resulting image change/upload you will have to do with code, c++ or Python. You can't do that purely via the Designer

QML and QML-Designer may offer more here, but I'm not sure

[Rangerguy128]

@Pl45m4 Thanks for the tips. I also laid out the first page horizontally (before I had it vertically):

As for the second page, I have it laid out horizontally, and I want the button to change back to be under the image:

[jsulm]

@Rangerguy128 said in How to add a functional "upload picture" button?:

and I want the button to change back to be under the image

Wasn't the idea that after clicking the button you load the image in another page in the stacked widget and then show that page?

[J.Hilk]

@Rangerguy128 said in How to add a functional "upload picture" button?:

As for the second page, I have it laid out horizontally, and I want the button to change back to be under the image:

stacking stuff on top of each other using layouts is not really a thing. At least not in designer. You can get around it in code and using Gridlayout. Then you can assign multiple widgets to a cell to stack them. But thats a workaround I would not necessarily recommend.

[JonB]

@Rangerguy128
It's up to you, but I don't really understand what you are trying to achieve or why. As I wrote originally

Just create a QLabel (simplest widget which can show an image) and a QPushButton or QToolButton. Lay them out as you please.

If you replace (e.g. with a QStackedWidget) the "Upload Image" button/link by the image then the user does not have a chance to pick a different image once they have picked one. Assuming you intend them to be able to replace whenever they wish, why don't you just make a widget with space for the image and the button below it (or wherever)?

[Pl45m4]

@J-Hilk @jsulm @JonB
If I understand @Rangerguy128 last post right, this was just a notice that he exchanged horizontal and vertical layout from my recommendation. I don't know if there's an issue or question left?
Does it look like you expect now @Rangerguy128 ?

[Rangerguy128]

@jsulm My idea is that once the user uploads an image, the page will change to the one with the image and a button below that allows the user to go back. Meanwhile, the button to upload the image will be in the center of the stackedwidget in the first page. Is that probable or maybe somewhat messy or unnecesary?

[JonB]

You can do that if you wish. Seems unnecessarily complex to me compared to just doing what I said. Up to you.

[Rangerguy128]

@Pl45m4 For the first page, it worked fine enough. For the second one, which is what you used as an example, I tried using horizontal spacers between the image label but it seems that there's an issue:
Anyway to fix this? Is it due to the image label's size? As a reminder, I have it laid out vertically here.

[Pl45m4]

@Rangerguy128

You need to use vertical spacers then. To push up/down instead of left/right.
Makes sense? :D

edit:
Or check if it still looks ok for you when removing them completely. So you just have the vertical layout with the image abovr the button left.

[Rangerguy128]

@Pl45m4 Like this?

Is the image positioned well enough? Should the text be centered or is it not necessary? The uploaded image should be the only thing to be shown in the label.