How to append files in another object ReactJS?

Question

I have an array of files for appending them in form data later, but first i need to compress them and append in new array of already compressed files. I'm stuck with appending files to new array in loop.

What i did tried:

const [compressedImages, setCompressedImages] = useState([]);

In loop:

setCompressedImages(...compressed) //it doesn't seem to work

one more try: (in loop)

compressedImages = [...compressed] //doesn't work

OR

compressedImages.push(compressed) //doesn't work

Why spread operator doesn't work in that case ?

What do I have

<input
       type="file"
       multiple
       onChange={e => selectImages(e)}
  />

Function selectImages:

const [images , setImages] = useState([]);
const selectImages = e => {
        setImages(e.target.files);
    }

Then I need to compress my files and append them all in another array.

for (let i = 0; i<images.length; i++){
            let compressed = await imageCompression(images[i], options)
            images = [...compressed]
            //at the end of the loop I must have exactly the same array as 'images' 
            //but with already processed files
        }

Navid Naseri · Accepted Answer · 2022-01-12 10:22:37Z

1

To add an element to an array state, you should create a new array based on current state and add the new element to it, then set the new array as state:

const [myState, setMyState] = useState([]);
// Add an element to state(long way)
myState.push('element');
setMyState(myState);
// Add an element to state(short way)
setMyState([...myState, 'element']);

edited Jan 12, 2022 at 10:22

answered Jan 12, 2022 at 9:55

Navid Naseri

1341 gold badge1 silver badge12 bronze badges

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

5 Comments

Grande amore Over a year ago

Uncaught (in promise) TypeError: compressed is not iterable

Navid Naseri Over a year ago

Try rechecking your variable names @Grandeamore

Grande amore Over a year ago

compressedImages setting by using setter setCompressedImages. I guess you meant: if i have: let compressed = await imageCompression(e,options); setCompressedImages([...compressed]) instead of suggested: setCompressedImages([...compressedImages]). But nevertheless it is not iterable

Navid Naseri Over a year ago

Is compressed an element that you want to add to compressedImages? If so, you can setCompressedImages([...compressedImages, compressed]) @Grandeamore

Grande amore Over a year ago

It is working ! Thanks! I used state.push in loop and put setter after loop.

Collectives™ on Stack Overflow

How to append files in another object ReactJS?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related