forEach is not a function uploading multiple images to cloudinary

Question

I'm trying to upload images to cloudinary from my Vue2JS front. I already created function which upload correctly single image but I have problem with uploading multiple images in forEach loop.

upload(evt) {
    console.log(evt);
    let file = evt.target.files;
    const formData = new FormData();
    formData.append('file', file[0]);
    formData.append('upload_preset', this.cloudinary.uploadPreset);
    axios.post(this.cloudinary.url, formData)
        .then(res => {
            console.log(res.data.secure_url);
            this.offerData.thumbnail = res.data.secure_url;
        }, function (err) {
            console.log(err)
        });
},
uploadImages(evt) {
    console.log(evt);
    const formData = new FormData();
    evt.forEach(evt.target.files, function (file) {
        formData.append('file', file);
        formData.append('upload_preset', this.cloudinary.uploadPreset);
        axios.post(this.cloudinary.url, formData)
            .then(res => {
                console.log(res.data.secure_url);
            }, function (err) {
                console.log(err)
            });
    })
},

upload function is working correctly as I said. Later on I will combine those two functions into one but just for development I separate it because this second one function which is uploadImages is not working correctly..

evt.target.files is:

(click to make it bigger)

and error which show in console is:

Uncaught TypeError: evt.forEach is not a function

What I'm doing wrong?

Answer 1

forEach is a function of the Javascript Array. That looks like an object of type FileList.

You can iterate over object keys with a for loop, or by using Object.keys() to create an array of its keys and then iterate over those.

For example:

uploadImages(evt) {
    console.log(evt);
    const formData = new FormData();
    Object.keys(evt.target.files).forEach(function(key){
        let file = evt.target.files[key];
        formData.append('file', file);
        formData.append('upload_preset', this.cloudinary.uploadPreset);
        axios.post(this.cloudinary.url, formData)
            .then(res => {
                console.log(res.data.secure_url);
            }, function (err) {
                console.log(err)
            });
    });
}

Answer 2

The issue is you are trying to execute a forEach method on an Event , but Event does not have a forEach method

Even if you tried to do it with evt.target.files , that's a FileList , and does not have a forEach method

Borrowed from AJD's answer, with the following changes

• use Object.values instead of Object.keys - never interested in the key, so this removes the need to let file = evt.target.files[key]
• fix the possible issue with formData - you keep adding to a single one in the loop - I'd rather create a new one for each loop
• fix this being "lost" (by using arrow function)

The code then becomes

uploadImages(evt) {
    Object.values(evt.target.files).forEach(file => {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('upload_preset', this.cloudinary.uploadPreset);
        axios.post(this.cloudinary.url, formData)
            .then(res => {
                console.log(res.data.secure_url);
            }, err => {
                console.log(err)
            });
    });
}