Browse Source

img preview

amenpunk 3 years ago
parent
commit
5829c4efca
2 changed files with 20 additions and 4 deletions
  1. 5 3
      psicoadmin/src/Css/all.css
  2. 15 1
      psicoadmin/src/Pages/Puestos.js

+ 5 - 3
psicoadmin/src/Css/all.css

637
     color: #ffffff;
637
     color: #ffffff;
638
 }
638
 }
639
 .img-container {
639
 .img-container {
640
-    width: 90px;
641
-    height: 90px;
640
+    margin-left : 30%;
641
+    margin-bottom : 25px;
642
+    width:100px;
643
+    height: 120px;
642
     overflow: hidden;
644
     overflow: hidden;
643
     float: none;
645
     float: none;
644
-    margin: auto;
646
+    /* margin: auto; */
645
 }
647
 }
646
 .img-container img {
648
 .img-container img {
647
     width: 100%;
649
     width: 100%;

+ 15 - 1
psicoadmin/src/Pages/Puestos.js

159
 function Manual ( props ) {
159
 function Manual ( props ) {
160
 
160
 
161
     let [ filename, setFilename ] = React.useState('');
161
     let [ filename, setFilename ] = React.useState('');
162
+    let [ file, setFile ] = React.useState(undefined);
162
     let { visible, onClose } = props
163
     let { visible, onClose } = props
163
     const hiddenFileInput = React.useRef(null);
164
     const hiddenFileInput = React.useRef(null);
164
 
165
 
195
 
196
 
196
                                 <Col md="4">
197
                                 <Col md="4">
197
                                     <div className="img-container">
198
                                     <div className="img-container">
198
-                                        <img alt="agregar plaza manual" src={NotFound}/>
199
+                                        <img alt="agregar plaza manual" src={ file ? file : NotFound}/>
199
                                     </div>
200
                                     </div>
200
                                 </Col>
201
                                 </Col>
201
 
202
 
220
                                         ref={hiddenFileInput}
221
                                         ref={hiddenFileInput}
221
                                         onChange={(event) => {
222
                                         onChange={(event) => {
222
                                             const files = event.target.files;
223
                                             const files = event.target.files;
224
+                                            console.log('files crud ', files[0])
223
                                             let myFiles =Array.from(files);
225
                                             let myFiles =Array.from(files);
224
                                             setFieldValue("imagen", myFiles);
226
                                             setFieldValue("imagen", myFiles);
225
                                             setFilename(myFiles[0].name)
227
                                             setFilename(myFiles[0].name)
228
+
229
+                                            // var reader = new FileReader();
230
+                                            // var url = reader.readAsDataURL(files[0]);
231
+                                            // console.log('img url  >> ', url)
232
+                                            // setFile(reader.result);j
233
+                                            const objectUrl = URL.createObjectURL(files[0])
234
+                                            console.log(objectUrl)
235
+                                            setFile(objectUrl)
236
+
237
+
238
+
239
+
226
                                         }}
240
                                         }}
227
                                         style={{display: 'none'}}
241
                                         style={{display: 'none'}}
228
                                     />
242
                                     />