this.$refs.selectedImages.files.map is not a function - vue electron

Question

I'm trying to use map function in my vue component. I have a file upload input that will accept multiple files. Since I'm working with electron, I can't pass directly the files to the backend of the app so I want to use the Array.prototype.map() function to get files path and proces them after passing the array using the ipcRenderer.send() function. Anyway I get always this error this.$refs.selectedImages.files.map is not a function how I can fix it?

Here is the actual code I'm trying

    handleFiles() {
      this.files = this.$refs.selectedImages.files.map( (file) => file.path ); //this will cause the error
    }, //
    processFiles() {
      this.isLoading = true;
    
      window.ipcRenderer.send('processFiles', this.files);
      
      window.ipcRenderer.on('', (event, data) => {
        console.log(ecent, data);
        saveAs(data, 'processed.mfs')
      });
    }

UPDATE

To try solve the problem I'm looping the FilesList to extract the path of each file and then pass it using ipcRenderer. The problem is that I'm not able to get the message on the background.js and I'm not sure why.

this.$refs.selectedImages.files.forEach( (file) => {
 this.files.push(file.path) // this will push into the array the path of each file
})

window.ipcRenderer.send('processFiles', this.files);

//background.js

import { ipcMain } from 'electron'

ipcMain.on('processFiles', (event, data) => {
 console.log(event, data) // the message will not arrive
})

Move your `ipcRenderer.on` statement into `created`. As it is above, you define a new renderer listener every time you call `processFiles`, and you send the first message before any listeners are defined. — Dan, Dec 05 '20 at 13:59

score 2 · Accepted Answer · answered Dec 05 '20 at 11:12

2

The FileList object is actually not an array, and has no .map method. But you can access the files like this:

const files = this.$refs.selectedImages.files;

for (var i = 0; i < files.length; i++) {
   console.log(files[i]);
}

answered Dec 05 '20 at 11:12

Dan

59,490
13
101
110

I nedd to pass the files using `ipcRenderer` of electron so I want to avoid to pass each single file and send multiple times the same event to backend, is there a better solution? – newbiedev Dec 05 '20 at 11:17
I don't use electron but it looks like you could send the whole `this.files` object as it is now. Try just removing the `.map` – Dan Dec 05 '20 at 11:19
I need to test but I was reading [this question](https://stackoverflow.com/questions/63081902/unable-to-pass-objects-arrays-in-ipcrenderer-an-object-could-not-be-cloned-even) and seems that the file object can't be passed using `ipcRenderer` ? If I try I get `Error: An object could not be cloned.` – newbiedev Dec 05 '20 at 11:23
Ok I see. It looks like that question/answers is using a `path` property that I don't see on the individual file objects, so I'm not sure. I don't use electron, I thought your issue was only with trying to use `.map` on a `FileList` object – Dan Dec 05 '20 at 11:30
using map on the file object will give me the error as the title of this question. I've tried to do a `forEach` on the file list object and then push into an array the `files.path` but the it seems that the `ipcRenderer` isn't sending the data to `ipcMain`. – newbiedev Dec 05 '20 at 11:40
Right, the `.map` error is the one I explained how to fix. Since I don't use electron, I can't help with the problem specific to electron. As I said in my earlier comment, there is no `.path` property on these file objects. Check the console when using my answer to see what properties are available. – Dan Dec 05 '20 at 12:10
not right, I have the path for each file in the list and I can log it in the console, maybe it's not available for file upload on the web, but electron works locally :) – newbiedev Dec 05 '20 at 12:13

this.$refs.selectedImages.files.map is not a function - vue electron

1 Answers1