FileList is supported but not an array/object with multiple files.

Hi. I’m facing with an issue where I’m able to get multiple files when making a simple <input type="file" multiple> but I’m facing issues when trying to integrate Dropzone UI which is giving me back an Array of files.

I’m using type-graphql with apollo-server-exprees. Here is my resolver:

@Mutation(() => Boolean)
@UseMiddleware(isAdmin)
async fileUpload(
  @Arg('files', () => [GraphQLUpload])
  filesArray: Array<FileUpload>,
) {
  filesArray.map(async (item) => {
    const { createReadStream, filename } = await item;

    const fileRenamer = (filename: string): string => {
      const queHoraEs = Date.now();
      const regex = /[\s_-]/gi;
      const fileTemp = filename.replace(regex, '.');
      let arrTemp = [fileTemp.split('.')];
      return `${arrTemp[0]
        .slice(0, arrTemp[0].length - 1)
        .join('_')}${queHoraEs}.${arrTemp[0].pop()}`;
    };

    const stream = createReadStream();
    const assetUniqName = fileRenamer(filename);
    const pathName = path.join(__dirname, `../uploads/${assetUniqName}`);
    await stream.pipe(fs.createWriteStream(pathName));
    const urlForArray = `${process.env.SERVER_URL}/${assetUniqName}`;
    console.log(urlForArray);
  });
  return true;
}

And here is a picture of what I send (In the top the ‘failing’ in the bottom the ‘success’. In the top I manually made an object with the array of files I get from dropzone in the bottom is what I get from the regular input file)

I find out that FileList is a read-only and we can’t create one from 0. So I’m stuck here. Also Attaching a picture of the answer I get from the BE.

And this of course is only happening when trying to push from the Object I created or from the Array I got from Dropzone (tried both ways).

Any help is very much appreciated.

[mateusmx]

Hi @jaydenseric. I was able to make it work. Apparently when I was sending the array from the Dropzone integration, it was being ‘rejected’ with the errors shared before. So what was needed to do is to iterate that array from Dropzone and create a new one with only the file. I’ll try to get sometime to write an article and share it so more persons can solve this.

Thank you so much for your help.

[jaydenseric]

@mateusmx consider carefully this part of your query: $files: [Upload!]!. What you are doing in variables JSON is not that. You are doing an array that incorrectly contains objects that have the Upload scalar nested a layer deeper.