- upload file desain v.1

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -126,7 +126,7 @@ export class ModalPermohonan extends Component {
 		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">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 		return (
@@ -170,7 +170,14 @@ export class ModalPermohonan extends Component {
 															<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																<input {...getInputProps()} />
 																<div className="dropzone-previews flex">
-																	{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
+																	<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 upload dokumen</h5>
+																			</div>
+																		}
+																		</div>
+																	</div>
 																</div>
 																<div className="d-flex align-items-center">
 																	<small className="ml-auto">

components/PT/Keberatan/ModalPermohonan.js

@@ -128,7 +128,7 @@ export class ModalPermohonan extends Component {
 		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">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 		return (
@@ -172,7 +172,14 @@ export class ModalPermohonan extends Component {
 															<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																<input {...getInputProps()} />
 																<div className="dropzone-previews flex">
-																	{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
+																	<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 upload dokumen</h5>
+																			</div>
+																		}
+																		</div>
+																	</div>
 																</div>
 																<div className="d-flex align-items-center">
 																	<small className="ml-auto">

components/Pelaporan/InputData.js

@@ -161,7 +161,7 @@ export class InputData extends Component {
 		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">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 		return (
@@ -233,9 +233,16 @@ export class InputData extends Component {
 										>
 											{({ getRootProps, getInputProps, isDragActive }) => {
 												return (
-													<div {...getRootProps()} className={"dropzone card p-3" + (isDragActive ? "dropzone-drag-active" : "")}>
+													<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 														<input name="dokumen" {...getInputProps()} />
-														<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}</div>
+														<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 upload dokumen</h5>
+																</div>
+															}
+															</div>
+														</div>
 														<div className="d-flex align-items-center">
 															<small className="ml-auto">
 																<button

components/Pemeriksaan/InputEvaluasi.js

@@ -144,7 +144,7 @@ export default class InputEvaluasi extends Component {
 		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">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 		return (
@@ -199,9 +199,16 @@ export default class InputEvaluasi extends Component {
 										>
 											{({ getRootProps, getInputProps, isDragActive }) => {
 												return (
-													<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+													<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 														<input name="dokumen" {...getInputProps()} />
-														<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}</div>
+														<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 upload dokumen</h5>
+																</div>
+															}
+															</div>
+														</div>
 														<div className="d-flex align-items-center">
 															<small className="ml-auto">
 																<button

components/Sanksi/UploadSurat.js

@@ -74,7 +74,7 @@ export class UploadSurat extends Component {
 		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">{file.name}</span>
+				<span className="text-center">{index + 1}.	{file.name}</span>
 			</div>
 		));
 		return (
@@ -98,13 +98,20 @@ export class UploadSurat extends Component {
 						<DropzoneWrapper className="" onDrop={this.onDrop}>
 							{({ getRootProps, getInputProps, isDragActive }) => {
 								return (
-									<div {...getRootProps()} className={"dropzone card p-5 " + (isDragActive ? "dropzone-drag-active" : "")}>
+									<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 										<input {...getInputProps()} />
-										<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">klik untuk upload dokumen</div>}</div>
+										<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 upload dokumen</h5>
+												</div>
+											}
+											</div>
+										</div>
 										<div className="d-flex align-items-center">
 											<small className="ml-auto">
 												<button type="button" className="btn btn-link" onClick={this.clearFiles}>
-													Clear files
+													Reset dokumen
 												</button>
 											</small>
 										</div>

styles/app/common/circles.scss

@@ -19,6 +19,7 @@ $point-sz-xl : 18px;
     border: 2px solid transparent;
     &.text-left {
         margin-left: 0;
+        text-align: left;
     }
     &.text-right {
         margin-right: 0;

styles/bootstrap/_card.scss

@@ -379,3 +379,17 @@ display: inline;
 // min-width: 300px;
 float: right;
 }
+.dropzone-style-1{
+  // background-color: #9e9e9e;
+  // width: 50px;
+  padding-top: 10px;
+  border: 1px dotted black;
+  min-height: 70px;
+  border-radius: 5px;
+}
+.center-ver-hor{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}