Hi I've been trying to create a html page that will allow users to upload their custom ovpn config files to Openwrt. However, I have encountered a weird problem where my form's action attribute would point to the wrong url after browser rendering:

Original source:
<fieldset class="cbi-section">
    <form method="post" action="<%=url('admin/services/openvpn_test/upload_config')%>" enctype="multipart/form-data">
<!--         <input type="hidden" name="token" value="<%=token%>" />
-->
        <div class="cbi-section-node">
            <div class="cbi-value cbi-value-last<% if image_invalid then %> cbi-value-error<% end %>">
                <label class="cbi-value-title" for="image"><%:Config Name%>:</label>
                <div class="cbi-value-field">
    <!--                 <input type="text" placeholder="Config Name"/>
     -->                <input type="file" name="image" id="image" />
                    <input type="submit" class="cbi-button cbi-input-apply" value="<%:Upload File%>" />
                </div>
            </div>
        </div>
    </form>
</fieldset>

After rendering (or what I see in the browser):

<form method="post" name="cbi" action="/cgi-bin/luci/admin/services/openvpn_test" enctype="multipart/form-data" onreset="return cbi_validate_reset(this)" onsubmit="return cbi_validate_form(this, 'Some fields are invalid, cannot save values!')">
    <div>
        <script type="text/javascript" src="/luci-static/resources/cbi.js?v=git-17.051.53299-a100738" data-strings="{&quot;path&quot;:{&quot;resource&quot;:&quot;\/luci-static\/resources&quot;,&quot;browser&quot;:&quot;\/cgi-bin\/luci\/admin\/filebrowser&quot;},&quot;label&quot;:{&quot;choose&quot;:&quot;-- Please choose --&quot;,&quot;custom&quot;:&quot;-- custom --&quot;}}"></script>
        <input type="hidden" name="token" value="209855933d91d6866e377f956780a704">
        <input type="hidden" name="cbi.submit" value="1">
        <input type="submit" value="Save" class="hidden">
    </div>
<div class="cbi-map" id="cbi-openvpn">
    <h2 name="content">OpenVPN</h2>
    <!-- tblsection -->
<fieldset class="cbi-section" id="cbi-openvpn-<    %=self.sectiontype%>">
    <legend>OpenVPN instances</legend><div class="cbi-section-descr">Below is a list of configured OpenVPN instances and their current state</div>
    <div class="cbi-section-node"><table class="cbi-section-table">
            <tbody><tr class="cbi-section-table-titles"><th>&nbsp;</th><th class="cbi-section-table-cell">Enabled</th><th class="cbi-section-table-cell">Started</th><th class="cbi-section-table-cell">Start/Stop</th><th class="cbi-section-table-cell">Porqt</th><th class="cbi-section-table-cell">Protocol</th><th class="cbi-section-table-cell">&nbsp;</th></tr>
            <tr class="cbi-section-table-descr"><th></th><th class="cbi-section-table-cell"></th><th class="cbi-section-table-cell"></th><th class="cbi-section-table-cell"></th><th class="cbi-section-table-cell"></th><th class="cbi-section-table-cell"></th><th class="cbi-section-table-cell"></th></tr><tr class="cbi-section-table-row cbi-rowstyle-1" id="cbi-openvpn-Vancouver">
                <th><h3>Vancouver</h3></th><td class="cbi-value-field">
<div id="cbi-openvpn-Vancouver-enabled" data-index="" data-depends="[]">

    <input type="hidden" value="1" name="cbi.cbe.openvpn.Vancouver.enabled">
    <input class="cbi-input-checkbox" data-update="click change" type="checkbox" id="cbid.openvpn.Vancouver.enabled" name="cbid.openvpn.Vancouver.enabled" value="1">
    <label for="cbid.openvpn.Vancouver.enabled"></label>
</div>
</td>

<td class="cbi-value-field">
<div id="cbi-openvpn-Vancouver-_active" data-index="" data-depends="[]">

no
<input type="hidden" id="cbid.openvpn.Vancouver._active" value="no">
</div>
</td>

