Dynamic img src not evaluating file input; beta 6

Wappler General Bugs
1

Wappler Version : 6 beta 6
Operating System : mac
Server Model: node
Database Type:
Hosting Type:

Expected behavior

dmx-show should evaluate

Actual behavior

It is not evaluated:

Screenshot 2023-09-04 at 4.10.06 PM
Screenshot 2023-09-04 at 4.10.06 PM894×121 32.5 KB

How to reproduce

These flex containers properly evaluate in AC1

<div class="d-flex ml-5" style="position: relative; background: var(--grey-10, #FAFAFA); border-radius: 1rem; height: 20rem; width: 20rem;" dmx-show="(!file_hero.file.dataUrl&&!get_sales_page.data.sales_page.hero_image_url)||hero_image_deleted.checked" id="hero_file_upload">
...
</div>

or

<div class="d-flex ml-5" dmx-show="file_hero.file.dataUrl||(get_sales_page.data.sales_page.hero_image_url&&!hero_image_deleted.checked)" id="hero_preview">
...
</div>
3

Bump. Still in beta 11

4

What do you mean it’s not evaluated? Isn’t it showing/hiding the selected element when the expression is true? Or are you referring to you actually seeing the attribute with the expressions in your browser code inspect?

5

I don’t think it has anything to do with the dmx-show attribute. Can you first test with a simplified expression.

It probably has to do with the expression, can you place a log around it, that should output the result of the expression in the console.

like:

dmx-show="log(file_hero.file.dataUrl||(get_sales_page.data.sales_page.hero_image_url&&!hero_image_deleted.checked))"

You can also log the separate parts of the expressions like:

dmx-show="log(file_hero.file.dataUrl)||(log(get_sales_page.data.sales_page.hero_image_url)&&log(!hero_image_deleted.checked))"

the only problem is that it is only logging the value and not what the source expression was.

6

Patrick is correct, it is not the show/hide.

Let me restate the issue now that I’ve tested the show closely:

The issue is that the file input dataUrl from file_hero is not being used for the src on the following img:

<img dmx-bind:src="file_hero.file.dataUrl||get_sales_page.data.sales_page.hero_image_url" class="sales_page_image">

Here is the block where the file_hero input lies:

<div class="d-flex ml-5" style="position: relative; background: var(--grey-10, #FAFAFA); border-radius: 1rem; height: 20rem; width: 20rem;" dmx-show="(!file_hero.file.dataUrl&&!get_sales_page.data.sales_page.hero_image_url)||hero_image_deleted.checked" id="hero_file_upload">
    ...
    <input is="dmx-dropzone" id="file_hero" type="file" name="file_hero" message="" accept=".png, .jpg, .jpeg" thumbs="false" style="z-index: 2;" dmx-on:click="hero_image_deleted.uncheck()">
</div>
<div class="d-flex ml-5" dmx-show="file_hero.file.dataUrl||(get_sales_page.data.sales_page.hero_image_url&&!hero_image_deleted.checked)" id="hero_preview">
    <div class="d-flex" style="position: relative;">
         ...
         <img dmx-bind:src="file_hero.file.dataUrl||get_sales_page.data.sales_page.hero_image_url" class="sales_page_image">
    </div>

</div>
7

Maybe its relate to this:

1 Like
8

Thx. That would make sense.