renovate the file upload

src/main/java/hudson/plugins/sidebar_link/SidebarLinkPlugin.java

@@ -43,7 +43,6 @@
 
 import hudson.Extension;
 import hudson.FilePath;
-import hudson.model.Hudson;
 import hudson.util.FormValidation;
 import jenkins.model.GlobalConfiguration;
 import jenkins.model.Jenkins;
@@ -94,7 +93,7 @@ public void setLinks(List<LinkAction> links) {
     public void doUploadLinkImage(StaplerRequest req, StaplerResponse rsp)
             throws IOException, ServletException, InterruptedException {
         Jenkins jenkins = Jenkins.get();
-        jenkins.checkPermission(Hudson.ADMINISTER);
+        jenkins.checkPermission(Jenkins.ADMINISTER);
         FileItem file = req.getFileItem("linkimage.file");
         String error = null;
         String filename = null;
@@ -112,10 +111,10 @@ public void doUploadLinkImage(StaplerRequest req, StaplerResponse rsp)
                 imageFile.chmod(0644);
             }
         }
-        rsp.setContentType("text/html");
-        rsp.getWriter().println(
-                (error != null ? error : Messages.Uploaded("<code>/" + filename + "</code>"))
-                        + " <a href=\"javascript:history.back()\">" + Messages.Back() + "</a>");
+        if (error != null) {
+            rsp.setStatus(400);
+        }
+        rsp.getWriter().println(error != null ? error : Messages.Uploaded("'/" + filename + "'"));
     }
 
     @Restricted(NoExternalUse.class)

src/main/resources/hudson/plugins/sidebar_link/Messages.properties

@@ -1,4 +1,4 @@
 Uploaded=Uploaded image file; use {0} in Link Icon field above.
 NoFile=No file uploaded.
-DupName=File with this name already exists in userContent.
+DupName=A file with this name already exists in userContent.
 Back=Back

src/main/resources/hudson/plugins/sidebar_link/SidebarLinkPlugin/config.jelly

@@ -5,11 +5,9 @@
              description="${%List of extra links for Jenkins main pages and view tabs}">
       <sl:links links="${it.links}"/>
     </f:entry>
-    <f:entry>
-      <j:set var="url" value="${rootURL}/descriptorByName/hudson.plugins.sidebar_link.SidebarLinkPlugin/startUpload"/>
-      <iframe src="${url}" frameborder="0" style="width:100%;height:4em;margin-top:2em">
-        <a href="${url}" target="_blank">${%Upload image file...}</a>
-      </iframe>
-    </f:entry>
+    <sl:fileUpload title="${%Upload an image file}"
+                   url="${rootURL}/descriptorByName/hudson.plugins.sidebar_link.SidebarLinkPlugin/uploadLinkImage"
+                   description="${%Image should be square; will be rendered as 24x24.}"
+    />
   </f:section>
 </j:jelly>

src/main/resources/hudson/plugins/sidebar_link/SidebarLinkPlugin/config_ja.properties

@@ -23,4 +23,7 @@
 Sidebar\ Links=\u30b5\u30a4\u30c9\u30d0\u30fc\u30ea\u30f3\u30af
 List\ of\ extra\ links\ for\ Jenkins\ main\ pages\ and\ view\ tabs=Jenkins\u306e\u30e1\u30a4\u30f3\u30da\u30fc\u30b8\u3068\u30d3\u30e5\u30fc\u306b\u8868\u793a\u3059\u308b\u8ffd\u52a0\u30ea\u30f3\u30af\u306e\u4e00\u89a7\u3067\u3059\u3002
 Additional\ Sidebar\ Links=\u8ffd\u52a0\u306e\u30b5\u30a4\u30c9\u30d0\u30fc\u30ea\u30f3\u30af
-Upload\ image\ file...=\u30a4\u30e1\u30fc\u30b8\u30d5\u30a1\u30a4\u30eb\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3066\u3044\u307e\u3059...
+Upload\ an\ image\ file=\u30a4\u30e1\u30fc\u30b8\u30d5\u30a1\u30a4\u30eb\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9
+Image\ should\ be\ square;\ will\ be\ rendered\ as\ 24x24.=\u30a4\u30e1\u30fc\u30b8\u306f\u6b63\u65b9\u5f62\u3067\u3042\u308b\u3079\u304d\u3067\u3059\u3002\u4f7f\u7528\u6642\u306b24x24\u3067\u63cf\u753b\u3055\u308c\u307e\u3059\u3002
+Upload=\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9
+

src/main/resources/hudson/plugins/sidebar_link/fileUpload.jelly

