[ADD] filetype and size validation

psicoadmin/src/Css/all.css

     padding: 10px 20px;
     border: 1px solid #2ec5d3;
     border-radius: 4px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 .ver_lista_productos{
     width: 100%;
     max-width: 100%;
 }
 .footerinfo {
-    padding: 40px;
-    width: 100%;
+    /* padding: 40px; */
+    /* width: 100%; */
     bottom: 0;
     margin: 0;
     text-align: center;

psicoadmin/src/Pages/Puestos.js

 
 import NotFound from '../Images/not_found.png';
 
+
 const NewPlazaSchema = Yup.object().shape({
     nombre : Yup.string().required('El nombre es requerido').min(5).max(20),
     description : Yup.string().required('La description es requerida').min(5).max(20),
-    salario : Yup.number().required('El salario es requerido')
+    salario : Yup.number().required('El salario es requerido'),
+    imagen:  Yup.mixed().required('El imagen es requerido').test('fileSize', "El archivo es demasiado grande", value => {
+        if(!value || value.length <= 0) return false
+        return value[0].size < 200000
+    }).test('fileType', "El tipo del archivo no es válido", value => {
+        let SUPPORTED_FORMATS = ["image/jpg", "image/jpeg", "image/gif", "image/png"];
+        if(!value) return false
+        return SUPPORTED_FORMATS.includes(value[0].type)
+    })
 })
     
 let data = [{
         yield index++;
 }
 
-var ID = idMaker(); // "Generator { }"
+var ID = idMaker(); 
 
 for ( var _ of new Array(46) ){
-    data.push({
-        ...data[0],
-        id : ID.next().value,
-        d : _ 
-    })
+    data.push({ ...data[0], id : ID.next().value, d : _ })
 }
+
 function ListMode() {
 
     let actions = [
 
                         {
                             data.length ? 
-                                data.slice(0,23).map( (plaza, i) => {
+                                data.slice( 0,23 ).map( (plaza, i) => {
                                     return (
                                         <tr key={plaza.id}>
                                             <td className="text-center">{ plaza.nombre }</td>
 
 function Manual ( props ) {
 
-    let [ filename, setFilename ] = React.useState(null);
-
+    let [ filename, setFilename ] = React.useState('');
     let { visible, onClose } = props
-
-    // Create a reference to the hidden file input element
     const hiddenFileInput = React.useRef(null);
 
-    // Programatically click the hidden file input element
-    // when the Button component is clicked
-    const handleClick = event => {
+    const PickFile = event => {
         hiddenFileInput.current.click();
     };
-    // Call a function (passed as a prop from the parent component)
-    // to handle the user-selected file 
-    const handleChange = event => {
-        const fileUploaded = event.target.files[0];
-        // console.log( "FILE >> ", fileUploaded )
-        setFilename( fileUploaded.name )
-        //props.handleFile(fileUploaded);
-    };
-
-    const validateEmail = (value) => value === "Edgar";
 
     return (
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
             <Modal.Body className="modal-body">
 
                 <Formik
+
                     initialValues={{
                         nombre: '',
                         description: '',
                         salario: '',
+                        imagen: '',
                     }}
+
                     validationSchema={NewPlazaSchema}
                     onSubmit={async (values) => {
                         console.log('VALUES >> ',values)
                     }} >
 
 
-                    { ({  errors, touched, validateField, validateForm }) => (
+                    { ({  errors, touched, validateField, validateForm, setFieldValue  }) => (
                         <Form>
                             <Row>
 
                                 <Col md="8">
 
                                     <input 
-                                        value={ filename ? filename : "" } 
+                                        value={filename} 
                                         type="text" 
                                         className="file-upload-input" 
                                         disabled="" 
-                                        placeholder="Ningún archivo seleccionado"/>
+                                        placeholder="Ningún archivo seleccionado" readOnly
+                                    />
 
-                                    <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }} onClick={handleClick}>
+                                    <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }} onClick={PickFile}>
                                         SUBIR FOTO
                                     </Button>
 
+                                    {errors.imagen && touched.imagen && <div className="error_feedback">{errors.imagen}</div>}
                                     <input
+                                        multiple={false}
                                         type="file"
                                         ref={hiddenFileInput}
-                                        onChange={handleChange}
+                                        onChange={(event) => {
+                                            const files = event.target.files;
+                                            let myFiles =Array.from(files);
+                                            setFieldValue("imagen", myFiles);
+                                            setFilename(myFiles[0].name)
+                                        }}
                                         style={{display: 'none'}}
                                     />
 
                                     <Col md="12">
 
                                         {errors.nombre && touched.nombre && <div className="error_feedback">{errors.nombre}</div>}
-                                        <Field name="nombre" placeholder="Nombre de la plaza" validate={validateEmail}/>
+                                        <Field name="nombre" placeholder="Nombre de la plaza"/>
 
                                         {errors.description && touched.description && <div className="error_feedback">{errors.description}</div>}
                                         <Field name="description">
                                             {({ field, form, meta }) => {
                                                 return(
-                                                    <textarea id="description" name="description" defaultValue="" value={field.value} onChange={field.onChange} placeholder="Descripción general de la plaza"></textarea>
+                                                    <textarea id="description" name="description" value={field.value} onChange={field.onChange} placeholder="Descripción general de la plaza"></textarea>
                                                 )
                                             }}
                                         </Field>
 
                                         {errors.salario && touched.salario && <div className="error_feedback">{errors.salario}</div>}
-                                        <Field name="salario" type="number" name="salario" placeholder="Salario"/>
+                                        <Field name="salario" type="number" placeholder="Salario"/>
 
 
                                     </Col>