Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to add a functional "upload picture" button?
Forum Updated to NodeBB v4.3 + New Features

How to add a functional "upload picture" button?

Scheduled Pinned Locked Moved Unsolved General and Desktop
21 Posts 6 Posters 3.0k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R 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.

    J.HilkJ Offline
    J.HilkJ Offline
    J.Hilk
    Moderators
    wrote on last edited by
    #10

    @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


    Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


    Q: What's that?
    A: It's blue light.
    Q: What does it do?
    A: It turns blue.

    1 Reply Last reply
    3
    • Pl45m4P 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)
      ButtonSpacerLayout.png

      @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.

      LabelButtonLayout.png

      R Offline
      R Offline
      Rangerguy128
      wrote on last edited by
      #11

      @Pl45m4 Thanks for the tips. I also laid out the first page horizontally (before I had it vertically): 1b7adb1e-c2ad-4744-9071-122d9f78336a-image.png

      As for the second page, I have it laid out horizontally, and I want the button to change back to be under the image: 55734483-8031-4b98-a07f-25155d19591f-image.png

      jsulmJ J.HilkJ JonBJ 3 Replies Last reply
      0
      • R Rangerguy128

        @Pl45m4 Thanks for the tips. I also laid out the first page horizontally (before I had it vertically): 1b7adb1e-c2ad-4744-9071-122d9f78336a-image.png

        As for the second page, I have it laid out horizontally, and I want the button to change back to be under the image: 55734483-8031-4b98-a07f-25155d19591f-image.png

        jsulmJ Offline
        jsulmJ Offline
        jsulm
        Lifetime Qt Champion
        wrote on last edited by
        #12

        @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?

        https://forum.qt.io/topic/113070/qt-code-of-conduct

        R 1 Reply Last reply
        0
        • R Rangerguy128

          @Pl45m4 Thanks for the tips. I also laid out the first page horizontally (before I had it vertically): 1b7adb1e-c2ad-4744-9071-122d9f78336a-image.png

          As for the second page, I have it laid out horizontally, and I want the button to change back to be under the image: 55734483-8031-4b98-a07f-25155d19591f-image.png

          J.HilkJ Offline
          J.HilkJ Offline
          J.Hilk
          Moderators
          wrote on last edited by
          #13

          @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.


          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


          Q: What's that?
          A: It's blue light.
          Q: What does it do?
          A: It turns blue.

          1 Reply Last reply
          0
          • R Rangerguy128

            @Pl45m4 Thanks for the tips. I also laid out the first page horizontally (before I had it vertically): 1b7adb1e-c2ad-4744-9071-122d9f78336a-image.png

            As for the second page, I have it laid out horizontally, and I want the button to change back to be under the image: 55734483-8031-4b98-a07f-25155d19591f-image.png

            JonBJ Offline
            JonBJ Offline
            JonB
            wrote on last edited by
            #14

            @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)?

            1 Reply Last reply
            0
            • Pl45m4P Offline
              Pl45m4P Offline
              Pl45m4
              wrote on last edited by Pl45m4
              #15

              @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 ?


              If debugging is the process of removing software bugs, then programming must be the process of putting them in.

              ~E. W. Dijkstra

              R 1 Reply Last reply
              1
              • jsulmJ 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?

                R Offline
                R Offline
                Rangerguy128
                wrote on last edited by
                #16

                @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?

                1 Reply Last reply
                0
                • JonBJ Offline
                  JonBJ Offline
                  JonB
                  wrote on last edited by
                  #17

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

                  1 Reply Last reply
                  0
                  • Pl45m4P 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 ?

                    R Offline
                    R Offline
                    Rangerguy128
                    wrote on last edited by
                    #18

                    @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: 0ab4b796-e7ea-4066-b95c-70b6af90b5a3-image.png
                    Anyway to fix this? Is it due to the image label's size? As a reminder, I have it laid out vertically here.

                    Pl45m4P 1 Reply Last reply
                    0
                    • R 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: 0ab4b796-e7ea-4066-b95c-70b6af90b5a3-image.png
                      Anyway to fix this? Is it due to the image label's size? As a reminder, I have it laid out vertically here.

                      Pl45m4P Offline
                      Pl45m4P Offline
                      Pl45m4
                      wrote on last edited by Pl45m4
                      #19

                      @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.


                      If debugging is the process of removing software bugs, then programming must be the process of putting them in.

                      ~E. W. Dijkstra

                      R 1 Reply Last reply
                      1
                      • Pl45m4P 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.

                        R Offline
                        R Offline
                        Rangerguy128
                        wrote on last edited by
                        #20

                        @Pl45m4 Like this? 5796f4ff-967d-4e96-81b7-1973ef45cf48-image.png

                        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.

                        Pl45m4P 1 Reply Last reply
                        0
                        • R Rangerguy128

                          @Pl45m4 Like this? 5796f4ff-967d-4e96-81b7-1973ef45cf48-image.png

                          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.

                          Pl45m4P Offline
                          Pl45m4P Offline
                          Pl45m4
                          wrote on last edited by
                          #21

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

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

                          Just try it. You will see that you don't need the text anyway. As soon as you set the image with something like

                          ui->label->setPixmap(....);
                          

                          the text will be replaced with the image.
                          If you make sure that the page with the label is never shown when there is no image, then you don't need any text.
                          In this case the text is just for you to see where the label actually is. Because when you remove the text, the label is very hard to track in QtDesigner since it's almost invisible. You can only see its border/frame.


                          If debugging is the process of removing software bugs, then programming must be the process of putting them in.

                          ~E. W. Dijkstra

                          1 Reply Last reply
                          1

                          • Login

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Categories
                          • Recent
                          • Tags
                          • Popular
                          • Users
                          • Groups
                          • Search
                          • Get Qt Extensions
                          • Unsolved