JI-6488 handle av file upload error (#275)

* JI-6488 handle av file upload error

* JI-6488 fix error selection

* JI-6488 select boxEl from many

Author: devland

scripts/h5peditor-av.js

@@ -43,7 +43,6 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
       self.replaceCallback();
     });
 
-
     self.on('upload', function () {
       // Insert throbber
       self.$uploading = $('<div class="h5peditor-uploading h5p-throbber">' + H5PEditor.t('core', 'uploading') + '</div>').insertAfter(self.$add.hide());
@@ -67,7 +66,8 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
       const updateId = event.data?.updateId ?? undefined;
       this.updateId = updateId;
       const boxesEl = Array.from(self.$dndFiles.get(0).querySelectorAll('.h5p-dnd__videobox-wrapper:not(.h5p-dnd__videobox-wrapper--is-provider)'));
-      let boxEl;
+      const boxEls = self.$dndFiles.get(0).querySelectorAll('.h5p-dnd__box');
+      let boxEl = boxEls[boxEls.length - 1];
 
       try {
         if (result.error) {
@@ -124,7 +124,7 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
         errorEls.forEach(errorEl => errorEl.classList.remove('has-error'));
       }
       catch (error) {
-        self.setErrorMessage(result.error, boxEl);
+        self.setErrorMessage(error.message || error, boxEl);
       }
 
       if (self.$uploading !== undefined && self.$uploading.length !== 0) {
@@ -1022,6 +1022,12 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
                   <div class="h5p-loader__icon"></div>
                 </div>
               </div>
+              <div class="h5p-dnd__row">
+                <div id="errorContainer" class="video-url-error-container hidden">
+                  <div class="h5p-errors"></div>
+                </div>
+              </div>
+              <div class="h5p-sr-only" aria-live="polite"></div>
             </div>
           </div>
         `;
@@ -1049,6 +1055,7 @@ H5PEditor.widgets.video = H5PEditor.widgets.audio = H5PEditor.AV = (function ($)
                     </div>
                   </div>
                 `: ''}
+                <div class="h5p-sr-only" aria-live="polite"></div>
               </div>
             </div>
           `;