dropzone v1.2

components/Layout/Footer.js

@@ -7,7 +7,7 @@ class Footer extends Component {
         return (
             <footer className="footer-container">
                 <span>Sidali Dikti &copy; {year}</span>
-                <span className=' float-right'>Version 2.1 ~ 1.88</span>
+                <span className=' float-right'>Version 2.2 ~ 1.96</span>
             </footer>
         );
     }

components/NaikSanksi/InputTanggal.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, CardTitle } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Progress } from "reactstrap";
 import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -173,10 +173,22 @@ class InputTanggal extends Component {
     };
     render() {
         const { files } = this.state;
-
+        const removeFile = file => () => {
+            const newFiles = [...files]
+            newFiles.splice(newFiles.indexOf(file), 1)
+            this.setState({
+                files: newFiles,
+            });
+        }
         const thumbs = files.map((file, index) => (
             <div md={3} key={index}>
-                <span className="text-left">{index + 1}.{file.name}</span>
+                <div className="text-left">{file.name}</div>
+                <div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
+                    <em className="fas fa-trash"></em>
+                </button><Progress color="info" value={100}>Success</Progress>
+                </div>
+                <span className="float-right">
+                </span>
             </div>
         ));
         return (
@@ -345,7 +357,10 @@ class InputTanggal extends Component {
                                                                 <input {...getInputProps()} />
                                                                 <div className="dropzone-previews flex">
                                                                     <div className="dropzone-style-1">
-                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+                                                                            <div className="text-center fa-2x icon-cloud-upload mr-2 ">
+                                                                                <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+                                                                            </div> :
                                                                             <div className="text-center fa-2x icon-cloud-upload mr-2 ">
                                                                                 <h5 className="text-center dz-default dz-message">Upload dokumen rekomendasi delegasi</h5>
                                                                             </div>
@@ -373,6 +388,9 @@ class InputTanggal extends Component {
                                                 </DropzoneWrapper>
                                             )}
                                         </Field>
+                                        <div>
+                                            {thumbs}
+                                        </div>
                                     </div>
                                 </FormGroup>
                                 <FormGroup row>

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import Router from "next/router";
-import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter, Progress } from "reactstrap";
 import { addBanding } from "@/actions/banding";
 import { connect } from "react-redux";
 import { toast } from "react-toastify";
@@ -123,10 +123,22 @@ export class ModalPermohonan extends Component {
 	render() {
 		const { files } = this.state;
 
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
 			<div md={3} key={index}>
-				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-center">{index + 1}.{file.name}</span>
+				<div className="text-left">{file.name}</div>
+				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
+					<em className="fas fa-trash"></em>
+				</button><Progress color="info" value={100}>Success</Progress>
+				</div>
+				<span className="float-right">
+				</span>
 			</div>
 		));
 		return (
@@ -171,7 +183,10 @@ export class ModalPermohonan extends Component {
 																<input {...getInputProps()} />
 																<div className="dropzone-previews flex">
 																	<div className="dropzone-style-1">
-																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																				<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+																			</div> :
 																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 																				<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
 																			</div>
@@ -199,8 +214,11 @@ export class ModalPermohonan extends Component {
 												</DropzoneWrapper>
 											)}
 										</Field>
+										<div>
+											{thumbs}
+										</div>
 										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-										<p className="mrgn-top-5">
+										<p className="mrgn-top-5 font-color-black">
 											Ukuran setiap dokumen maksimal 15mb
 										</p>
 									</div>

components/PT/Keberatan/ModalPermohonan.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import Router from "next/router";
-import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter, Progress } from "reactstrap";
 import { addKeberatan } from "@/actions/keberatan";
 import { connect } from "react-redux";
 import { toast } from "react-toastify";
@@ -125,10 +125,22 @@ export class ModalPermohonan extends Component {
 	render() {
 		const { files } = this.state;
 
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
 			<div md={3} key={index}>
-				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-center">{index + 1}.{file.name}</span>
+				<div className="text-left">{file.name}</div>
+				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
+					<em className="fas fa-trash"></em>
+				</button><Progress color="info" value={100}>Success</Progress>
+				</div>
+				<span className="float-right">
+				</span>
 			</div>
 		));
 		return (
@@ -173,7 +185,10 @@ export class ModalPermohonan extends Component {
 																<input {...getInputProps()} />
 																<div className="dropzone-previews flex">
 																	<div className="dropzone-style-1">
-																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																				<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+																			</div> :
 																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 																				<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
 																			</div>
@@ -201,8 +216,11 @@ export class ModalPermohonan extends Component {
 												</DropzoneWrapper>
 											)}
 										</Field>
+										<div>
+											{thumbs}
+										</div>
 										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-										<p className="mrgn-top-5">
+										<p className="mrgn-top-5 font-color-black">
 											Ukuran setiap dokumen maksimal 15mb
 										</p>
 									</div>

components/Pelaporan/InputData.js

@@ -3,7 +3,7 @@ import Router from "next/router";
 import { getPelanggaranPublic } from "@/actions/pelanggaran";
 import { createPelaporan } from "@/actions/pelaporan";
 import Select from "react-select";
-import { Row, Col, FormGroup, Input, Button } from "reactstrap";
+import { Row, Col, FormGroup, Input, Button, Progress } from "reactstrap";
 import { connect } from "react-redux";
 import { ToastContainer, toast } from "react-toastify";
 import moment from "moment";
@@ -157,11 +157,22 @@ export class InputData extends Component {
 
 	render() {
 		const { selectedOptionMulti, files, pelanggaran } = this.state;
-
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
 			<div md={3} key={index}>
-				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-left">{index + 1}.{file.name}</span>
+				<div className="text-left">{file.name}</div>
+				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
+					<em className="fas fa-trash"></em>
+				</button><Progress color="info" value={100}>Success</Progress>
+				</div>
+				<span className="float-right">
+				</span>
 			</div>
 		));
 		return (
@@ -236,7 +247,10 @@ export class InputData extends Component {
 													<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 														<input name="dokumen" {...getInputProps()} />
 														<div className="dropzone-style-1">
-															<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+															<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+																<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																	<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+																</div> :
 																<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 																	<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
 																</div>
@@ -263,8 +277,11 @@ export class InputData extends Component {
 										</DropzoneWrapper>
 									)}
 								</Field>
+								<div>
+									{thumbs}
+								</div>
 								<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-								<p className="mrgn-top-5">
+								<p className="mrgn-top-5 font-color-black">
 									Ukuran setiap dokumen maksimal 15mb
 								</p>
 							</div>

components/Pemeriksaan/InputEvaluasi.js

@@ -3,7 +3,7 @@ import { insertPemeriksaan } from "@/actions/pemeriksaan";
 import Router from "next/router";
 import Datetime from "react-datetime";
 import moment from "moment";
-import { Row, Col, FormGroup, Input, Button } from "reactstrap";
+import { Row, Col, FormGroup, Input, Button, Progress } from "reactstrap";
 import { ToastContainer, toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -163,10 +163,22 @@ class InputEvaluasi extends Component {
 	render() {
 		const { files } = this.state;
 
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
 			<div md={3} key={index}>
-				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-left">{index + 1}.{file.name}</span>
+				<div className="text-left">{file.name}</div>
+				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
+					<em className="fas fa-trash"></em>
+				</button><Progress color="info" value={100}>Success</Progress>
+				</div>
+				<span className="float-right">
+				</span>
 			</div>
 		));
 		return (
@@ -224,7 +236,10 @@ class InputEvaluasi extends Component {
 													<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 														<input name="dokumen" {...getInputProps()} />
 														<div className="dropzone-style-1">
-															<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+															<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+																<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																	<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+																</div> :
 																<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 																	<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
 																</div>
@@ -251,8 +266,11 @@ class InputEvaluasi extends Component {
 										</DropzoneWrapper>
 									)}
 								</Field>
+								<div>
+									{thumbs}
+								</div>
 								<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-								<p className="mrgn-top-5">
+								<p className="mrgn-top-5 font-color-black">
 									Ukuran setiap dokumen maksimal 15mb
 								</p>
 							</div>

components/PerpanjanganSanksi/InputTanggal.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, CardTitle } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Progress } from "reactstrap";
 import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -156,10 +156,22 @@ class InputTanggal extends Component {
     };
     render() {
         const { files, sanksi } = this.state;
-
+        const removeFile = file => () => {
+            const newFiles = [...files]
+            newFiles.splice(newFiles.indexOf(file), 1)
+            this.setState({
+                files: newFiles,
+            });
+        }
         const thumbs = files.map((file, index) => (
             <div md={3} key={index}>
-                <span className="text-left">{index + 1}.{file.name}</span>
+                <div className="text-left">{file.name}</div>
+                <div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
+                    <em className="fas fa-trash"></em>
+                </button><Progress color="info" value={100}>Success</Progress>
+                </div>
+                <span className="float-right">
+                </span>
             </div>
         ));
         return (
@@ -249,7 +261,10 @@ class InputTanggal extends Component {
                                                                 <input {...getInputProps()} />
                                                                 <div className="dropzone-previews flex">
                                                                     <div className="dropzone-style-1">
-                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+                                                                            <div className="text-center fa-2x icon-cloud-upload mr-2 ">
+                                                                                <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+                                                                            </div> :
                                                                             <div className="text-center fa-2x icon-cloud-upload mr-2 ">
                                                                                 <h5 className="text-center dz-default dz-message">Upload dokumen rekomendasi delegasi</h5>
                                                                             </div>
@@ -277,6 +292,9 @@ class InputTanggal extends Component {
                                                 </DropzoneWrapper>
                                             )}
                                         </Field>
+                                        <div>
+                                            {thumbs}
+                                        </div>
                                     </div>
                                 </FormGroup>
                                 <FormGroup row>

components/RekomendasiDelegasi/InputRekomendasi.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { insertPemeriksaan } from "@/actions/pemeriksaan";
-import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, CardTitle } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Progress } from "reactstrap";
 import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -141,9 +141,22 @@ class InputRekomendasi extends Component {
 	render() {
 		const { files } = this.state;
 
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
 			<div md={3} key={index}>
-				<span className="text-left">{index + 1}.{file.name}</span>
+				<div className="text-left">{file.name}</div>
+				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
+					<em className="fas fa-trash"></em>
+				</button><Progress color="info" value={100}>Success</Progress>
+				</div>
+				<span className="float-right">
+				</span>
 			</div>
 		));
 		return (
@@ -179,7 +192,10 @@ class InputRekomendasi extends Component {
 																<input {...getInputProps()} />
 																<div className="dropzone-previews flex">
 																	<div className="dropzone-style-1">
-																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																				<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+																			</div> :
 																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 																				<h5 className="text-center dz-default dz-message">upload dokumen rekomendasi delegasi</h5>
 																			</div>
@@ -207,8 +223,11 @@ class InputRekomendasi extends Component {
 												</DropzoneWrapper>
 											)}
 										</Field>
+										<div>
+											{thumbs}
+										</div>
 										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-										<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
+										<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
 									</div>
 								</FormGroup>
 								<FormGroup row>

components/Sanksi/UploadSurat.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Input, FormGroup, Label } from "reactstrap";
+import { Row, Col, Input, FormGroup, Label, Progress } from "reactstrap";
 import Select from "react-select";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -142,10 +142,21 @@ export class UploadSurat extends Component {
 	render() {
 		const { files } = this.state;
 
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
 			<div md={3} key={index}>
-				<span className="text-left">
-					{index + 1}. {file.name}
+				<div className="text-left">{file.name}</div>
+				<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
+					<em className="fas fa-trash"></em>
+				</button><Progress color="info" value={100}>Success</Progress>
+				</div>
+				<span className="float-right">
 				</span>
 			</div>
 		));
@@ -276,9 +287,9 @@ export class UploadSurat extends Component {
 										<div className="dropzone-style-1">
 											<div className="center-ver-hor dropzone-previews flex">
 												{this.state.files.length > 0 ? (
-													<Row>
-														<span className="text-left">{thumbs}</span>
-													</Row>
+													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+														<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+													</div>
 												) : (
 													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 														<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
@@ -297,7 +308,10 @@ export class UploadSurat extends Component {
 								);
 							}}
 						</DropzoneWrapper>
-						<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
+						<div>
+							{thumbs}
+						</div>
+						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
 					</div>
 				</FormGroup>
 			</form >

components/TurunSanksi/InputTanggal.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, CardTitle } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Progress } from "reactstrap";
 import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -173,10 +173,22 @@ class InputTanggal extends Component {
     };
     render() {
         const { files } = this.state;
-
+        const removeFile = file => () => {
+            const newFiles = [...files]
+            newFiles.splice(newFiles.indexOf(file), 1)
+            this.setState({
+                files: newFiles,
+            });
+        }
         const thumbs = files.map((file, index) => (
             <div md={3} key={index}>
-                <span className="text-left">{index + 1}.{file.name}</span>
+                <div className="text-left">{file.name}</div>
+                <div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
+                    <em className="fas fa-trash"></em>
+                </button><Progress color="info" value={100}>Success</Progress>
+                </div>
+                <span className="float-right">
+                </span>
             </div>
         ));
         return (
@@ -345,7 +357,10 @@ class InputTanggal extends Component {
                                                                 <input {...getInputProps()} />
                                                                 <div className="dropzone-previews flex">
                                                                     <div className="dropzone-style-1">
-                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+                                                                            <div className="text-center fa-2x icon-cloud-upload mr-2 ">
+                                                                                <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+                                                                            </div> :
                                                                             <div className="text-center fa-2x icon-cloud-upload mr-2 ">
                                                                                 <h5 className="text-center dz-default dz-message">Upload dokumen rekomendasi delegasi</h5>
                                                                             </div>
@@ -373,6 +388,9 @@ class InputTanggal extends Component {
                                                 </DropzoneWrapper>
                                             )}
                                         </Field>
+                                        <div>
+                                            {thumbs}
+                                        </div>
                                     </div>
                                 </FormGroup>
                                 <FormGroup row>

pages/app/index.js

@@ -112,7 +112,7 @@ class App extends Component {
               </Col>
             </Row>
           </Jumbotron>
-          <span>Version 2.1 ~ 1.88</span>
+          <span>Version 2.2 ~ 1.96</span>
         </ContentWrapper>
       </div>
     );