I am taking image as an input in one component, however for rendering the image in another component, I want to pass the image from this component to another. I have an idea about how to pass file properties such as name, size and type but don't know how to pass the file itself. Is there any way to do so? I am taking the input in child component, and then I want to pass the file to the parent component

CodePudding user response：

state should be on top component and then passed down as props to the child components states gets passed down and action gets passed up

by following this method you can pass file from child component to parent

CodePudding user response：

If you are making child to parent (instead of parent to child) communication, the idiomatic way of passing data through that pipeline is to use a React Context.

Create a file named contexts/file.js that will expose the initial context.

import {createContext} from "react";

export const FileContext = createContext();

Create a file named hooks/file.js that will be defining a custom hook to use the created context.

import {useContext} from "react";
import {FileContext} from "../contexts/file";

export const useFile = () => useContext(FileContext);

Create a file named providers/file.jsx that will expose the wanted values (a state for storing the File and a function to update the value of that state). If you need more features for your file communication, this is where you can add them and expose them for all of your components.

import React, {useState, useMemo} from "react";
import {FileContext} from "../contexts/file";

export const FileProvider = ({children}) => {
  const [file, setFile] = useState("");
  const value = useMemo(() => ({file, setFile}), [file, setFile]);

  return (
    <FileContext.Provider value={value}>
      {children}
    </FileContext.Provider>
  );
};

Add the provider inside your main entry point so that every components defined inside your main app component will have access to the exposed values from the provider.

import React, {StrictMode} from "react";
import {createRoot} from "react-dom/client";
import {FileProvider} from "./providers/file";
import App from "./components/app";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <FileProvider>
      <App />
    </FileProvider>
  </StrictMode>
);

Now, you can create the parent component that will be using the custom file hook to retrieve the file and listen for file changes.

import React, {useEffect} from "react";
import {useFile} from "../hooks/file";

const ParentComponent = ({children}) => {
  const {file} = useFile();

  useEffect(() => {
    console.log("[PARENT] File has changed");
    console.log(file);
  }, [file]);

  return (
    <>
      <h1>
        Parent
      </h1>
      {children}
    </>
  );
};

export default ParentComponent;

And your child component that will also be using the custom hook to retrieve the provided function to update the file (and so, sending it to the parent).

import React, {useCallback} from "react";
import {useFile} from "../hooks/file";

const ChildComponent = () => {
  const {setFile} = useFile();

  const handleFileChange = useCallback(changeEvent => {
    console.log("[CHILD] passing the file to the parent...");
    setFile(changeEvent.currentTarget.files[0]);
  }, [setFile]);

  const handleFormSubmit = useCallback(submitEvent => {
    submitEvent.preventDefault();
  }, []);

  return (
    <>
      <h2>
        Child
      </h2>
      <form onSubmit={handleFormSubmit}>
        <input type="file" onChange={handleFileChange} />
      </form>
    </>
  );
};

export default ChildComponent;

Now you can add these to your main app component.

import React from "react";
import ParentComponent from "./parent";
import ChildComponent from "./child";

const App = () => (
  <ParentComponent>
    <ChildComponent />
  </ParentComponent>
);

export default App;

Now you can communicate from the child to the parent, or even from parent to child, or from any arbitrary nested component tree configuration with your newly created context provider.

You can find more informations on:

• React Context
• React custom hook

CodePudding user response：

You can import images / their sources in a react component like this

import NameOfImage from '../../assets/file-name.jpg';

And then have that as a source or a prop to pass

<img src={NameOfImage}" />
//Or pass it to a component 
<Component image={NameOfImage} />

I've added a solution for changing state between components.

import { useEffect, useState } from "react";

const UploadImageForm = (props) => {
  const [image, setImage] = useState();

  const imageUpload = (e) => {
    const uploadedImagePath = e.target.files[0];
    setImage(URL.createObjectURL(uploadedImagePath));
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    props.setUploadedImage(image);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="file" onChange={(e) => imageUpload(e)} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
};

const UploadedImage = (props) => {
  if (props.uploadedImage) {
    return <img src={props.uploadedImage} alt="Uploaded image" />;
  }
  return <h2>No image uploaded</h2>;
};

export default function App() {
  const [uploadedImage, setUploadedImage] = useState();

  return (
    <div className="App">
      <UploadImageForm
        uploadedImage={uploadedImage}
        setUploadedImage={setUploadedImage}
      />
      <UploadedImage uploadedImage={uploadedImage} />
    </div>
  );
}