1

estoy tratando de subir imagenes a mi backend mediante apollo, este es mi schema de graphql:

scalar upload

type Mutation {
  to_post(data_post: InputTo_post!): ResponsePost
}

input InputTo_post {
  text: String
  image: Upload
}

type ResponsePost {
  error: Boolean
  success: Boolean
  message: String
}

*Utilizo el scalar por que como mis esquemas estan construidos mediante addResolversToSchema y stitchSchemas.

cuando recibo la peticion en el backend muestro por consola los resultados y me devuelve lo siguiente

{ data_post: { text: '', image: [ {} ] } }

el campo text no importa por que lo recivo bien, pero el campo image no esta devolviendo las imagenes que envie, esta es la logica del frontend donde envio las imagenes al backend

const [post, setPost] = useState<{ text: string, image: File }>({ text: "", image: [] });

const handleInputFile = (event: ChangeEvent<HTMLInputElement>) => {
  const { files } = event.currentTarget;
  if (files)
    for (let i = 0; i < Array.from(files).length; i++) {
      let element: File = files[i];
      setPost(prev => ({...prev, image: [...prev.image, element]}));
    }
};

const submitPost = useCallback(() => {
  TO_POST({ variables: { dataPost: post } })
  .then(({ data }) => {
    const { success, error, message } = data.to_post;
    if (success) {
      setPost({text: "", image: [] });
      enqueueSnackbar(message, { variant: "success" });
    } else if (error) {
      enqueueSnackbar(message, { variant: "error" });
    }
  });
},[TO_POST, enqueueSnackbar, post]);


return(
  <form onSubmit={submitPost}>
    <input
      onChange={handleInputFile}
      type="file"
      accept="image/*,video/*"
      id="img"
      className={classes.inputFile}
      multiple
      maxLength={5}
    />
  </form>
)

1 respuesta 1

0

Hola me di cuenta de que tienes un error en tu codigo ya que en esta parte no esta bien :

<form onSubmit={submitPost}>
    <input
      onChange={handleInputFile}
      type="file"
      accept="image/*,video/*"
      id="img"
      className={classes.inputFile}
      multiple
      maxLength={5}
    />
  </form>
)

deveria ser :

<div onSubmit={submitPost}>
    <input
      onChange={handleInputFile}
      type="file"
      accept="image/*,video/*"
      id="img"
      className={classes.inputFile}
      multiple
      maxLength={3}
    />
  </div>
)

Espero ayudar.

1
  • 1
    Sería bueno añadir una explicación acerca del cambio del form por un div. el 2 jul. 2021 a las 1:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.