Adding file input field to Jira admin page breaks Jira navigation

Jira Development Jira Server
1

It appears that adding the file upload input field breaks Atlassian Navigation. Once you remove it the navigation re-appears.

        <fieldset>
            <legend><span>File upload</span></legend>
            <div class="field-group">
                <input id="currentproject" name="currentproject" value="$projectkey" type="hidden"/>
                <label for="csv-file-upload">Upload PracticeIDs</label>
                <input class="upfile" type="file" id="csv-file-upload" name="practicesid.csv">
                <button type="submit" name="csv-submit-button" class="aui-button">Upload</button>
            </div>
        </fieldset>

22%20PM
22%20PM2458×1722 322 KB

2

Any chance your id="currentproject" is colliding with something jira is expecting in its navbar? It’s probably a good idea to namespace any ids/classes you use in your app to avoid collisions anyway.

1 Like
3

I agree on the namespace point but that is not the issue.

4

Hi @vmutambuki,

Are you able to post any errors you received in the browser console?

5

I replicated the problem in a new repo for anyone to look at . Bitbucket

6

It looks like this is a Jira-specific issue, not an AUI issue.

I can see the following error in the browser developer console:

Uncaught Unable to find maximum upload size on form.
init	@	InlineAttach.js?locale=en-AU:1026
Class	@	Class.js:124
init	@	InlineAttach.js?locale=en-AU:350
(anonymous)	@	Class.js:88
Class	@	Class.js:124
init	@	InlineAttach.js?locale=en-AU:48
Class	@	Class.js:124
(anonymous)	@	jquery.inlineAttach.js?locale=en-AU:22
each	@	jquery.js:370
each	@	jquery.js:138
jQuery.fn.inlineAttach	@	jquery.inlineAttach.js?locale=en-AU:21
createInlineAttach	@	initInlineAttach.js?locale=en-AU:10
(anonymous)	@	initInlineAttach.js?locale=en-AU:15

This code appears to be a Jira-specific UI behaviour. Browsing the source code, it appears there are two ways you can avoid the problem:

  1. Add a ignore-inline-attach CSS class to your file input element.
  2. Add a <span hidden id="attach-max-size">9001</span> element to your form. Replace 9001 with the maximum file size that users should be able to upload.

Hope that helps!
Daz

1 Like
7

Thanks for the solution. The CSS line fixed it.