Documentation for FileUpload API

[JoJ123]

Hi,
we migrated from Apollo Server.

Before we used with Apollo Server:

const uploadContent = await arg.file;
const { filename, createReadStream } = uploadContent.file;
const fileStream = createReadStream();
fileStream.pipe(writable);
...

I found already that:

• filename is replaced by name
• createReadStream with stream
  But it seems that stream() is not returning a readable stream, as we can't call stream().pipe(writeable) as we did before.

So we migrated some of our code to the following:

try {
  const writable = result.writable;

  for await (const chunk of readable) {
    writable.write(Buffer.from(chunk));
  }
} catch (err) {   
   if (onError) {
      await onError();
   }
   throw err;
}
await onFinish(result);

This is working fine, but anyway we have some other places where we make use of the pipe function.
Here we are checking file size, image sizes and so on during the upload.

Is there a way to get from Yoga also a readable stream - in the same way as with Apollo Server?
Is there a place where all the possible fields of the file object are listed?
Like: name, stream(), ...

Best,
Johannes

[ardatan]

It is actually graphql-upload-express that provides that API but GraphQL Yoga uses web standard File API which is also a Blob.

file.stream() gives you a ReadableStream which is a bit different from Node.js's Readable.

ReadableStream objects can be converted to Readables with Readable.from(readableStream) or you can create Buffer with Buffer.from(await file.arrayBuffer()). You can read more about this in Node.js documentation.

However Blob.size gives you the file size which can help you easily.

I hope all those information helps you.

[JoJ123]

Hi @ardatan,
When I add this:

const { name, stream } = arg.file;
const fileStream = stream();
const readable = Readable.from(fileStream);

We are getting the following error:
Cannot read private member from an object whose class did not declare it

[ardatan]

stream is the method of File class so you should probably not destruct it since it is not a function in a regular object but a method of a prototype.

const fileStream = args.file.stream();
const readable = Readable.from(fileStream);

[JoJ123]

Thx that was it ... Sometimes it's so close :D

[JoJ123]

Hi @ardatan,
we still face issues with the FileUpload, when we pipe the readable to our AzureBlob writable

1. With GraphQLUpload Middleware it's working fine
2. With GraphQL Yoga:
   1. With the following it's working fine:

   const buffer = Buffer.from(await arg.file.arrayBuffer());
   const readable = Readable.from(buffer);
   

   2. It's not working with that:

   const fileStream = arg.file.stream();
   const readable = Readable.from(fileStream);
   

Error with 2i:
Azure azure-storage\lib\common\streams\chunkstream.js:230:21: Uncaught Exception data.copy is not a function

Issues with 2ii:
It would mean that we first load the whole file on the server in memory and then forward it to Azure. I would prefer to not have all the files of our customers in memor, even for a short time.

Can you imagine what could be the issue?

[JoJ123]

I've fixed it with that flow. It seems that stream() is not returning a Readable as a Buffer. It's an UInt8Array. So transforming it to a Buffer before writing fixed the issue. Maybe this is helpful for others as well.

for await (const chunk of readable) {
   const data = Buffer.from(chunk);
   writable.write(data);
}

[ardatan]

@JoJ123 According to File spec, stream gives you chunks as Uint8array so I think that's what expected.