DGNum/demarches-normaliennes
13
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

js: ignore missing DOM element on ProgressBar

Browse source 
Currently ProgressBar is used to monitor upload progress of attachments.

But there's two cases where the associated DOM element may be removed:

- In the champs editor, when the list scrolls, DOM elements are removed
and added dynamically by React;
- In the user form, the user might start an upload on a repetition, and
then remove the associated row during the download.

In both those cases, we don't want the missing DOM element to trigger
an error.
This commit is contained in:
Pierre de La Morinerie 2020-09-03 12:52:42 +00:00
parent 1084b1d47c
commit e033ec3404
1 changed files with 19 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/javascript/shared/activestorage/progress-bar.js
View file

@ -7,6 +7,12 @@ const COMPLETE_CLASS = 'direct-upload--complete';
rendering upload progress bar. It is used to handle rendering upload progress bar. It is used to handle
direct-upload form ujs events but also in the direct-upload form ujs events but also in the
Uploader delegate used with uploads on json api. Uploader delegate used with uploads on json api.
As the associated DOM element may disappear for some
reason (a dynamic React list, an element being removed
and recreated again later, etc.), this class doesn't
raise any error if the associated DOM element cannot
be found.
*/ */
export default class ProgressBar { export default class ProgressBar {
static init(input, id, file) { static init(input, id, file) {
@ -17,27 +23,31 @@ export default class ProgressBar {
static start(id) { static start(id) {
const element = getDirectUploadElement(id); const element = getDirectUploadElement(id);
if (element) {
element.classList.remove(PENDING_CLASS); element.classList.remove(PENDING_CLASS);
}
} }
static progress(id, progress) { static progress(id, progress) {
const element = getDirectUploadProgressElement(id); const element = getDirectUploadProgressElement(id);
if (element) {
element.style.width = `${progress}%`; element.style.width = `${progress}%`;
}
} }
static error(id, error) { static error(id, error) {
const element = getDirectUploadElement(id); const element = getDirectUploadElement(id);
if (element) {
element.classList.add(ERROR_CLASS); element.classList.add(ERROR_CLASS);
element.setAttribute('title', error); element.setAttribute('title', error);
}
} }
static end(id) { static end(id) {
const element = getDirectUploadElement(id); const element = getDirectUploadElement(id);
if (element) {
element.classList.add(COMPLETE_CLASS); element.classList.add(COMPLETE_CLASS);
}
} }
static render(id, filename) { static render(id, filename) {