• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

483
Views
@mantine dropzone Reaccionar problemas de carga de imágenes mientras se carga la imagen en el formulario de inicio de sesión

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>
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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> );
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error