@@ -0,0 +1,37 @@
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:f="/lib/form">
+  <st:documentation>
+    Generates an input field <code>&lt;input type="file" ... /></code>
+    and a button to upload the selected file asynchronously to the given URL.
+    <st:attribute name="title" use="required">
+      Title for the input
+    </st:attribute>
+    <st:attribute name="url" use="required">
+      URL were to upload
+    </st:attribute>
+    <st:attribute name="description">
+      URL were to upload
+    </st:attribute>
+    <st:attribute name="buttonValue">
+      The text of the upload button
+    </st:attribute>
+
+  </st:documentation>
+
+  <f:entry title="${attrs.title}">
+    <div class="sidebar-link__file-upload">
+      <f:file clazz="sidebar-link__file-upload-input"/>
+      <button data-url="${url}"
+              data-no-file="${%noFile}"
+              type="button"
+              class="sidebar-link__file-upload-button jenkins-button jenkins-button--primary jenkins-!-margin-bottom-1">
+        ${attrs.buttonValue ?: '%Upload'}
+      </button>
+      <br/>
+      <j:if test="${attrs.description != ''}">
+        <span class="setting-description">${attrs.description}</span>
+      </j:if>
+    </div>
+  </f:entry>
+  <st:adjunct includes="hudson.plugins.sidebar_link.upload"/>
+</j:jelly>

src/main/resources/hudson/plugins/sidebar_link/fileUpload.properties

@@ -0,0 +1 @@
+noFile=No file chosen.

src/main/resources/hudson/plugins/sidebar_link/links.jelly

@@ -1,27 +1,24 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form">
     <!-- l:header does not work here -->
-    <style type="text/css">table.sidebar_link td { vertical-align:middle; }</style>
     <f:repeatable var="link" items="${instance.links}" name="links" add="${%Add Link}" header="${%Sidebar Link}">
-        <table class="sidebar_link">
-            <f:entry title="${%Link URL}" help="/plugin/sidebar-link/help-url.html">
-                <f:textbox name="urlName" value="${link.unprotectedUrlName}" field="linkUrl"
-                           checkUrl="${rootURL}/descriptorByName/hudson.plugins.sidebar_link.SidebarLinkPlugin/checkLinkUrl"
-                           checkDependsOn="" />
-            </f:entry>
-            <f:entry title="${%Link Text}">
-                <f:textbox name="displayName" value="${link.displayName}" field="linkText"
-                           checkUrl="${rootURL}/descriptorByName/hudson.plugins.sidebar_link.SidebarLinkPlugin/checkLinkText"
-                           checkDependsOn="" />
-            </f:entry>
-            <f:entry title="${%Link Icon}" help="/plugin/sidebar-link/help-icon.html">
-                <f:textbox name="iconFileName" value="${link.iconFileName}" field="linkIcon"
-                           checkUrl="${rootURL}/descriptorByName/hudson.plugins.sidebar_link.SidebarLinkPlugin/checkLinkIcon"
-                           checkDependsOn="" />
-            </f:entry>
-            <f:entry>
-                <f:repeatableDeleteButton/>
-            </f:entry>
-        </table>
+        <f:entry title="${%Link URL}" help="/plugin/sidebar-link/help-url.html">
+            <f:textbox name="urlName" value="${link.unprotectedUrlName}" field="linkUrl"
+                       checkUrl="${rootURL}/descriptorByName/hudson.plugins.sidebar_link.SidebarLinkPlugin/checkLinkUrl"
+                       checkDependsOn="" />
+        </f:entry>
+        <f:entry title="${%Link Text}">
+            <f:textbox name="displayName" value="${link.displayName}" field="linkText"
+                       checkUrl="${rootURL}/descriptorByName/hudson.plugins.sidebar_link.SidebarLinkPlugin/checkLinkText"
+                       checkDependsOn="" />
+        </f:entry>
+        <f:entry title="${%Link Icon}" help="/plugin/sidebar-link/help-icon.html">
+            <f:textbox name="iconFileName" value="${link.iconFileName}" field="linkIcon"
+                       checkUrl="${rootURL}/descriptorByName/hudson.plugins.sidebar_link.SidebarLinkPlugin/checkLinkIcon"
+                       checkDependsOn="" />
+        </f:entry>
+        <f:entry>
+            <f:repeatableDeleteButton/>
+        </f:entry>
     </f:repeatable>
 </j:jelly>

src/main/resources/hudson/plugins/sidebar_link/upload.js

@@ -0,0 +1,27 @@
+Behaviour.specify(".sidebar-link__file-upload", "sidebar-link-upload", 0, function(element) {
+    const button = element.querySelector('.sidebar-link__file-upload-button');
+    const noFileMessage = button.dataset.noFile;
+    button.onclick = async function() {
+        const fileField = element.querySelector('.sidebar-link__file-upload-input');
+        let formData = new FormData();
+        if (fileField.files.length == 0) {
+            notificationBar.show(noFileMessage, notificationBar.WARNING);
+        } else {
+            const url = button.getAttribute("data-url");
+            formData.append("linkimage.file", fileField.files[0]);
+            const result = await fetch(url, {
+                method: "POST",
+                headers: crumb.wrap({}),
+                body: formData
+            });
+            const text = await result.text();
+            if (result.ok) {
+                let success = {...notificationBar.SUCCESS};
+                success.sticky = true;
+                notificationBar.show(text, success);
+            } else {
+                notificationBar.show(text, notificationBar.ERROR);
+            }
+        }
+    }
+});