Security: Enable CSP check in JS for FileUploader/Validation demo (#32863)

Co-authored-by: Ruslan Farkhutdinov <ruslan.farkhutdinov@devexpress.com>

Author: Ruslan Farkhutdinov

apps/demos/Demos/FileUploader/Validation/Angular/app/app.component.css

@@ -3,6 +3,10 @@
   float: left;
 }
 
+::ng-deep .file-uploader-block + .file-uploader-block {
+  float: right;
+}
+
 ::ng-deep .note {
   font-size: 10pt;
   color: var(--dx-texteditor-color-label);

apps/demos/Demos/FileUploader/Validation/Angular/app/app.component.html

@@ -11,7 +11,7 @@
       >Allowed file extensions: <span>.jpg, .jpeg, .gif, .png</span>.</span
     >
   </div>
-  <div class="file-uploader-block" style="float: right">
+  <div class="file-uploader-block">
     <dx-file-uploader
       [multiple]="true"
       uploadMode="useButtons"

apps/demos/Demos/FileUploader/Validation/React/App.tsx

@@ -15,7 +15,7 @@ export default function App() {
           .
         </span>
       </div>
-      <div className="file-uploader-block" style={{ float: 'right' }}>
+      <div className="file-uploader-block">
         <FileUploader multiple={true} uploadMode="useButtons" uploadUrl="https://js.devexpress.com/Demos/NetCore/FileUploader/Upload" maxFileSize={MAX_UPLOAD_FILE_SIZE} />
         <span className="note">{'Maximum file size: '}
           <span>4 MB</span>

apps/demos/Demos/FileUploader/Validation/React/styles.css

@@ -3,6 +3,10 @@
   float: left;
 }
 
+.file-uploader-block + .file-uploader-block {
+  float: right;
+}
+
 .note {
   font-size: 10pt;
   color: var(--dx-texteditor-color-label);

apps/demos/Demos/FileUploader/Validation/ReactJs/App.js

@@ -18,10 +18,7 @@ export default function App() {
           <span>.jpg, .jpeg, .gif, .png</span>.
         </span>
       </div>
-      <div
-        className="file-uploader-block"
-        style={{ float: 'right' }}
-      >
+      <div className="file-uploader-block">
         <FileUploader
           multiple={true}
           uploadMode="useButtons"

apps/demos/Demos/FileUploader/Validation/ReactJs/styles.css

@@ -3,6 +3,10 @@
   float: left;
 }
 
+.file-uploader-block + .file-uploader-block {
+  float: right;
+}
+
 .note {
   font-size: 10pt;
   color: var(--dx-texteditor-color-label);

apps/demos/Demos/FileUploader/Validation/Vue/App.vue

@@ -12,10 +12,7 @@
         <span>.jpg, .jpeg, .gif, .png</span>.
       </span>
     </div>
-    <div
-      class="file-uploader-block"
-      style="float: right;"
-    >
+    <div class="file-uploader-block">
       <DxFileUploader
         :multiple="true"
         :max-file-size="4000000"
@@ -38,6 +35,10 @@ import DxFileUploader from 'devextreme-vue/file-uploader';
   float: left;
 }
 
+.file-uploader-block + .file-uploader-block {
+  float: right;
+}
+
 .note {
   font-size: 10pt;
   color: var(--dx-texteditor-color-label);

apps/demos/Demos/FileUploader/Validation/jQuery/index.html

@@ -19,7 +19,7 @@
           <div id="file-uploader-images"></div>
           <span class="note">Allowed file extensions: <span>.jpg, .jpeg, .gif, .png</span>.</span>
         </div>
-        <div class="file-uploader-block" style="float: right">
+        <div class="file-uploader-block">
           <div id="file-uploader-max-size"></div>
           <span class="note">Maximum file size: <span>4 MB</span>.</span>
         </div>

apps/demos/Demos/FileUploader/Validation/jQuery/styles.css

@@ -3,6 +3,10 @@
   float: left;
 }
 
+.file-uploader-block + .file-uploader-block {
+  float: right;
+}
+
 .note {
   font-size: 10pt;
   color: var(--dx-texteditor-color-label);

apps/demos/utils/server/csp-server.js

@@ -197,10 +197,6 @@ const CSP_DEMO_ALLOWLIST = {
     'script-src': ["'unsafe-inline'"],
   },
   // TODO: fix inline style attribute
-  'FileUploader/Validation': {
-    'style-src': ["'unsafe-inline'"],
-  },
-  // TODO: fix inline style attribute
   'DataGrid/RowSelection': {
     'style-src': ["'unsafe-inline'"],
   },