Allow uploading folders on supported browsers. (#9627)

browser/app/js/uploads/Dropzone.js

@@ -48,18 +48,29 @@ export class Dropzone extends React.Component {
     const rejectStyle = {
       backgroundColor: "#ffdddd"
     }
+    const getStyle = (isDragActive, isDragAccept, isDragReject) => ({
+      ...style,
+      ...(isDragActive ? activeStyle : {}),
+      ...(isDragReject ? rejectStyle : {})
+    })
 
     // disableClick means that it won't trigger a file upload box when
     // the user clicks on a file.
     return (
       <ReactDropzone
-        style={style}
-        activeStyle={activeStyle}
-        rejectStyle={rejectStyle}
-        disableClick={true}
         onDrop={this.onDrop.bind(this)}
       >
-        {this.props.children}
+        {({getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject}) => (
+          <div
+            {...getRootProps({
+              onClick: event => event.stopPropagation()
+            })}
+            style={getStyle(isDragActive, isDragAccept, isDragReject)}
+          >
+            <input {...getInputProps()} />
+            {this.props.children}
+          </div>
+        )}
       </ReactDropzone>
     )
   }

browser/app/js/uploads/actions.js

@@ -89,11 +89,16 @@ export const uploadFile = file => {
       return
     }
     const currentPrefix = getCurrentPrefix(state)
-    const objectName = `${currentPrefix}${file.name}`
+    var _filePath = file.path || file.name
+    if (_filePath.charAt(0) == '/') {
+      _filePath = _filePath.substring(1)
+    }
+    const filePath = _filePath
+    const objectName = `${currentPrefix}${filePath}`
     const uploadUrl = `${
       window.location.origin
     }${minioBrowserPrefix}/upload/${currentBucket}/${objectName}`
-    const slug = `${currentBucket}-${currentPrefix}-${file.name}`
+    const slug = `${currentBucket}-${currentPrefix}-${filePath}`
 
     let xhr = new XMLHttpRequest()
     xhr.open("PUT", uploadUrl, true)
@@ -141,7 +146,7 @@ export const uploadFile = file => {
         dispatch(
           alertActions.set({
             type: "success",
-            message: "File '" + file.name + "' uploaded successfully."
+            message: "File '" + filePath + "' uploaded successfully."
           })
         )
         dispatch(objectsActions.selectPrefix(currentPrefix))
@@ -153,7 +158,7 @@ export const uploadFile = file => {
       dispatch(
         alertActions.set({
           type: "danger",
-          message: "Error occurred uploading '" + file.name + "'."
+          message: "Error occurred uploading '" + filePath + "'."
         })
       )
     })