img preview

psicoadmin/src/Css/all.css

@@ -637,11 +637,13 @@ table.dataTable tbody th, table.dataTable tbody td {
     color: #ffffff;
 }
 .img-container {
-    width: 90px;
-    height: 90px;
+    margin-left : 30%;
+    margin-bottom : 25px;
+    width:100px;
+    height: 120px;
     overflow: hidden;
     float: none;
-    margin: auto;
+    /* margin: auto; */
 }
 .img-container img {
     width: 100%;

psicoadmin/src/Pages/Puestos.js

@@ -159,6 +159,7 @@ function GridMode () {
 function Manual ( props ) {
 
     let [ filename, setFilename ] = React.useState('');
+    let [ file, setFile ] = React.useState(undefined);
     let { visible, onClose } = props
     const hiddenFileInput = React.useRef(null);
 
@@ -195,7 +196,7 @@ function Manual ( props ) {
 
                                 <Col md="4">
                                     <div className="img-container">
-                                        <img alt="agregar plaza manual" src={NotFound}/>
+                                        <img alt="agregar plaza manual" src={ file ? file : NotFound}/>
                                     </div>
                                 </Col>
 
@@ -220,9 +221,22 @@ function Manual ( props ) {
                                         ref={hiddenFileInput}
                                         onChange={(event) => {
                                             const files = event.target.files;
+                                            console.log('files crud ', files[0])
                                             let myFiles =Array.from(files);
                                             setFieldValue("imagen", myFiles);
                                             setFilename(myFiles[0].name)
+
+                                            // var reader = new FileReader();
+                                            // var url = reader.readAsDataURL(files[0]);
+                                            // console.log('img url  >> ', url)
+                                            // setFile(reader.result);j
+                                            const objectUrl = URL.createObjectURL(files[0])
+                                            console.log(objectUrl)
+                                            setFile(objectUrl)
+
+
+
+
                                         }}
                                         style={{display: 'none'}}
                                     />