Wt::WFileUpload::setDisplayWidget does't work with image

Added by Marcelo Antunes over 4 years ago

I made this widget (it inherits from Wt::WContainerWidget):

Image2::Image2()
{
    this->setStyleClass("image-input-wrapper");
    Wt::WImage *img=this->addWidget(std::make_unique<Wt::WImage>(Wt::WLink(Wt::LinkType::Url,"/resources/img/user-placeholder.jpg")));
    img->setStyleClass("rounded-circle");
    img->setWidth(Wt::WLength(100,Wt::LengthUnit::Pixel));
    img->setHeight(Wt::WLength(100,Wt::LengthUnit::Pixel));

    Wt::WFileUpload *fu=this->addWidget(std::make_unique<Wt::WFileUpload>());
    fu->setDisplayWidget(img);

    Wt::WPushButton *edit=this->addWidget(std::make_unique<Wt::WPushButton>("Edit image"));
    edit->setStyleClass("btn btn-del-imag");

    Wt::WPushButton *del=this->addWidget(std::make_unique<Wt::WPushButton>("Delete image"));
    del->setStyleClass("btn btn-edit-imag");
    del->setHidden(true);
}

But this widget is shown like this (the fileupload widget isn't hidden):

+------------+
|    image   |
|            |
+------------+
|file upload |
+------------+
|edit but    |
+------------+

Also is expected that when i click on image, the fileupload dialog should be shown, but it doesn't happen (not even server side the signal is fired).

What I'm doing wrong?

Marcelo

Replies (10)

RE: Wt::WFileUpload::setDisplayWidget does't work with image - Added by Roel Standaert over 4 years ago

Hello Marcelo,

It looks fine at first sight. What browser are you testing in? What are those style classes for? Does it work if you remove those style classes?

Regards,

Roel

RE: Wt::WFileUpload::setDisplayWidget does't work with image - Added by Marcelo Antunes over 4 years ago

Hello Roel

I tried on firefox and chrome and the behavior is the same, with or without style classes

Regards

Marcelo

RE: Wt::WFileUpload::setDisplayWidget does't work with image - Added by Roel Standaert over 4 years ago

That's odd, see the attached file for the code that's working fine for me. Do you see that issue with that file? Can you change something that makes the issue appear?

Download all files

forum_16484.cpp (843 Bytes) forum_16484.cpp	The code
my_img.png (762 Bytes) my_img.png	A 100x100 pixel png for testing

RE: Wt::WFileUpload::setDisplayWidget does't work with image - Added by Marcelo Antunes over 4 years ago

I solved the problem, aparently the problem was wit the setDisplayWidget function.

On wt reference of WFileUpload it says "This hides the default WFileUpload widget", but my code worked just when i hide the WFileUpload widget

this->setStyleClass("image-input-wrapper");
    Wt::WImage *img=this->addWidget(std::make_unique<Wt::WImage>(Wt::WLink(Wt::LinkType::Url,"/resources/img/user-placeholder.jpg")));
    img->setStyleClass("rounded-circle");
    img->setWidth(Wt::WLength(100,Wt::LengthUnit::Pixel));
      img->setHeight(Wt::WLength(100,Wt::LengthUnit::Pixel));

      Wt::WFileUpload *fu=this->addWidget(std::make_unique<Wt::WFileUpload>());
     fu->setDisplayWidget(img);
     fu->setHidden(true);

      Wt::WPushButton *editar=this->addWidget(std::make_unique<Wt::WPushButton>("Editar imagem"));
    editar->setStyleClass("btn btn-editar-imagem");

     Wt::WPushButton *apagar=this->addWidget(std::make_unique<Wt::WPushButton>("Apagar imagem"));
    apagar->setStyleClass("btn btn-apagar-imagem");
    apagar->setHidden(true);

Thanks

Marcelo

RE: Wt::WFileUpload::setDisplayWidget does't work with image - Added by Roel Standaert over 4 years ago

So my code sample works for you, but your code requires this setHidden() to make it work? That's odd.

RE: Wt::WFileUpload::setDisplayWidget does't work with image - Added by Marcelo Antunes over 4 years ago

Migth be because of WT version?

I have the last one (4.1.0), and I'm using mint, firefox and qtcreator.

RE: Wt::WFileUpload::setDisplayWidget does't work with image - Added by Roel Standaert over 4 years ago

I didn't recall fixing something like that since the 4.1.0 release, and checking out 4.1.0 and then trying with that seems just fine. I'm using Firefox on Ubuntu, so I don't know what's up. My example code does not work for you either?

RE: Wt::WFileUpload::setDisplayWidget does't work with image - Added by Marcelo Antunes over 4 years ago

Your code exactly as you posted doesn't work for me, but with the same code and if i hide the file uploader works.

RE: Wt::WFileUpload::setDisplayWidget does't work with image - Added by Roel Standaert over 4 years ago

Are you just missing the resources dir or something then? If you go to the network tab of your developer tools in the browser, are there any things that fail to load?

RE: Wt::WFileUpload::setDisplayWidget does't work with image - Added by Marcelo Antunes over 4 years ago

No, all resources are loaded and i don't see resources not loaded.

(1-10/10)

Project

General

Profile

Wt