Dynamic index id

[psweb]

I am inside a repeat and accessing the $index property to make unique IDs and names for form elements, however I also want to display the name on the front end.

This works for the IDs and Names

dmx-bind:id="'number'+$index"

Now to display it on the browser

{{number[$index].file.name.default("Choose your file")}}

And that does not work, I could not describe how many forms of syntax I have actually tried, but so far I cant get it right. here is the real use case scenario

<div class="form-row mb-4" dmx-repeat:repeat_slides="scf_accom_ss_image.inp_accom_slideshow_amount.value.toNumber()">
	<div class="col-sm-6">
		<div class="custom-file">
			<input type="file" class="custom-file-input" dmx-bind:id="'inp_accom_ss_image_url'+$index" accept=".jpg" data-rule-maxfiles="1" required="" dmx-bind:name="'accom_ss_image_url'+$index">
			<label class="custom-file-label" dmx-bind:for="'inp_accom_ss_image_url'+$index">{{inp_accom_ss_image_url{{$index}}.file.name.default("Choose file (Minimum width 864px)")}}</label>
		</div>
		<div class="progress" dmx-show="state.uploading">
			<div class="progress-bar progress-bar-animated progress-bar-striped bg-info" role="progressbar" aria-valuenow="uploadProgress.percent" aria-valuemin="0" aria-valuemax="100" dmx-style:width="uploadProgress.percent+'%'">
			</div>
		</div>
	</div>
</div>

[ben]

Hi Paul,

What happens if you select the file name in the repeat region, like {{file.name}}. There is no need to attach the $index bit.

Edit: As a side note, I do not see any need to attach an ID to the input, it has no use (I think).

[psweb]

Thanks Ben, unfortunately its still not working as I would like, i tried {{file.name}} as suggested, but did not work.

For anyone trying to understand why I am doing this could you take a look at https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_form_custom_file&stacked=h, add a file for upload, then remove the javascript at the bottom, run the snippet, and try attach a file again, this time you will see the file name is not displayed at all.

I always replicate this behaviour with AppConnect, however normally not inside a repeat region.

EDIT: In the meantime, due to the urgency of this job, I have just used the normal file upload form element instead of the custom one, and hopefully if someone comes up with a solution I will replace it later on.

[George]

See also:

Duplicate ids - warnings in the console

You need to give both static id and dynamic id (with dmx-bind:ID) to get it to work. The static id - you can use into your expressions, the dynamic id is for the browser. So in your case it will be something like: id="checkbox_idRecord" dmx-bind:id="'checkbox_idRecord' + $index" the expression you have will continue to work with the static id.

[psweb]

Aha, thank you George, that works like a charm thank you so much.