# Downloading Files with ui-template

**URL:** <https://discourse.nodered.org/t/downloading-files-with-ui-template/88193>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-template\
**Created:** [23 May 2024 11:26 UTC](https://discourse.nodered.org/t/downloading-files-with-ui-template/88193 "2024-05-23T11:26:25Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [24 May 2024 09:56 UTC](https://discourse.nodered.org/t/downloading-files-with-ui-template/88193/6 "2024-05-24T09:56:33Z")

</div>

You need to either address `msg.xxx` or use computed properties

direct

```auto
    <div>
        <a :href="msg.fileURL" :download="msg.filename">
            <v-btn :disabled="!msg.filename" type="button"> Download {{ msg.filename || '' }}</v-btn>
        </a>
    </div>

```

via computed

```auto
</template>
    <div>
        <a :href="fileURL" :download="filename">
            <v-btn :disabled="!filename" type="button"> Download {{ filename || '' }}</v-btn>
        </a>
    </div>
</template>

<script>
    export default {
        computed: {
            fileURL: function () {
                return this.msg?.fileURL
            },
            filename: function () {
                return this.msg?.filename
            }
        }
    }
</script>

```

---

_[View the full topic](https://discourse.nodered.org/t/downloading-files-with-ui-template/88193)._