DEV Community

Cover image for 
Handling File Uploads with Apollo Server 2.0.

Handling File Uploads with Apollo Server 2.0.

Divine Hycenth on April 22, 2020

A comprehensive guide on how to upload files with Apollo-server 2.0 and Mongodb. ... Prerequisites Altair (Recommended alternative t...
Collapse
 
receiver412 profile image
Receiver412 • Edited

when i select file in frontend .the server crashed by it .
can you help me with it.
I have currently node js v14.17.0. thanks a lot.

RangeError: Maximum call stack size exceeded
at ReadStream.deprecated as open
at ReadStream.open (C:\Projects\pro\apollo-upload\node_modules\fs-capacitor\lib\index.js:90:11)
at _openReadFs (internal/fs/streams.js:117:12)
at ReadStream. (internal/fs/streams.js:110:3)
at ReadStream.deprecated as open
at ReadStream.open (C:\Projects\pro\apollo-upload\node_modules\fs-capacitor\lib\index.js:90:11)
at _openReadFs (internal/fs/streams.js:117:12)
at ReadStream. (internal/fs/streams.js:110:3)
at ReadStream.deprecated as open
at ReadStream.open (C:\Projects\pro\apollo-upload\node_modules\fs-capacitor\lib\index.js:90:11)
at _openReadFs (internal/fs/streams.js:117:12)
at ReadStream. (internal/fs/streams.js:110:3)
at ReadStream.deprecated as open
at ReadStream.open (C:\Projects\pro\apollo-upload\node_modules\fs-capacitor\lib\index.js:90:11)
at _openReadFs (internal/fs/streams.js:117:12)
at ReadStream. (internal/fs/streams.js:110:3)
[nodemon] app crashed - waiting for file changes before starting...

Collapse
 
dnature profile image
Divine Hycenth

Hi, Please provide a link to your code?

Collapse
 
receiver412 profile image
Receiver412

actually the version of node js (v14) that i have does not support that .but i switch it to version 12. now it works.

Thread Thread
 
dnature profile image
Divine Hycenth

Great!, If it works, don't touch it 😆

Thread Thread
 
receiver412 profile image
Receiver412

can you make example about multi file Upload .
I appreciate it .

Thread Thread
 
dnature profile image
Divine Hycenth • Edited

Hi, here's how I would go about it.

1: Modify the uploadFile mutation to accept an array of files

Mutation {
  uploadFile(files: [Upload!]!): [File!]!
}
Enter fullscreen mode Exit fullscreen mode

2: replace your upload file resolver with this:

uploadFile: async (_, { files }) => {
      mkdir("images", { recursive: true }, (err) => {
        if (err) throw err;
      });
      return files.map(async (file) => {
            const upload = await processUpload(file)
            await File.create(upload)
            return upload           
      })
 },
Enter fullscreen mode Exit fullscreen mode

Note: I haven't tested this out but I hope it works.

Thread Thread
 
receiver412 profile image
Receiver412

thanks a lot bro. it works.
have a nice day .

Thread Thread
 
dnature profile image
Divine Hycenth

I'm glad it worked :)
Enjoy your day!

Collapse
 
rklaeboe profile image
icemover • Edited

This is the start of a comprehensive and nicely written two-piece tutorial covering both the front and back end of file uploads with GraphQL. Divine Hycenth also shows how to overcome the limitation of plain apollo-server in that it does not easily allow downloading of the uploaded files. I can only say that this was super helpful and give my compliments on the quality of the write-up.

Collapse
 
andydenike profile image
AndyDeNike

Thank you Divine for the in-depth tutorial and in regards to "In the future i'm going to show you how to query the files from our images directory through the file path specified in the database." ..... Please make the future soon :D

Collapse
 
dnature profile image
Divine Hycenth

Here it is. dev.to/dnature/file-uploads-with-r...
Sorry for the late reply as i've been busy with so many other things.

Once again, thanks for your comment. It means a lot ot me :)

Collapse
 
andydenike profile image
AndyDeNike

To add to this, there is very scarce information on how to properly upload a profile image for a user, perhaps this could be integrated into the tutorial? Thanks again for your effort.

Collapse
 
ferslort profile image
Fernando Padilla

Hello, thank you very much for your contribution, but by following your recommendations as I have this problem on my console.

internal/fs/streams.js:150
function _openReadFs(stream) {
^

RangeError: Maximum call stack size exceeded

Collapse
 
dnature profile image
Divine Hycenth

I guess you're missing something somewhere. You can have a look at this repository to see how i did it. github.com/DNature/apollo-upload
Let me know if you still encounter another problem in the future.

Also, it's better to share your code via codesandbox or create a repository when trying to ask for help because it's difficult to debug a code you're can't see.

Best regards

Collapse
 
thomasgil92 profile image
ThomasGil

Hello, i had the same error, i just clone your repos => npm i=> npm run dev & npm start.
the file is correctly uploaded to the folder but nothing in the DB and this error appears in console.

Collapse
 
thomasgil92 profile image
ThomasGil

ok found where the problem come from for me. The f****g node version.
I don't have this error with node v12.
.*
Thanks to Divine and do the node update to v14 for now :)

Collapse
 
dnature profile image
Divine Hycenth

Cheers Thomas..
I might consider doing an upgrade to node v14 when it becomes stable. However, I tried node v14 months ago and i was having some issues with it so i won't recommend using node v14 until it becomes a LTS release.

Collapse
 
eriickson profile image
Erickson Manuel Holguín

Hello my friend, your explanations served me wonderfully, they work perfectly :) Thank you very much, but the problem lies when I migrate this to my express server that has apollo-server-express I add "app.use (" / graphql ", graphqlUploadExpress ({maxFileSize: 10000000, maxFiles: 10}));
"to connect it with express, but the request doesn't even reach the server, the frontend just shows me an error saying" Error: Network error: Unexpected token <in JSON at position 0 "

Collapse
 
dnature profile image
Divine Hycenth

Hi Erick. I'll be happy to help you debug it.
Hit me up on twitter twitter.com/DivineHycenth

Collapse
 
sajadghawami profile image
Sajad Ghawami

there isnt much resources about this topic so thank you very much for sharing this!!

Collapse
 
dnature profile image
Divine Hycenth

I'm glad you found this useful.

Collapse
 
ankush0694 profile image
Ankush0694

const { filename, mimetype, encoding, createReadStream } = await file;
console.log(filename);

try {
const stream = createReadStream();
console.log(stream);
} catch (error) {
throw error;
}

return { filename, mimetype, encoding };

this code is giving me Error : createReadStream() is not a function

Collapse
 
ahmedelamine profile image
ahmedelamine

it's not working for me the file is 0kby

Collapse
 
dnature profile image
Divine Hycenth

What issues did you encounter?.
Be sure to read through carefully.

Collapse
 
dnature profile image
Divine Hycenth

I sincerely appreciate everyone for taking their time to give me a thumbs up. It means a lot to me :)

Collapse
 
twabi profile image
Ahmed twabi

I keep getting a "createReadStream() is not a function".... I'm fairly new to backend, and I'm not sure what the issue could be

Collapse
 
yuregl profile image
Yure Galdino

Hello, how could I limit the file size?

Collapse
 
dnature profile image
Divine Hycenth

Hi Yure. I think this package could solve your problem npmjs.com/package/graphql-upload

Thank you for your patience :)