diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 3d227810..5003b464 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -16,7 +16,7 @@ jobs: strategy: matrix: - node-version: [20.x] + node-version: [14.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: @@ -26,7 +26,7 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' - - run: npm install --legacy-peer-deps - - run: npm ci --legacy-peer-deps + - run: npm install + - run: npm ci - run: npm run build --if-present - - run: TZ=America/Detroit npm test \ No newline at end of file + - run: TZ=America/Detroit npm test diff --git a/package.json b/package.json index 594292ef..6aedc309 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,9 @@ "acorn": "7.2.0", "enzyme": "3.10.0", "enzyme-adapter-react-16": "1.15.1", - "sass": "1.63.6", + "node-sass": "8.0.0", "npm-run-all": "4.1.5", - "react-scripts": "5.0.1", - "@babel/plugin-proposal-private-property-in-object": "7.21.11" + "react-scripts": "3.4.4" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "1.2.25", @@ -17,25 +16,26 @@ "@fortawesome/free-regular-svg-icons": "5.11.2", "@fortawesome/free-solid-svg-icons": "5.11.2", "@fortawesome/react-fontawesome": "0.1.7", - "antd": "3.26.19", + "antd": "3.26.0", "axios": "0.21.2", "bootstrap-css-only": "4.3.1", "bowser": "2.7.0", "braces": "3.0.2", "dateformat": "3.0.3", "detect-browser": "4.8.0", - "eslint": "7.11.0", + "eslint": "6.7.2", "filesize": "6.0.1", "fine-uploader": "5.16.2", "js-polyfills": "0.1.42", "kpmp-common-components": "1.1.10", "moment": "2.29.4", + "node-sass": "8.0.0", "popper.js": "1.16.0", "prop-types": "15.7.2", - "react": "17.0.2", + "react": "16.12.0", "react-countdown": "2.3.2", "react-datetime": "2.16.3", - "react-dom": "17.0.2", + "react-dom": "16.12.0", "react-fine-uploader": "1.1.1", "react-ga": "2.7.0", "react-ga4": "^1.4.1", @@ -43,7 +43,7 @@ "react-router-dom": "5.1.2", "react-switch": "5.0.1", "react-toastify": "5.4.1", - "reactstrap": "8.9.0", + "reactstrap": "8.1.1", "redux": "4.0.4", "redux-thunk": "2.3.0" }, @@ -52,21 +52,16 @@ "start": "npm-run-all -p watch-css start-js", "build-js": "react-scripts build", "build": "npm-run-all build-css build-js", - "build-css": "sass -I ./src -I ./node_modules src/:src/", - "watch-css": "npm run build-css && sass -I ./src -I ./node_modules src/:src/ --watch", + "build-css": "node-sass src/ -o src/", + "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", "test": "react-scripts test --env=jsdom --verbose=false", "eject": "react-scripts eject" }, - "overrides": { - "react-scripts": { - "@svgr/webpack": "6.0.0" - }, - "semver": "7.5.2" - }, "eslintConfig": { "env": { "browser": true, - "node": true + "node": true, + "cache": true } }, "proxy": "http://localhost:3030", diff --git a/src/components/Upload/Forms/DynamicForm.js b/src/components/Upload/Forms/DynamicForm.js index 86bf23dc..051d48dd 100755 --- a/src/components/Upload/Forms/DynamicForm.js +++ b/src/components/Upload/Forms/DynamicForm.js @@ -2,10 +2,13 @@ import React, { Component } from 'react'; import { Form, Button } from 'antd'; import { DynamicFormGenerator } from './DynamicFormGenerator'; import { Row, Col } from 'reactstrap'; +import FileDropzone from './FileDropzone'; import LargeFileModal from '../../Packages/LargeFileModal'; +import qq from 'fine-uploader/lib/core'; import { uploader } from '../fineUploader'; import { Link, Prompt } from 'react-router-dom'; import PropTypes from 'prop-types'; +import Switch from "react-switch"; class DynamicForm extends Component { @@ -15,11 +18,52 @@ class DynamicForm extends Component { this.state = { filesAdded: 0, submitClicked: false, - largeFilesChecked: true, + largeFilesChecked: false, }; this.handleLargeFilesToggle = this.handleLargeFilesToggle.bind(this); this.handleLargeFilesClick= this.handleLargeFilesClick.bind(this); + + uploader.methods.reset(); + uploader.params = { hostname: window.location.hostname } + + uploader.on('submit', () => { + let newCount = this.state.filesAdded + 1; + this.setState( { filesAdded: newCount } ); + this.isSubmitDisabled(); + return true; + }); + + uploader.on('cancel', () => { + let newCount = this.state.filesAdded - 1; + this.setState( { filesAdded: newCount }); + this.isSubmitDisabled(); + return true; + }); + + uploader.on('submit', (id, name) => { + let files = uploader.methods.getUploads({ + status: [ qq.status.SUBMITTED, qq.status.PAUSED ]}); + + // The new version of react-scripts sees fileIndex as an unused variable, + // though it is...adding a comment to disable erroneous warning + // eslint-disable-next-line + for(let fileIndex in files) { + let existingName = files[fileIndex].name; + if (existingName === name) { + alert("You have already selected " + existingName + " to upload."); + return false; + } + } + return true; + }); + + uploader.on('validateBatch', () => { + if (this.state.submitClicked) { + return false; + } + return true; + }) let formGenerator = new DynamicFormGenerator(); this.renderSection = formGenerator.renderSection.bind(this); @@ -166,6 +210,7 @@ class DynamicForm extends Component { }) } } + let dropzoneHidden = this.state.largeFilesChecked?" hidden":""; return ( STEP 2: Provide the dataset information {this.renderSection(this.props.formDTD.standardFields, this.props.form, this.props.userInformation)} {dynamicSections} - {(this.props.isUploading && this.state.largeFilesChecked) && + {(!this.state.largeFilesChecked) &&

STEP 3: Add your files

} + + + + + + + {(this.props.isUploading && this.state.largeFilesChecked) &&
@@ -196,7 +248,7 @@ class DynamicForm extends Component { } -

STEP 3: Click upload and add your files with the upload instructions that follow

+ {(this.state.largeFilesChecked)?

STEP 3: Click upload and add your files with the upload instructions that follow

:

STEP 4: Click upload

}
@@ -225,7 +277,6 @@ DynamicForm.propTypes = { userInformation: PropTypes.any, } - const WrappedUniversalHeaderForm = Form.create({ name: 'universalHeader', validateMessage: "Required" })(DynamicForm); export default WrappedUniversalHeaderForm; diff --git a/src/components/Upload/Forms/FileDropzone.js b/src/components/Upload/Forms/FileDropzone.js new file mode 100644 index 00000000..61927e19 --- /dev/null +++ b/src/components/Upload/Forms/FileDropzone.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; +import Gallery from 'react-fine-uploader/gallery'; +import PropTypes from 'prop-types'; + +class FileDropzone extends Component { + + uploadFile(e) { + e.preventDefault(); + document.getElementById("upload").click(); + } + + render() { + let cancelButtonClass = "react-fine-uploader-gallery-cancel-button"; + if (this.props.isUploading) { + cancelButtonClass = cancelButtonClass + " cancel-disabled"; + } + const children = + Drop file(s) here + + ; + const fileInputChildren = Select file(s); + return( + + ); + } +} + +FileDropzone.propTypes = { + uploader: PropTypes.object.isRequired, + isUploading: PropTypes.bool +} + +export default FileDropzone; +