diff --git a/package.json b/package.json index b29aa43..02085c8 100644 --- a/package.json +++ b/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": { diff --git a/src/components/inputs/upload-input-v2/dropzone.js b/src/components/inputs/upload-input-v2/dropzone.js index 27973c5..3492042 100644 --- a/src/components/inputs/upload-input-v2/dropzone.js +++ b/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 ( -
+ {icons} {this.props.children}
); } else { return ( -
{icons} {this.props.children}
+
{icons} {this.props.children}
); } } diff --git a/src/components/inputs/upload-input-v2/index.js b/src/components/inputs/upload-input-v2/index.js index b147c89..13cba97 100644 --- a/src/components/inputs/upload-input-v2/index.js +++ b/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,7 +71,6 @@ export default class UploadInputV2 extends React.Component { addRemoveLinks: true, maxFiles: maxFiles, acceptedFiles: allowedExt, - dropzoneSelector: `media_upload_${mediaType.id}`, ...djsConfig }; @@ -67,6 +78,7 @@ export default class UploadInputV2 extends React.Component { showFiletypeIcon: false, postUrl: postUrl }; + const data = { media_type: mediaType, media_upload: value, @@ -113,7 +125,7 @@ export default class UploadInputV2 extends React.Component { return (
-
+
{this.getDropzone()}