Add a fallback function to crypto.randomUUID (#14371)

src/OrchardCore.Modules/OrchardCore.Media/Assets.json

@@ -11,7 +11,12 @@
     "inputs": [
       "./node_modules/blueimp-file-upload/js/jquery.fileupload.js",
       "./node_modules/blueimp-file-upload/js/jquery.iframe-transport.js",
-      "Assets/js/**/*.js"
+      "Assets/js/helpers.js",
+      "Assets/js/app/**/*.js"
+    ],
+    "watch": [
+      "Assets/js/helpers.js",
+      "Assets/js/app/**/*.js"
     ],
     "output": "wwwroot/Scripts/media.js"
   }

src/OrchardCore.Modules/OrchardCore.Media/Assets/js/MediaApp/fileupload.js → src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/fileupload.js

 $(document).on('mediaApp:ready', function () {
-    var chunkedFileUploadId = crypto.randomUUID();
+    var chunkedFileUploadId = randomUUID();
 
     $('#fileupload')
         .fileupload({
@@ -54,5 +54,5 @@ $(document).bind('dragover', function (e) {
             window.dropZoneTimeout = null;
             dropZone.removeClass('in');
         }, 100);
-    }    
-});
\ No newline at end of file
+    }
+});

src/OrchardCore.Modules/OrchardCore.Media/Assets/js/MediaField/attachedMediaField.js → src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaField/attachedMediaField.js

@@ -129,7 +129,7 @@ function initializeAttachedMediaField(el, idOfUploadButton, uploadAction, mediaI
 
             var selector = '#' + idOfUploadButton;
             var editorId = mediaFieldEditor.attr('id');
-            var chunkedFileUploadId = crypto.randomUUID();
+            var chunkedFileUploadId = randomUUID();
 
             $(selector)
                 .fileupload({
@@ -160,7 +160,7 @@ function initializeAttachedMediaField(el, idOfUploadButton, uploadAction, mediaI
                     done: function (e, data) {
                         var newMediaItems = [];
                         var errormsg = "";
-                    
+
                         if (data.result.files.length > 0) {
                             for (var i = 0; i < data.result.files.length; i++) {
                                 data.result.files[i].isNew = true;
@@ -173,7 +173,7 @@ function initializeAttachedMediaField(el, idOfUploadButton, uploadAction, mediaI
                                     errormsg += data.result.files[i].error + "\n";
                             }
                         }
-                    
+
                         if (errormsg !== "") {
                             alert(errormsg);
                             return;
@@ -247,29 +247,29 @@ function initializeAttachedMediaField(el, idOfUploadButton, uploadAction, mediaI
             cancelMediaTextModal: function (event) {
                 this.mediaTextModal.hide();
                 this.selectedMedia.mediaText = this.backupMediaText;
-            }, 
+            },
             showAnchorModal: function (event) {
                 this.anchoringModal = new bootstrap.Modal(this.$refs.anchoringModal);
                 this.anchoringModal.show();
                 // Cause a refresh to recalc heights.
                 this.selectedMedia.anchor = {
-                  x: this.selectedMedia.anchor.x,
-                  y: this.selectedMedia.anchor.y
+                    x: this.selectedMedia.anchor.x,
+                    y: this.selectedMedia.anchor.y
                 }
                 this.backupAnchor = this.selectedMedia.anchor;
-            },           
+            },
             cancelAnchoringModal: function (event) {
                 this.anchoringModal.hide();
                 this.selectedMedia.anchor = this.backupAnchor;
-            },            
+            },
             resetAnchor: function (event) {
                 this.selectedMedia.anchor = { x: 0.5, y: 0.5 };
-            }, 
-            onAnchorDrop: function(event) {
+            },
+            onAnchorDrop: function (event) {
                 var image = this.$refs.anchorImage;
                 this.selectedMedia.anchor = {
-                   x: event.offsetX / image.clientWidth,
-                   y: event.offsetY / image.clientHeight
+                    x: event.offsetX / image.clientWidth,
+                    y: event.offsetY / image.clientHeight
                 }
             },
             anchorLeft: function () {
@@ -286,7 +286,7 @@ function initializeAttachedMediaField(el, idOfUploadButton, uploadAction, mediaI
                 } else {
                     return '0';
                 }
-            },           
+            },
             anchorTop: function () {
                 if (this.$refs.anchorImage && this.selectedMedia) {
                     var position = this.selectedMedia.anchor.y * this.$refs.anchorImage.clientHeight;
@@ -306,7 +306,7 @@ function initializeAttachedMediaField(el, idOfUploadButton, uploadAction, mediaI
                     x: event.offsetX / image.clientWidth,
                     y: event.offsetY / image.clientHeight
                 }
-            },         
+            },
             addMediaFiles: function (files) {
                 if ((files.length > 1) && (allowMultiple === false)) {
                     alert($('#onlyOneItemMessage').val());
@@ -330,11 +330,11 @@ function initializeAttachedMediaField(el, idOfUploadButton, uploadAction, mediaI
         watch: {
             mediaItems: {
                 deep: true,
-                handler () {
+                handler() {
                     // Trigger preview rendering
                     setTimeout(function () { $(document).trigger('contentpreview:render'); }, 100);
                 }
-            }, 
+            },
             currentPrefs: function (newPrefs) {
                 localStorage.setItem('mediaFieldPrefs', JSON.stringify(newPrefs));
             }

src/OrchardCore.Modules/OrchardCore.Media/Assets/js/Shared/uploadListComponent.js → src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/Shared/uploadListComponent.js

@@ -50,10 +50,10 @@ Vue.component('uploadList', {
         var self = this;
         var uploadInput = document.getElementById(self.uploadInputId ?? 'fileupload');
         $(uploadInput).bind('fileuploadadd', function (e, data) {
-            if (!data.files) { 
+            if (!data.files) {
                 return;
             }
-            data.files.forEach(function (newFile) {                
+            data.files.forEach(function (newFile) {
                 var alreadyInList = self.files.some(function (f) {
                     return f.name == newFile.name;
                 });
@@ -62,8 +62,8 @@ Vue.component('uploadList', {
                     self.files.push({ name: newFile.name, percentage: 0, errorMessage: '' });
                 } else {
                     console.error('A file with the same name is already on the queue:' + newFile.name);
-                }         
-            });            
+                }
+            });
         });
 
         bus.$on('removalRequest', function (fileUpload) {
@@ -88,7 +88,7 @@ Vue.component('uploadList', {
                 this.expanded = false;
             }
         },
-        clearErrors: function () {            
+        clearErrors: function () {
             this.files = this.files.filter(function (item) {
                 return item.errorMessage == '';
             });

src/OrchardCore.Modules/OrchardCore.Media/Assets/js/helpers.js

+function randomUUID() {
+    if (typeof crypto === 'object' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+
+    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+    );
+}