Intenté obtener la ruta de la imagen con Dropzone de esta manera {...form.getInputProps("tourImages")} pero da undefined . Además, intenté obtener una entrada de imagen con ganchos useState, la ruta de la imagen se muestra pero no se muestra dentro del formulario. Por favor, vea lo siguiente:
const getImage = (imageFile: any) => { setImageUpload(imageFile[0].path); }; const [imageUpload, setImageUpload] = useState( ); const form = useForm({ schema: joiResolver(schema), initialValues: { name: "", sername: "", email: "", tourImages : "" , imageUpload, }, }); <Dropzone onDrop={(files) => { getImage(files); }} onReject={(files) => console.log("rejected files", files)} maxSize={3 * 1024 ** 2} accept={IMAGE_MIME_TYPE} {...form.getInputProps("tourImages")} > {(status) => dropzoneChildren(status, theme)} </Dropzone>Con el proveedor de zona de caída de Mantine, puede cargar sus archivos con el parámetro de archivos en el método onDrop={}. Esta función onDrop llama después de que el archivo seleccionado del usuario sea exitoso. Entonces, después de la selección de archivos, podrá cargar sus archivos para cargar el servidor con una solicitud de datos de formulario/partes múltiples usando Fetch Api como se muestra a continuación. Si quieres validar subir url. Debe pasar la cadena de URL devuelta por API para reaccionar al estado al final del método onDrop().
Ejemplo de uso de Dropzone:
export default function DropzoneExample() { return ( <Dropzone multiple={false} onDrop={(files) => { console.log(files); const formData = new FormData(); formData.append('file', files[0]); fetch('http://MY_UPLOAD_SERVER.COM/api/upload', { method: 'POST', headers: { 'Content-Type': 'multipart/form-data' }, body: formData }).then(res => { const respJson = res.json(); // console.log("File uploaded", respJson); // TODO: Update ui and states.... // setUploads(respJson.url); return respJson; }).catch(err => { console.log("File upload error", err); // TODO: Update ui and states with error.... }); }} onReject={(files) => console.log('rejected files', files)} accept={IMAGE_MIME_TYPE} > {(status) => dropzoneChildren(status, theme)} </Dropzone> ); } const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) => ( <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}> <ImageUploadIcon status={status} style={{ color: getIconColor(status, theme) }} size={80} /> <div> <Text size="xl" inline> Drag images here or click to select files </Text> <Text size="sm" color="dimmed" inline mt={7}> Attach as many files as you like, each file should not exceed 5mb </Text> </div> </Group> );