File is replacing file, not adding in React (Next.js)

Question

Please review my code first.

const test = () => {

const [files, setFiles] = useState ([]);

//I think I have to edit following statement.

const handleFile = (e) => {
   const newFiles = []
   for (let i=0; i < e.target.files.length; i++) {
       newFiles.push(e.target.files[i])
    }
        setFiles(newFiles)
};

return (

   {files.map((file, index) => (
     <div>
       <div key={index}>
         <p>
         {file.name}
         </p>
         <Button size='small' onClick={() => {deleteSelectedFile(file.name)}}>
         Delete
         </Button>
       </div>
     </div>
    ))}

    <div>
        <label onChange={handleFile}>
            <input type='file' multiple />+ Attach File
        </label>
    </div>

)

}

with handleFile statement, I can appropriately get the files.

However, when I upload one file at a time and then upload one file again,

the file is not added. the file replaces file.

There is not problem when I upload multiple time at once.

For example, I upload 'hello.jpg', and it renders well in the screen. Then, I upload 'goodbye.jpg', it renders well, but 'goodbye.jpg' replaces 'hello.jpg'.

Therefore, what I see is just 'goodbye.jpg' [button], not

'hello.jpg' [button] 'goodbye.jpg' [button]

.

I want my files to stacked up, without replacing.

I need some wisdom!

HichamELBSI · Accepted Answer · 2021-12-24 19:17:01Z

1

In my opinion, you only need to spread the prev state values and the files during the change event.

import { useState } from "react";

export default function App() {
  const [files, setFiles] = useState([]);

  const handleChange = (e) => {
    // This is what you need
    setFiles((prev) => [...prev, ...Object.values(e.target.files)]);
  };

  return (
    <div>
      <label onChange={handleChange}>
        <input type="file" multiple />
      </label>
      {files.map((file) => {
        return <p>{file.name}</p>;
      })}
    </div>
  );
}

answered Dec 24, 2021 at 19:17

HichamELBSI

1,70914 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aden Lee Over a year ago

Wow. this works so well. Can you tell me little more how your statement works? I'm totally lost but so glad it works. Thank you so much!

HichamELBSI Over a year ago

You can use a function inside the setState function to get the current state value and return whatever you want to replace the state. What you want here is the current value of the state + the value you added. So, you just need to return the merged arrays => [prev, current]

labs · Accepted Answer · 2021-12-24 19:29:03Z

0

how about you don't create a new variable for new files, you just set the state for the files since it's an array

setFiles(oldFile => [...oldFile,e.target.files[i]]);

If it's possible you can drop a codepen link

answered Dec 24, 2021 at 19:29

labs

1,3072 gold badges9 silver badges10 bronze badges

2 Comments

Aden Lee Over a year ago

Thank you so much. I learned a lot. I never thought about this way.

labs Over a year ago

sure , you are welcome

Collectives™ on Stack Overflow

File is replacing file, not adding in React (Next.js)

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related