<td class="cbi-value-field">
<div id="cbi-openvpn-Vancouver-start" data-index="" data-depends="[]">

   
        <input class="cbi-button cbi-input-reload" type="submit" name="cbid.openvpn.Vancouver.start" id="cbid.openvpn.Vancouver.start" value="start">
   
</div>
</td>

<td class="cbi-value-field">
<div id="cbi-openvpn-Vancouver-port" data-index="" data-depends="[]">

1194
<input type="hidden" id="cbid.openvpn.Vancouver.port" value="1194">
</div>
</td>

<td class="cbi-value-field">
<div id="cbi-openvpn-Vancouver-proto" data-index="" data-depends="[]">

udp
<input type="hidden" id="cbid.openvpn.Vancouver.proto" value="udp">
</div>
</td>

<td class="cbi-section-table-cell"><input class="cbi-button cbi-button-edit" type="button" value="Edit" onclick="location.href='/cgi-bin/luci/admin/services/openvpn/basic/Vancouver'" alt="Edit" title="Edit"></td></tr><tr class="cbi-section-table-row cbi-rowstyle-2" id="cbi-openvpn-USA">
                <th><h3>USA</h3></th><td class="cbi-value-field">
<div id="cbi-openvpn-USA-enabled" data-index="" data-depends="[]">

    <input type="hidden" value="1" name="cbi.cbe.openvpn.USA.enabled">
    <input class="cbi-input-checkbox" data-update="click change" type="checkbox" id="cbid.openvpn.USA.enabled" name="cbid.openvpn.USA.enabled" value="1">
    <label for="cbid.openvpn.USA.enabled"></label>
</div>
</td>

<td class="cbi-value-field">
<div id="cbi-openvpn-USA-_active" data-index="" data-depends="[]">

no
<input type="hidden" id="cbid.openvpn.USA._active" value="no">
</div>
</td>

<td class="cbi-value-field">
<div id="cbi-openvpn-USA-start" data-index="" data-depends="[]">

   
        <input class="cbi-button cbi-input-reload" type="submit" name="cbid.openvpn.USA.start" id="cbid.openvpn.USA.start" value="start">
   
</div>
</td>

<td class="cbi-value-field">
<div id="cbi-openvpn-USA-port" data-index="" data-depends="[]">

1194
<input type="hidden" id="cbid.openvpn.USA.port" value="1194">
</div>
</td>

<td class="cbi-value-field">
<div id="cbi-openvpn-USA-proto" data-index="" data-depends="[]">

udp
<input type="hidden" id="cbid.openvpn.USA.proto" value="udp">
</div>
</td>

<td class="cbi-section-table-cell"><input class="cbi-button cbi-button-edit" type="button" value="Edit" onclick="location.href='/cgi-bin/luci/admin/services/openvpn/basic/USA'" alt="Edit" title="Edit"></td></tr></tbody></table>

        </div>
</fieldset>
<a href="/cgi-bin/luci/admin/services/openvpn_test/upload_config"><button>ClickMe</button></a>
<h3>Upload New Config</h3>
<fieldset class="cbi-section">
   
        <input type="hidden" name="token" value="209855933d91d6866e377f956780a704">

        <div class="cbi-section-node">
            <div class="cbi-value cbi-value-last">
                <label class="cbi-value-title" for="image">Config Name:</label>
                <div class="cbi-value-field">
    <!--                 <input type="text" placeholder="Config Name"/>
     -->                <input type="file" name="image" id="image">
                    <input type="submit" class="cbi-button cbi-input-apply" value="Upload File">
                </div>
            </div>
        </div>
   
</fieldset>

<!-- /tblsection -->

    <br>
</div></form>

Not sure why the bolded url gets changed would someone be able to explain?

The <%=...%> notation means that there is a variable there, and it should be changed by it's value. If you want to maintain the literal, just use <form method="post" action="admin/services/openvpn_test/upload_config>" enctype="multipart/form-data">.

I have tried doing that as well but the end result is still the same. So when I set the action as a string literal:

Source:
<form method="post" name="cbi" action="/cgi-bin/luci/admin/services/openvpn_test/upload_config" ..

After rendering:
<form method="post" name="cbi" action="/cgi-bin/luci/admin/services/openvpn_test"

Luci automatically changes my url for some reason...