Tengo un formulario que tiene onSubmit, en esa devolución de llamada tengo un uploady.showFileUpload(), pero se ejecuta el código después de uploady.showFileUpload().
Ahora la pregunta es ¿cómo puedo esperar a que se cargue y luego ejecutar el resto del código?
const handleSubmit2 = useCallback((e)=> { uploady.showFileUpload(); //(HERE SHOULD WAIT FOR IT TO FINISH FILE SELECT) //OTHER CODE });Este codesandbox debería ser útil en el caso de usar Uploady con un formulario: https://codesandbox.io/s/react-uploady-inside-form-ys1wx
La idea es que muestre el indicador de selección de archivos por separado del envío del formulario:
import React, { useState, useCallback, useMemo, forwardRef } from "react"; import Uploady, { useUploadyContext } from "@rpldy/uploady"; import { asUploadButton } from "@rpldy/upload-button"; const MyUploadField = asUploadButton( forwardRef(({ onChange, ...props }, ref) => { return ( <div {...props} ref={ref} id="form-upload-button" title={text}> Select file </div> ); }) ); const MyForm = () => { const [fields, setFields] = useState({}); const [fileName, setFileName] = useState(null); const uploadyContext = useUploadyContext(); const onSubmit = useCallback(() => { uploadyContext.processPending({ params: fields }); }, [fields, uploadyContext]); const onFieldChange = useCallback( (e) => { setFields({ ...fields, [e.currentTarget.id]: e.currentTarget.value }); }, [fields, setFields] ); return ( <form> <MyUploadField autoUpload={false} /> <input onChange={onFieldChange} id="field-name" type="text" placeholder="your name" /> <SubmitButton id="form-submit" type="button" onClick={onSubmit} > Submit Form </SubmitButton> </form> ); }; <Uploady clearPendingOnAdd destination={{ url: "[upload-url]" }} multiple={false} > <MyForm /> </Uploady> La selección se logra mediante el asUploadButton HOC . Por supuesto, puede hacerlo usted mismo como lo hizo con uploady.showFileUpload(); .
Luego, el botón Enviar usa el método processPending de uploady para comenzar a cargar.