File Upload Field: Show file names?

Wappler General Need Help
1

Screenshot 2024-07-02 at 6.10.38 PM
Screenshot 2024-07-02 at 6.10.38 PM1090×286 32.5 KB

Believe it or not, I have successfully been able to upload files to my server, store the file location in my DB, and delete both the file on disk and the DB entries without much strife. Thank you Wappler!

All I want to know is if there's a way to show the user the file names chosen when using the "multiple" option on the form input element. Currently, when more than 1 file is chosen, the input field shows the count of files. It only shows the file name when one file is chosen to be uploaded.

Thanks in advance.

2

Inspecting dmx.app.data it seems you can use ####.files as a repeat expression and then use name on each paragraph:

image
image451×690 25.8 KB

For example:

    <form id="form1">
        <div class="form-group mb-3">
            <label for="input1" class="form-label">Images upload</label>
            <input type="file" class="form-control" multiple id="input1" name="input1[]" aria-describedby="input1_help">
        </div>
        <div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="input1.files">
            <div class="col">
                <p>{{name}}</p>
            </div>
        </div>
    </form>
3

You could also consider using Dropzone. This will show you an icon and the filename. Great for multiple uploads.

4

@franse hey thanks! That may be a solution. I was looking for ways to list the added files, even if by just an unordered list. Your solution is appreciated.

5

Sorry! Can you explain what do you mean with this?

6

@Cheese Thank you. I did try to use Dropzone but received an error. I think I may have toggled off the App Connect Mode because I have a condition that interferes with seeing page elements. It works well, just gets in the way sometimes in "split" view mode.

I changed the input to dropzone with app Connect Mode on and tested it. I think that will work. It has the ability to remove individual files from the selection which is ultimately what I was looking for.

Now if only it would play nicely with me styling its initial height. I'd prefer it to start out at 40px rather than what looks like 100 - 120px. Regardless, thanks! I'm pushing that to staging for review.

7

Your solution creates a list of files by name, each within a paragraph tag. This was one approach I considered: just building a list dynamically below the input field, but using UL and LI tags instead of Paragraph tags. Your answer provided me with the "how to" if I decided to use that solution.

8

You can override it, it's just css, for example:

.dmxDropzoneThumb{
    height: 40px !important;
    width: 70px !important;
}

Then:
image

Instead of:
image

Of course it's an example..
Just make sure your custom css is loaded after other css

Also other configurations are available to see on:
dmxAppConnect/dmxDropzone/dmxDropzone.css

Just override it on your custom css, and use !important if you need to

1 Like