diff --git a/browser/app/js/browser/MainContent.js b/browser/app/js/browser/MainContent.js index f8fff3fde..fe5b038eb 100644 --- a/browser/app/js/browser/MainContent.js +++ b/browser/app/js/browser/MainContent.js @@ -23,13 +23,16 @@ import BucketPolicyModal from "../buckets/BucketPolicyModal" import MakeBucketModal from "../buckets/MakeBucketModal" import UploadModal from "../uploads/UploadModal" import ObjectsBulkActions from "../objects/ObjectsBulkActions" +import Dropzone from "../uploads/Dropzone" export const MainContent = () => (
-
- + +
+ + diff --git a/browser/app/js/components/Dropzone.js b/browser/app/js/uploads/Dropzone.js similarity index 59% rename from browser/app/js/components/Dropzone.js rename to browser/app/js/uploads/Dropzone.js index 32a139d7f..9e03f5eec 100644 --- a/browser/app/js/components/Dropzone.js +++ b/browser/app/js/uploads/Dropzone.js @@ -1,5 +1,5 @@ /* - * Minio Cloud Storage (C) 2016 Minio, Inc. + * Minio Cloud Storage (C) 2016, 2018 Minio, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,23 +14,21 @@ * limitations under the License. */ -import React from 'react' -import ReactDropzone from 'react-dropzone' -import * as actions from '../actions' +import React from "react" +import { connect } from "react-redux" +import ReactDropzone from "react-dropzone" +import * as actions from "./actions" // Dropzone is a drag-and-drop element for uploading files. It will create a // landing zone of sorts that automatically receives the files. -export default class Dropzone extends React.Component { - +export class Dropzone extends React.Component { onDrop(files) { + const { uploadFile } = this.props // FIXME: Currently you can upload multiple files, but only one abort // modal will be shown, and progress updates will only occur for one // file at a time. See #171. files.forEach(file => { - let req = new XMLHttpRequest() - - // Dispatch the upload. - web.dispatch(actions.uploadFile(file, req)) + uploadFile(file) }) } @@ -38,29 +36,39 @@ export default class Dropzone extends React.Component { // Overwrite the default styling from react-dropzone; otherwise it // won't handle child elements correctly. const style = { - height: '100%', - borderWidth: '0', - borderStyle: 'dashed', - borderColor: '#fff' + height: "100%", + borderWidth: "0", + borderStyle: "dashed", + borderColor: "#fff" } const activeStyle = { - borderWidth: '2px', - borderColor: '#777' + borderWidth: "2px", + borderColor: "#777" } const rejectStyle = { - backgroundColor: '#ffdddd' + backgroundColor: "#ffdddd" } // disableClick means that it won't trigger a file upload box when // the user clicks on a file. return ( - - { this.props.children } + + {this.props.children} ) } } + +const mapDispatchToProps = dispatch => { + return { + uploadFile: file => dispatch(actions.uploadFile(file)) + } +} + +export default connect(undefined, mapDispatchToProps)(Dropzone) diff --git a/browser/app/js/uploads/__tests__/Dropzone.test.js b/browser/app/js/uploads/__tests__/Dropzone.test.js new file mode 100644 index 000000000..ce18431ff --- /dev/null +++ b/browser/app/js/uploads/__tests__/Dropzone.test.js @@ -0,0 +1,34 @@ +/* + * Minio Cloud Storage (C) 2018 Minio, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from "react" +import { shallow } from "enzyme" +import { Dropzone } from "../Dropzone" + +describe("Dropzone", () => { + it("should render without crashing", () => { + shallow() + }) + + it("should call uploadFile with files", () => { + const uploadFile = jest.fn() + const wrapper = shallow() + const file1 = new Blob(["file content1"], { type: "text/plain" }) + const file2 = new Blob(["file content2"], { type: "text/plain" }) + wrapper.first().prop("onDrop")([file1, file2]) + expect(uploadFile.mock.calls).toEqual([[file1], [file2]]) + }) +})