├── screenshot.png
├── .eslintrc
├── .travis.yml
├── LICENSE.txt
├── README.md
└── index.html


/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TOPdesk/nexus3-artifact-upload/HEAD/screenshot.png


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "airbnb",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "es6": true,
 6 |     "jquery": true
 7 |   },
 8 |   "plugins": [
 9 |     "html"
10 |   ],
11 |   "rules": {
12 |     "comma-dangle": ["error", "never"],
13 |     "no-param-reassign": ["error", { "props": false }],
14 |     "no-use-before-define": ["error", "nofunc"]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "7.10.0"
 4 | before_script:
 5 |   - npm install -g eslint@3.19.0 eslint-plugin-import@2.3.0 eslint-plugin-react@7.0.1 eslint-plugin-jsx-a11y@5.0.3 eslint-config-airbnb@15.0.1 eslint-plugin-html@2.0.3 html-validator-cli@3.1.0 css-validator@0.8.0
 6 | script:
 7 |   - html-validator --file=index.html --verbose
 8 |   - css-validator index.html
 9 |   - eslint index.html
10 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 TOPdesk
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nexus 3 Artifact Upload [![Build Status](https://travis-ci.org/TOPdesk/nexus3-artifact-upload.svg?branch=master)](https://travis-ci.org/TOPdesk/nexus3-artifact-upload)
 2 | > A drop-in solution for the missing artifact upload UI for [Sonatype Nexus 3 Repository](https://www.sonatype.com/nexus-repository-oss).
 3 | 
 4 | ![Screenshot](screenshot.png "Screenshot")
 5 | 
 6 | ## Table of Contents
 7 | - [Installation](#installation)
 8 | - [Usage](#usage)
 9 | - [Contributing](#contributing)
10 | - [Known issues](#known-issues)
11 | - [License](#license)
12 | 
13 | ## Installation
14 | Our goal was to make installation as easy as possible: you need to *host* the *index.html* file on your Nexus 3 installation in a raw repository, that has public access. Yes, that is all.
15 | 
16 | #### Example:
17 | - Consider having your Nexus 3 running at `https://nexus.mycompany.com/nexus` and a *raw* repository identified as `utils`
18 | - Grab the `index.html` and upload it with `curl` (or whatever you like):
19 |   ```bash
20 |   $ curl -u <user>:<password> \
21 |          --upload-file index.html \
22 |          https://nexus.mycompany.com/nexus/repository/utils/uploader
23 |   ```
24 |   Note that user and password should be an account that has write access to the `utils` repository.
25 | - Done
26 | 
27 | 
28 | ## Usage
29 | Visit `https://nexus.mycompany.com/nexus/repository/utils/uploader` and enjoy the integrated artifact uploader.
30 | You can pick a repository, browse (or drop) a file, fill in the details, and press the upload button.
31 | 
32 | ## Contributing
33 | By all means! If you have a fix or an improvement, pull requests are welcome. We are also happy to get any feedback.
34 | 
35 | ## Known issues
36 | - This is really a basic implementation, some useful features are missing. You can upload files with Maven's GAV style, or do raw uploads to any other repository (in this case you need to know the proper URL).
37 | - Input is not validated, it will try to upload with specified settings, and you will have a success, or an error based on what you did.
38 | - You can use the login feature of Nexus, but if you are not logged in, you will be promted for Basic Auth by the browser. That will work for upload, if your setup allows that.
39 | - The JavaScript code uses arrow functions, so it will not work with IE11, but you can experiment with Babel!
40 | 
41 | #### Browsers we tried
42 | 
43 | | Google Chrome 58.0 | Chromium 58.0 | Opera 45.0 | Microsoft Edge 38 | Mozilla Firefox 53.0 | Safari 10.1.1 | IE11 |
44 | | :----------------: | :-----------: | :--------: | :---------------: | :------------------: | :-----------: | :--: |
45 | | ✔                  | ✔             | ✔          | ✔ (weird looks)   | ✔ (visual glitches)  | ✔             | ✖    |
46 | 
47 | #### Checked Nexus 3 Versions
48 | - PRO 3.2.1-01
49 | - OSS 3.3.1-01
50 | 
51 | ## License
52 | <pre>MIT License
53 | 
54 | Copyright (c) 2017 TOPdesk
55 | 
56 | Permission is hereby granted, free of charge, to any person obtaining a copy
57 | of this software and associated documentation files (the "Software"), to deal
58 | in the Software without restriction, including without limitation the rights
59 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
60 | copies of the Software, and to permit persons to whom the Software is
61 | furnished to do so, subject to the following conditions:
62 | 
63 | The above copyright notice and this permission notice shall be included in all
64 | copies or substantial portions of the Software.
65 | 
66 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
67 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
68 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
69 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
70 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
71 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
72 | SOFTWARE.</pre>
73 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8"/>
  5 |     <!--
  6 |     Host this file in a raw repository on Nexus3 to have the missing Artifact Upload
  7 |     user interface.
  8 | 
  9 |     Visit https://github.com/TOPdesk/nexus3-artifact-upload for details.
 10 | 
 11 |     Copyright © 2017 TOPdesk
 12 | 
 13 |     Permission is hereby granted, free of charge, to any person obtaining a copy
 14 |     of this software and associated documentation files (the "Software"), to deal
 15 |     in the Software without restriction, including without limitation the rights
 16 |     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 17 |     copies of the Software, and to permit persons to whom the Software is
 18 |     furnished to do so, subject to the following conditions:
 19 | 
 20 |     The above copyright notice and this permission notice shall be included in all
 21 |     copies or substantial portions of the Software.
 22 | 
 23 |     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 24 |     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 25 |     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 26 |     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 27 |     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 28 |     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 29 |     SOFTWARE.
 30 |     -->
 31 |     <title>Upload File - Nexus Repository Manager</title>
 32 |     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 33 |     <style type="text/css">
 34 |       body, html {
 35 |         margin: 0;
 36 |         padding: 0;
 37 |         height: 100%;
 38 |         overflow: hidden;
 39 |       }
 40 |     </style>
 41 |     <style class="content" type="text/css">
 42 |       body {
 43 |         background-color: #f4f4f4;
 44 |       }
 45 |       main {
 46 |         background-color: #f4f4f4;
 47 |         color: #333;
 48 |         font-size: 13px;
 49 |         font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
 50 |         position: absolute;
 51 |         top: 0;
 52 |         left: 0;
 53 |         width: 100%;
 54 |         display: none;
 55 |       }
 56 |       main > header {
 57 |         padding: 10px 8px 36px 8px;
 58 |         background-color: #fff;
 59 |       }
 60 |       main > header div {
 61 |         display: inline-block;
 62 |         height: 32px
 63 |       }
 64 |       main > header img {
 65 |         vertical-align: top !important;
 66 |       }
 67 |       main > section {
 68 |           padding: 5px 8px 5px 8px;
 69 |           border-top: solid 1px #ddd;
 70 |           border-bottom: solid 1px #ddd;
 71 |       }
 72 |       main section > h1,
 73 |       main section > h2,
 74 |       main section > h3 {
 75 |         display: none;
 76 |       }
 77 |       main > section button {
 78 |         background-color: #f4f4f4;
 79 |         border: solid 1px transparent;
 80 |         color: #006bbf;
 81 |         outline: none;
 82 |         border-radius: 5px;
 83 |         padding: 5px 12px 5px 12px;
 84 |         cursor: pointer;
 85 |       }
 86 |       main > section button:hover {
 87 |         background-color: #ebebeb;
 88 |         border: solid 1px #ddd;
 89 |       }
 90 |       main > section button.selected {
 91 |         background-color: #fff !important;
 92 |         border: solid 1px #fff !important;
 93 |         color: #333 !important;
 94 |       }
 95 |       main > div.content {
 96 |         padding: 12px;
 97 |         margin: 12px;
 98 |         background-color: #fff;
 99 |         display: inline-block;
100 |         border: solid 1px #ddd;
101 |       }
102 |       main > div.content section {
103 |         margin: 4px 0 4px 0;
104 |       }
105 |       main > div.content label {
106 |         font-weight: bold;
107 |       }
108 |       main .drop-target {
109 |         margin: 0 0 8px 0;
110 |         padding: 0 1em 0 1em;
111 |         display: inline-block;
112 |         color: #2476c3;
113 |         border: 3px dashed #2476c3;
114 |         min-width: 350px;
115 |         text-align: center;
116 |       }
117 |       main .drop-target input,
118 |       main .drop-target label {
119 |         display: none;
120 |       }
121 |       main .drop-target h1 {
122 |         cursor: pointer;
123 |         margin-bottom: 5px;
124 |       }
125 |       main .drop-target span {
126 |         max-width: 300px;
127 |         text-overflow: ellipsis;
128 |         margin-bottom: 5px;
129 |         display: inline-block;
130 |       }
131 |       main input,
132 |       main button,
133 |       main select {
134 |         font-size: 13px;
135 |       }
136 |       main input[type=text] {
137 |         box-sizing: border-box;
138 |         min-width: 300px;
139 |         min-height: 24px;
140 |         margin: 4px 0 4px 0;
141 |       }
142 |       main select {
143 |         box-sizing: border-box;
144 |         min-width: 300px;
145 |         min-height: 24px;
146 |         margin: 4px 0 0 0;
147 |       }
148 |       main section.upload-format header {
149 |         display: none;
150 |       }
151 |       main label {
152 |         min-width: 80px;
153 |         display: inline-block;
154 |       }
155 |       main section.upload-progress {
156 |         height: 21px;
157 |         width: 381px;
158 |         border: solid 1px silver;
159 |         overflow: hidden;
160 |         display: none;
161 |       }
162 |       main section.upload-progress div {
163 |         width: 0;
164 |         border: 0;
165 |         height: 21px;
166 |         background-color: #2476c3;
167 |       }
168 |       main section:last-child {
169 |         text-align: center;
170 |         margin-bottom: 0;
171 |       }
172 |     </style>
173 |     <script>
174 |       $(() => {
175 |         const baseUrl = location.href.substring(0, location.href.indexOf('/repository/'));
176 |         $('head').append(`<link rel="shortcut icon" type="image/x-icon" href="${baseUrl}/favicon.ico"/>`);
177 |         createNexusWrapper();
178 | 
179 |         // Initializes an iframe with Nexus3 Welcome page context, and adds an
180 |         // iframe to it pointing to this html page.
181 |         //
182 |         // The second iframe is necessary to avoid certain errors caused by
183 |         // Nexus3 JavaScript - like non-working backspace button in inputs.
184 |         function createNexusWrapper() {
185 |           if (window.location.hash === '#!content') {
186 |             initializeUploaderContent($(document).contents());
187 |           } else {
188 |             $(`<iframe width="100%" height="100%" frameborder="0" src="${baseUrl}"/>`)
189 |               .appendTo(document.body)
190 |               .on('load', (event) => {
191 |                 const nexusFrame = $(event.target);
192 |                 const nexusWindow = nexusFrame.prop('contentWindow');
193 | 
194 |                 // When navigating to other parts of nexus, the main window should be used
195 |                 nexusWindow.addEventListener('hashchange', e => (window.location = e.newURL));
196 | 
197 |                 // When Nexus3 has been loaded to the iframe, delete all other
198 |                 // content, and add an iframe into the Nexus3 frame to load this
199 |                 // page again with "content" hashbang.
200 |                 waitForNexus().then((content) => {
201 |                   $('main').remove();
202 |                   $('head style.content').remove();
203 | 
204 |                   const target = `${window.location.href.replace(window.location.hash, '')}#!content`;
205 |                   const uploaderFrame = $(`<iframe style="position:absolute;z-index:10000;top:0;left:0;background-color:white" width="100%" height="100%" frameborder="0" src="${target}"/>`);
206 |                   uploaderFrame.appendTo(content)
207 |                     .on('error', () => {
208 |                       // On Firefox the iframe throws an error, and points to
209 |                       // about:blank instead of the src.
210 |                       const frameLocation = uploaderFrame.prop('contentWindow').location;
211 |                       if (frameLocation.href !== target) {
212 |                         frameLocation.href = target;
213 |                       }
214 |                     })
215 |                     .on('load', () => {
216 |                       // Add CSS styles and reference to NX to embedded page to
217 |                       // provide a "native" look and feel for integrated content
218 |                       const nexusStyles = nexusFrame.contents().find('head style, head link[rel="stylesheet"]');
219 |                       uploaderFrame.contents().find('head').append(nexusStyles.clone());
220 |                       uploaderFrame.prop('contentWindow').NX = nexusWindow.NX;
221 |                     });
222 |                 });
223 | 
224 |                 function waitForNexus() {
225 |                   return new Promise((resolve) => {
226 |                     const waitForContent = () => {
227 |                       const content = nexusFrame.contents().find('.nx-feature-content');
228 |                       if (content.length > 0) {
229 |                         resolve(content);
230 |                       } else {
231 |                         setTimeout(waitForContent, 200);
232 |                       }
233 |                     };
234 |                     waitForContent();
235 |                   });
236 |                 }
237 |               });
238 |           }
239 |         }
240 | 
241 |         /*
242 |          * Initializes the Artifact Upload controls.
243 |          */
244 |         function initializeUploaderContent(context) {
245 |           const targetUrl = $('input[name=url]', context);
246 |           const uploadButton = $('button[name=upload]', context);
247 |           const artifactIdInput = $('input[name=artifactId]', context);
248 |           const versionInput = $('input[name=version]', context);
249 |           const classifierInput = $('input[name=classifier]', context);
250 |           const extensionInput = $('input[name=extension]', context);
251 |           const repositoryInput = $('input[name=repository]', context);
252 |           const repositoryDropdown = $('select[name=repository-list]', context);
253 |           const rawPathInput = $('input[name=path]', context);
254 |           let fileToUpload = null;
255 | 
256 |           addEventHandlers();
257 |           populateRepositoriesCombo();
258 |           // The timeout is needed for Firefox to show content after it's been
259 |           // layed out properly
260 |           setTimeout(() => $('main', context).css('display', 'block'), 100);
261 | 
262 | 
263 |           function addEventHandlers() {
264 |             const fileInput = $('input[type=file]', context);
265 |             const formatRadios = $('input[type=radio][name=format]', context);
266 |             const gavRadio = $('input[type=radio][value=gav]', context);
267 |             const rawRadio = $('input[type=radio][value=raw]', context);
268 |             const dropTarget = $('.drop-target', context);
269 |             const textInputs = $('input[type=text]', context);
270 |             const uploadFormatButtons = $('main > section button', context);
271 | 
272 |             textInputs.on('input', updateTargetUrl);
273 | 
274 |             formatRadios.on('change', () => {
275 |               $('section#gav div, section#raw div').css('display', 'none');
276 |               $('section#gav div, section#raw div').css('display', 'none');
277 |               uploadFormatButtons.removeClass('selected');
278 |               switch (formatRadios.filter(':checked').val()) {
279 |                 case 'gav':
280 |                   $('section#gav div').css('display', 'block');
281 |                   uploadFormatButtons.filter('[name=gav-toggle]').addClass('selected');
282 |                   break;
283 |                 case 'raw':
284 |                 default:
285 |                   $('section#raw div').css('display', 'block');
286 |                   uploadFormatButtons.filter('[name=raw-toggle]').addClass('selected');
287 |                   break;
288 |               }
289 |               updateTargetUrl();
290 |             });
291 | 
292 |             fileInput.on('change', () => setFileToUpload(fileInput.get(0).files[0]));
293 |             fileInput.on('click', event => event.stopPropagation());
294 | 
295 |             targetUrl.on('change', () => uploadButton.prop('disabled', !fileToUpload));
296 | 
297 |             uploadFormatButtons.on('click', (event) => {
298 |               const format = $(event.target).prop('name').split('-')[0];
299 |               formatRadios.filter(`[value=${format}]`).prop('checked', true);
300 |               formatRadios.change();
301 |             });
302 | 
303 |             repositoryDropdown.on('change', () => {
304 |               repositoryInput.val(repositoryDropdown.val());
305 |               if (repositoryDropdown.find(':selected').data('format') === 'maven2') {
306 |                 gavRadio.prop('checked', true);
307 |               } else {
308 |                 rawRadio.prop('checked', true);
309 |               }
310 |               formatRadios.change();
311 |               updateTargetUrl();
312 |             });
313 | 
314 |             dropTarget.on('dragenter dragover', () => false);
315 |             dropTarget.on('drop', (event) => {
316 |               setFileToUpload(event.originalEvent.dataTransfer.files[0]);
317 |               return false;
318 |             });
319 |             dropTarget.on('click', () => fileInput.click() && false);
320 | 
321 |             uploadButton.on('click', () => uploadFile(fileToUpload, targetUrl.val()) && false);
322 |           }
323 | 
324 |           function populateRepositoriesCombo() {
325 |             $.ajax({
326 |               url: `${baseUrl}/service/extdirect`,
327 |               type: 'POST',
328 |               data: '{"action":"coreui_Repository","method":"readReferences","data":[{"page":1,"start":0,"limit":100,"filter":[{"property":"applyPermissions","value":false}]}],"type":"rpc","tid":0}',
329 |               contentType: 'application/json',
330 |               success: (data) => {
331 |                 repositoryDropdown.empty();
332 |                 repositoryInput.css('display', 'none');
333 |                 repositoryDropdown.css('display', 'inline-block');
334 |                 data.result.data.forEach((item) => {
335 |                   if (item.type === 'hosted') {
336 |                     repositoryDropdown.append(`<option value="${item.id}" data-format="${item.format}">${item.name}</option>`);
337 |                   }
338 |                 });
339 |                 repositoryDropdown.change();
340 |               },
341 |               error: () => {
342 |                 repositoryDropdown.empty();
343 |                 repositoryDropdown.css('display', 'none');
344 |                 repositoryInput.css('display', 'inline-block');
345 |                 if (window.NX) {
346 |                   window.NX.Messages.warning('Could not get Repositories');
347 |                 } else {
348 |                   console.warn('Could not get Repositories'); // eslint-disable-line no-console
349 |                 }
350 |               },
351 |               complete: updateTargetUrl
352 |             });
353 |           }
354 | 
355 |           function setFileToUpload(file) {
356 |             const selectedFileNameSpan = $('.drop-target span', context);
357 |             const fileName = file ? file.name : '';
358 |             fileToUpload = file;
359 |             selectedFileNameSpan.html(file ? file.name : 'No file selected');
360 |             const matchGroup = fileName.match(/^(.+)-(\d([^-]+(-SNAPSHOT)?))?(-(.+))?\.(.+)$/);
361 |             if (matchGroup) {
362 |               artifactIdInput.val(matchGroup[1]).focus();
363 |               versionInput.val(matchGroup[2]).focus();
364 |               classifierInput.val(matchGroup[6]).focus();
365 |               extensionInput.val(matchGroup[7]).focus();
366 |             } else {
367 |               const lastDot = fileName.lastIndexOf('.');
368 |               artifactIdInput.val(fileName.substring(0, lastDot)).focus();
369 |               versionInput.val('').focus();
370 |               classifierInput.val('').focus();
371 |               extensionInput.val(fileName.substring(lastDot + 1)).focus();
372 |             }
373 |             rawPathInput.val(fileName).focus();
374 |             return updateTargetUrl();
375 |           }
376 | 
377 |           function updateTargetUrl() {
378 |             const uploadType = $('input[type=radio]:checked', context).val();
379 |             const repository = repositoryInput.val();
380 |             const uploadBaseUrl = `${baseUrl}/repository/${repository}`;
381 |             let path;
382 |             switch (uploadType) {
383 |               case 'gav':
384 |                 path = getTargetPathFromGAV();
385 |                 break;
386 |               case 'raw':
387 |               default:
388 |                 path = rawPathInput.val();
389 |                 break;
390 |             }
391 |             targetUrl.val(`${uploadBaseUrl}/${path}`);
392 |             targetUrl.trigger('change');
393 |             return true;
394 |           }
395 | 
396 |           function getTargetPathFromGAV() {
397 |             const groupIdInput = $('input[name=groupId]', context);
398 |             const groupId = groupIdInput.val().split('.').join('/');
399 |             const artifactId = artifactIdInput.val();
400 |             const version = versionInput.val();
401 |             const classifier = classifierInput.val();
402 |             const extension = extensionInput.val();
403 |             const file = `${artifactId}-${version}${classifier ? `-${classifier}` : ''}.${extension}`;
404 |             return `${groupId}/${artifactId}/${version}/${file}`;
405 |           }
406 | 
407 |           function uploadFile(file, target) {
408 |             const progress = $('main section.upload-progress', context);
409 |             const progressBar = progress.find('div');
410 | 
411 |             uploadButton.css('display', 'none');
412 |             const reader = new FileReader();
413 |             reader.onload = () => {
414 |               $.ajax({
415 |                 url: target,
416 |                 type: 'PUT',
417 |                 contentType: file.type,
418 |                 data: new DataView(reader.result),
419 |                 processData: false,
420 |                 xhr: () => {
421 |                   const xhr = new window.XMLHttpRequest();
422 |                   xhr.upload.addEventListener('progress', (event) => {
423 |                     if (event.lengthComputable) {
424 |                       progressBar.css('width', `${(event.loaded / event.total) * 100}%`);
425 |                       progress.css('display', 'block');
426 |                     }
427 |                   }, false);
428 |                   return xhr;
429 |                 },
430 |                 success: () => {
431 |                   if (window.NX) {
432 |                     window.NX.Messages.success('Upload successful');
433 |                   } else {
434 |                     console.log('Upload successful'); // eslint-disable-line no-console
435 |                   }
436 |                 },
437 |                 error: (xhr, ajaxOptions, error) => {
438 |                   if (window.NX) {
439 |                     window.NX.Messages.error(error);
440 |                   } else {
441 |                     console.error(error); // eslint-disable-line no-console
442 |                   }
443 |                 },
444 |                 complete: () => {
445 |                   progress.css('display', 'none');
446 |                   uploadButton.css('display', 'inline-block');
447 |                 }
448 |               });
449 |             };
450 |             reader.readAsArrayBuffer(file);
451 |           }
452 |         }
453 |       });
454 |     </script>
455 |   </head>
456 |   <body>
457 |     <main>
458 |       <header>
459 |         <img class="x-header-icon nx-icon-feature-browse-browse-components-x32" alt="Upload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
460 |         <div>
461 |           <span class="nx-feature-name">Upload Artifact</span>
462 |           <span class="nx-feature-description">Upload a file from your computer to a repository</span>
463 |         </div>
464 |       </header>
465 |       <section title="Upload format">
466 |         <h1>Upload format</h1>
467 |         <button name="gav-toggle">GAV (Maven)</button>
468 |         <button name="raw-toggle">Raw</button>
469 |       </section>
470 |       <div class="content">
471 |         <section title="File to upload">
472 |           <h2>File to upload</h2>
473 |           <div class="drop-target">
474 |             <h1>Drop a file or click here</h1>
475 |             <span>No file selected</span>
476 |             <label for="file">File to upload</label>
477 |             <input id="file" name="file" type="file"/>
478 |           </div>
479 |         </section>
480 |         <section title="Target Repository">
481 |           <h2>Target Repository</h2>
482 |           <label for="repository">Repository</label>
483 |           <input id="repository" name="repository" type="text" class="x-form-text" placeholder="repository"/>
484 |           <select name="repository-list"></select>
485 |         </section>
486 |         <section id="gav" title="Maven GAV Upload" class="upload-format">
487 |           <h3>Maven GAV Upload</h3>
488 |           <header>
489 |             <input id="gav-format" name="format" type="radio" value="gav"/>
490 |             <label for="gav-format">Maven GAV Upload</label>
491 |           </header>
492 |           <div>
493 |             <label for="gav-groupId">GroupId</label>
494 |             <input id="gav-groupId" name="groupId" type="text" class="x-form-field x-form-text" placeholder="groupId"/>
495 |             <br/>
496 |             <label for="gav-artifactId">ArtifactId</label>
497 |             <input id="gav-artifactId" name="artifactId" type="text" class="x-form-text" placeholder="artifactId"/>
498 |             <br/>
499 |             <label for="gav-version">Version</label>
500 |             <input id="gav-version" name="version" type="text" class="x-form-text" placeholder="version"/>
501 |             <br/>
502 |             <label for="gav-classifier">Classifier</label>
503 |             <input id="gav-classifier" name="classifier" type="text" class="x-form-text" placeholder="classifier"/>
504 |             <br/>
505 |             <label for="gav-extension">Extension</label>
506 |             <input id="gav-extension" name="extension" type="text" class="x-form-text" placeholder="extension"/>
507 |           </div>
508 |         </section>
509 |         <section id="raw" title="Raw file upload" class="upload-format">
510 |           <h3>Raw file upload</h3>
511 |           <header>
512 |             <input id="raw-format" name="format" type="radio" value="raw"/>
513 |             <label for="raw-format">Raw Upload</label>
514 |           </header>
515 |           <div>
516 |             <label for="raw-path">Raw path</label>
517 |             <input id="raw-path" name="path" type="text" class="x-form-text" placeholder="path"/>
518 |           </div>
519 |         </section>
520 |         <section title="Upload progress" class="upload-progress">
521 |           <h2>Upload progress</h2>
522 |           <input name="url" type="hidden" disabled/>
523 |         </section>
524 |         <section title="Upload">
525 |           <h2>Upload</h2>
526 |           <button name="upload" disabled>Upload</button>
527 |         </section>
528 |       </div>
529 |     </main>
530 |   </body>
531 | </html>
532 | 


--------------------------------------------------------------------------------