stable

Clone or download

Read-only

File upload with Node streams

Part of request #11719 File upload with the artifact modal freezes the browser This adresses the problem of browser freezing just after choosing a file in the artifact modal. To unfreeze the browser, a few steps are needed: - Remove the broken angular-base64-upload component. As soon as a file was chosen, it tried to load it in memory all at once and then encode it into base64. As you can imagine, on bigger files (say 300MB) this would cause the browser to freeze and sometimes crash outright. - Reimplement a small directive to bind to ng-model. Somehow this isn't provided by AngularJS :/ - Reimplement file reading, encoding and uploading with streams [1]. - Rework error handling to show a relevant, localized error message instead of HTTP code and messages that do not help. How to test: - Edit an existing artifact with a file field, attach files to it and submit. Upon submit, the file should be send as many fetch() requests to temporary files and then be attached to the artifact. - Try with a file size below 1MB (chunk size) - Try with a file size above 1MB (multiple chunks) - Try with a file size above your quota (defined in local.inc). An error message should be shown. (See below notes). The quota progress bar should be filled up. - Try with multiple files in a single field (With the "Add another file" button) - Try with empty file inputs (where you click "Add another file" but don't choose anything or choose a file and hit "Reset"). Empty inputs should be silently ignored. - Try with two file fields - Submit a new artifact with files - Check that it works on Chrome, Firefox and IE11 - Check that it works in Planning, Kanban and TTM Note: Warning the user that they're about to upload a file that is bigger than their allowed quota will come in a later patch. For now, it tries to upload anyway, fills the quota and then shows an error message. Note: I know, I reduced test coverage, but I think unit testing streams can come later. [1]: https://nodejs.org/api/stream.html Note: I first attempted to use WHATWG streams [2][3], but the available polyfills did not function with IE11. Besides it is maybe too cutting-edge yet :p [2]: https://streams.spec.whatwg.org/ [3]: https://gerrit.tuleap.net/#/c/tuleap/+/11832/ Change-Id: I49ca8341ec88c01245079d9747188c54e189ed0e

Modified Files

Name
M plugins/agiledashboard/www/js/kanban/package-lock.json +5 −0 Go to diff View file
M plugins/agiledashboard/www/js/kanban/package.json +2 −1 Go to diff View file
M plugins/agiledashboard/www/js/kanban/webpack.config.js +33 −31 Go to diff View file
M plugins/agiledashboard/www/js/planning-v2/package-lock.json +5 −0 Go to diff View file
M plugins/agiledashboard/www/js/planning-v2/package.json +2 −1 Go to diff View file
M plugins/agiledashboard/www/js/planning-v2/webpack.config.js +25 −15 Go to diff View file
M plugins/tracker/www/scripts/angular-artifact-modal/po/fr.po +27 −2 Go to diff View file
M plugins/tracker/www/scripts/angular-artifact-modal/po/template.pot +12 −0 Go to diff View file
M plugins/tracker/www/scripts/angular-artifact-modal/src/index.spec.js +0 −1 Go to diff View file
M plugins/tracker/www/scripts/angular-artifact-modal/src/rest/rest-service.js +24 −32 Go to diff View file
M plugins/tracker/www/scripts/angular-artifact-modal/src/rest/rest-service.spec.js +21 −87 Go to diff View file
M plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-controller.js +85 −41 Go to diff View file
M plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-controller.spec.js +15 −17 Go to diff View file
A plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-fields/file-field/base64-transform.js +38 −0 Go to diff View file
M plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-fields/file-field/file-field-controller.js +10 −24 Go to diff View file
M plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-fields/file-field/file-field-controller.spec.js +0 −19 Go to diff View file
M plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-fields/file-field/file-field.js +9 −15 Go to diff View file
M plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-fields/file-field/file-field.tpl.html +1 −2 Go to diff View file
A plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-fields/file-field/file-input-directive.js +14 −0 Go to diff View file
D plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-fields/file-field/file-upload-service.js +0 −77 Go to diff View file
D plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-fields/file-field/file-upload-service.spec.js +0 −176 Go to diff View file
A plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-fields/file-field/file-uploader.js +78 −0 Go to diff View file
A plugins/tracker/www/scripts/angular-artifact-modal/src/tuleap-artifact-modal-fields/file-field/streaming-file-reader.js +73 −0 Go to diff View file
M plugins/tracker/www/scripts/package-lock.json +48 −34 Go to diff View file
M plugins/tracker/www/scripts/package.json +3 −2 Go to diff View file
M tools/utils/scripts/webpack-aliases.js +6 −1 Go to diff View file