Estoy preparando un formulario que tiene campos para permitir que el usuario publique su foto y un video sobre sí mismo. Para publicar una imagen, preparé un componente basado en el archivo de tipo de entrada, pero para cargar un video usé React Dropzone. Ahora quiero guardar esto en redux, sin embargo, cuando trato de hacer eso, redux se queja de que es el elemento no serializable, y cuando lo pongo en JSON.Stringify () redux obtiene un objeto vacío. ¿Cuál sería la solución óptima para eso? Tengo que almacenarlo en algún lugar dentro del estado, en caso de que sea un estado local creado en este paso del formulario (afortunadamente es el último), sin embargo, si el usuario desea volver a cualquier paso anterior y volver estos datos se perderán

Por favor avise, el componente dropzone está debajo, onResult es solo un controlador que toma el valor y envía una acción a redux

 import React, { useCallback, useState } from "react"; import { useDropzone } from "react-dropzone"; export const FileDropzone = ({ onResult, fileTypes, maxFiles }) => { const [progress, setProgress] = useState(0); const [error, setError] = useState(false); const onDrop = useCallback(acceptedFiles => { acceptedFiles.forEach(file => { const reader = new FileReader(); reader.onerror = () => setError(true); reader.onprogress = data => { if (data.lengthComputable) { var progress = parseInt( (data.loaded / data.total) * 100, 10 ); setProgress(progress); } }; reader.onloadend = () => onResult(reader.result); reader.readAsArrayBuffer(file); }); }, []); const { getRootProps, getInputProps } = useDropzone({ onDrop, maxFiles, accept: fileTypes }); return ( <> <div className={`border border-${ error ? "danger" : "light" } rounded d-flex justify-content-center align-items-center hpx-100`} {...getRootProps()} > <input {...getInputProps()} /> <p>Proszę kliknąć, lub upuścić wybrany plik.</p> </div> <div className="bg-primary hpx-20 mt-1" style={{ width: `${progress}%` }} ></div> </> ); };

Gracias