How to hide dropzone based on browser session value?

Wappler General How To
1

Hi,
i set a session variable to file type (File or Image) to show a different file upload dropzone based on the fiel type, as i accept pdf and images, but if an image i resize etc, but of course not on pdf.

So my session is all set, and i display that in the page to be sure, i use session File and Image

I then have to dropzones with different ids.

I have code

<input id="inp_ImageUpload" name="file1" type="file" class="form-control mb-3" multiple="true" is="dmx-dropzone" accept=".png, .jpg, .jpeg" required="" message="Drop files here or click to upload. ONLY IMAGES" dmx-hide="session1.data.FileType!='Image'">

so to hide if session != Image ( I tried also using show if == image)

it never hides, i always get both my dropzone text fields.

I know my session is correct as I show it in the page. Can I not show/hide these form elements?

thanks

2

What is the exact value your session variable has and how / where do you set it?

3

on the page before there are 2 buttons, 1 button to upload pdf files and 1 button to accept images. when that button is clicked it sets the session and then goto the page to do the upload

the code on that page for one buttons is

<button id="btn1" class="btn btn-primary btn-lg text-white text-uppercase" dmx-on:click="session1.set('FileType','File');browser1.goto('/dashboard/FileUploads/upload-client-files')">

using the session manager. the session is set, as on the following page i display the session to confirm what type of files are being uploaded to the user.

thanks

4

The way dropzone works is different than a regular input. When loaded on the page it transforms your input to a styled div, so that it appears as a dropzone.

I suggest you to use conditional regions for this, so you can simply wrap your dropzone in a conditional:

<div id="conditionalImage" is="dmx-if" dmx-bind:condition="session1.data.FileType == 'Image'">
   <input id="inp_ImageUpload" name="file1" type="file" class="form-control mb-3" multiple="true" is="dmx-dropzone" accept=".png, .jpg, .jpeg" required="" message="Drop files here or click to upload. ONLY IMAGES">
</div>

This way the element won’t be rendered on the page, unlike when using the dmx-hide, where the element is rendered but just hidden using display: none;

But also if that’s all about resizing, you can simply use a condition on the server side and use just one dropzone on the page. Then depending on the file type(s) uploaded you can do different stuff on the server side :slight_smile:

1 Like
5

thanks will give that a try