fix(dropzone): make dropzone compatible with react 19

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openstack-uicore-foundation",
-  "version": "4.2.22",
+  "version": "4.2.23-beta.2",
   "description": "ui reactjs components for openstack marketing site",
   "main": "lib/openstack-uicore-foundation.js",
   "scripts": {

src/components/inputs/upload-input-v2/dropzone.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
 import extend from 'extend'
 import 'dropzone/dist/dropzone.css';
 import {Icon} from './icon'
@@ -15,6 +14,7 @@ export class DropzoneJS extends React.Component {
 
     constructor(props) {
         super(props);
+        this.dropzoneRef = React.createRef();
         this.state = {files: []};
         this.onUploadComplete = this.onUploadComplete.bind(this);
         this.onError = this.onError.bind(this);
@@ -78,6 +78,7 @@ export class DropzoneJS extends React.Component {
      * Sets up dropzone.js with the component.
      */
     componentDidMount () {
+        if(!this.dropzoneRef.current) return;
         const options = this.getDjsConfig();
 
         Dropzone = Dropzone || require('dropzone');
@@ -87,9 +88,10 @@ export class DropzoneJS extends React.Component {
             console.info('Neither postUrl nor a "drop" eventHandler specified, the React-Dropzone component might misbehave.')
         }
 
-        var dropzoneNode = this.props.config.dropzoneSelector || ReactDOM.findDOMNode(this);
-        this.dropzone = new Dropzone(dropzoneNode, options);
+        const dropzoneNode = this.dropzoneRef.current;
+        if (!dropzoneNode) throw new Error("Dropzone node not found");
 
+        this.dropzone = new Dropzone(dropzoneNode, options);
         this.setupEvents()
     }
 
@@ -134,8 +136,10 @@ export class DropzoneJS extends React.Component {
         this.queueDestroy = false;
 
         if (!this.dropzone) {
-            const dropzoneNode = this.props.config.dropzoneSelector || ReactDOM.findDOMNode(this);
+            const dropzoneNode = this.dropzoneRef.current;
+            if (!dropzoneNode) throw new Error("Dropzone node not found");
             this.dropzone = new Dropzone(dropzoneNode, this.getDjsConfig());
+            this.setupEvents();
         }
 
         this.dropzone.options = extend(true, {}, this.dropzone.options, djsConfigObj, postUrlConfigObj);
@@ -158,14 +162,14 @@ export class DropzoneJS extends React.Component {
 
         if (!this.props.config.postUrl && this.props.action) {
             return (
-                <form action={this.props.action} className={className}>
+                <form ref={this.dropzoneRef} action={this.props.action} className={className}>
                     {icons}
                     {this.props.children}
                 </form>
             );
         } else {
             return (
-                <div id={this.props.id} className={className}> {icons} {this.props.children} </div>
+                <div ref={this.dropzoneRef} id={this.props.id} className={className}> {icons} {this.props.children} </div>
             );
         }
     }

src/components/inputs/upload-input-v2/index.js

@@ -24,6 +24,16 @@ export default class UploadInputV2 extends React.Component {
         super(props);
     }
 
+    getDefaultAllowedExtensions = () => {
+        const { mediaType } = this.props
+        return mediaType && mediaType.type ? mediaType?.type?.allowed_extensions.map((ext) => `.${ext.toLowerCase()}`).join(",") : '';
+    }
+
+    getDefaultMaxSize = () => {
+        const { mediaType } = this.props
+        return mediaType ? mediaType?.max_size / 1024 : 100;
+    }
+
     getDropzone = () => {
         const {
             value,
@@ -37,11 +47,13 @@ export default class UploadInputV2 extends React.Component {
             djsConfig,
             id,
             parallelChunkUploads = false,
-            onError = () => {}
+            onError = () => {},
+            getAllowedExtensions = null,
+            getMaxSize = null
         } = this.props;
 
-        const allowedExt = mediaType && mediaType.type ? mediaType.type.allowed_extensions.map((ext) => `.${ext.toLowerCase()}`).join(",") : '';
-        const maxSize = mediaType ? mediaType.max_size / 1024 : 100;
+        const allowedExt = getAllowedExtensions ? getAllowedExtensions() : this.getDefaultAllowedExtensions();
+        const maxSize = getMaxSize ? getMaxSize() : this.getDefaultMaxSize();
         const canUpload = !maxFiles || value.length < maxFiles;
 
         let eventHandlers = {};
@@ -59,14 +71,14 @@ export default class UploadInputV2 extends React.Component {
             addRemoveLinks: true,
             maxFiles: maxFiles,
             acceptedFiles: allowedExt,
-            dropzoneSelector: `media_upload_${mediaType.id}`,
             ...djsConfig
         };
 
         const componentConfig = {
             showFiletypeIcon: false,
             postUrl: postUrl
         };
+
         const data = {
             media_type: mediaType,
             media_upload: value,
@@ -113,7 +125,7 @@ export default class UploadInputV2 extends React.Component {
 
         return (
             <div className="row">
-                <div className="col-md-6"  style={{height: 180}}>
+                <div className="col-md-6" style={{height: 180}}>
                     {this.getDropzone()}
                 </div>
                 <div className="col-md-6">