Javascript – How do I clone a DOM node in React?

If you want to display the file name and upload progress in a different part of the page without duplicating the file upload logic, you can use React’s Context API or state management libraries like Redux.

An example using React Context:

import React, { createContext, useContext, useState } from 'react';

const FileUploadContext = createContext();

const FileUploadProvider = ({ children }) => {
  const [file, setFile] = useState(null);
  const [progress, setProgress] = useState(0);

  const uploadFile = async () => {
    // Your file upload logic here
    // Update progress as needed
    // You can use setProgress to update the progress in the context
  };

  return (
    <FileUploadContext.Provider value={{ file, progress, uploadFile }}>
      {children}
    </FileUploadContext.Provider>
  );
};

const FileUploader = () => {
  const { file, progress, uploadFile } = useContext(FileUploadContext);

  return (
    <div>
      {/* Your file upload UI and logic here */}
      {file && <p>File: {file.name}</p>}
      {progress > 0 && <p>Progress: {progress}%</p>}
    </div>
  );
};

const AnotherComponent = () => {
  const { file, progress } = useContext(FileUploadContext);

  return (
    <div>
      {/* Display file name and progress in a different part of the page */}
      {file && <p>File: {file.name}</p>}
      {progress > 0 && <p>Progress: {progress}%</p>}
    </div>
  );
};

const App = () => {
  return (
    <FileUploadProvider>
      <FileUploader />
      {/* Render FileUploader wherever needed */}
      <AnotherComponent />
      {/* Render AnotherComponent wherever needed */}
    </FileUploadProvider>
  );
};

export default App;