necesito mostrar el contenido del archivo que elijo dentro del selector de archivos. He mostrado su nombre en la barra de navegación y cuando hago clic en su nombre me lleva a la otra pestaña en blanco en la que necesito que se muestre su contenido. Solo necesito tener habilitados los tipos de archivos pdf y jpeg, no otros. Este componente de carga se representa dentro de una página, que luego se representa dentro del componente de la aplicación. Aquí está mi código para el cargador:

 import React, { useState, useEffect, useContext } from "react"; import { useDropzone } from "react-dropzone"; import Upload from "./pictures/fileUpload.png"; import { fileContext } from "../context/context"; function Uploading() { const { setFileName } = useContext(fileContext); const { getRootProps, getInputProps, acceptedFiles } = useDropzone({ noDrag: true, }); // Logging the selected files to the console. // console.log(acceptedFiles); useEffect(() => { if (acceptedFiles.length === 0) { console.log("No Uploaded Files. Upload .pdf or .jpeg file !"); } else { setFileName(acceptedFiles[0].name); window.localStorage.setItem("fileName", `${acceptedFiles[0].name}`); } }, [acceptedFiles]); return ( <section className="container w-full h-full text-center"> <div {...getRootProps({ className: "dropzone h-full" })}> <input {...getInputProps()} type="file" /> <img src={Upload} className="mx-auto cursor-pointer " alt="" /> <label class="text-2xl">Choose Document</label> </div> </section> ); } export default Uploading;