反应：当我在表单中使用 input type="file' 时，我应该在 propTypes 中写什么？

Question

I make form using Formik in my app. When I send form to my local server I create image with title. Attach images I should using input type="file" .But I have very little experience using the formik.

What I should write in propTypes when in form I use input type="file' in file InputImage.js?

And How to add input type="file" in file AddImage.js in mark place?

Now I want to create input which attach image component InputImage.js similar to InputTitle.js.

I comment line where I dont know what I should write.

AddImage.js:

const AddImage = (props) => {
    
    const {handleSubmit, values, handleChange} = useFormik({  
      initialValues: {
          title: '',
          image: ''             // Did I write correctly here?
      },
        validateOnchange: false,
        onSubmit: async (formValues) => {
              const response = await api(`${imageRoutePath}`, {
                  method:'POST',
                  body: JSON.stringify(formValues),
              });},  
    });
    
   return (
    <div>
      <form onSubmit={handleSubmit}>   
       <InputTitle                             
         label="title"
         id="title" 
         inputProps={{
           name:'title',
           value: values.title,
           onChange: handleChange,
       }}
       />
       
       <InputImage                             
         label="image"
         id="image" 
         inputProps={{
           name:'image',

            // WHAT I SHOULD WRITE THERE?  

           onChange: handleChange,
       }}
       />
       
          <button type="submit" disabled={isSubmitting}>Add</button>
     </form>
   </div>
   );
};

export default AddImage;

InputImage.js:

const InputImage = ({
    label, inputProps, error, id,     
}) => (
        <div className="formInputCategory">
          <label htmlFor={id} className="formInputLabelCategory">  
            {label}
          </label>
        <input {...inputProps} id={id} />    
          {error && <span className="formInputErrorCategory">{error}</span>} 
        </div>
    );

InputImage.propTypes = {                   
    label: PropTypes.string.isRequired,
  
     // WHAT I SHOULD WRITE THERE?

    error: PropTypes.string,
    id: PropTypes.string.isRequired, 
};

InputImage.defaultProps = { 
    error: '',
}

---------------------------------------------------------------------------------------

example how I write InputTitle.js:

const InputTitle = ({
    label, inputProps, error, id,     
}) => (
        <div className="formInputCategory">
          <label htmlFor={id} className="formInputLabelCategory">  
            {label}
          </label>
        <input {...inputProps} id={id} />    
          {error && <span className="formInputErrorCategory">{error}</span>} 
        </div>
    );


InputTitle.propTypes = {                   
    label: PropTypes.string.isRequired,  
    inputProps: PropTypes.instanceOf(Object).isRequired,  
    error: PropTypes.string,
    id: PropTypes.string.isRequired, 
};

InputTitle.defaultProps = { 
    error: '',
}

Answer 1

Formik doesnot support fileupload by default, But you can try the following

<input id="file" name="file" type="file" onChange={(event) => {
  setFieldValue("file", event.currentTarget.files[0]);
}} />

Here "file" represents the key that you are using for holding the file

setFieldValue is obtained from <Formik />

reference: formik setFieldValue prop

---

your code will look like:

const AddImage = (props) => {

    const {handleSubmit, values, handleChange, setFieldValue } = useFormik({  
      initialValues: {
          title: '',
          image: ''             // Did I write correctly here?
      },
        validateOnchange: false,
        onSubmit: async (formValues) => {
              const response = await api(`${imageRoutePath}`, {
                  method:'POST',
                  body: JSON.stringify(formValues),
              });},  
    });

   return (
    <div>
      <form onSubmit={handleSubmit}>   
       <InputTitle                             
         label="title"
         id="title" 
         inputProps={{
           name:'title',
           value: values.title,
           onChange: handleChange,
       }}
       />

       <InputImage                             
         label="image"
         id="image" 
         inputProps={{
           name:'file',
            id="file",
            // WHAT I SHOULD WRITE THERE?  
            type="file",
            onChange={(event) => {
              setFieldValue("file", event.currentTarget.files[0]);
            }},
       }}
       />

          <button type="submit" disabled={isSubmitting}>Add</button>
     </form>
   </div>
   );
};

export default AddImage;