DEV Community

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...

Read full post

Receiver412 • Jun 7 '21 • 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...

Divine Hycenth • Jun 19 '21

Hi, Please provide a link to your code?

Receiver412 • Jun 23 '21

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

Divine Hycenth • Jun 23 '21

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

Receiver412 • Jun 24 '21

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

Divine Hycenth • Jul 2 '21 • 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!]!
}

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           
      })
 },

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

Receiver412 • Jul 9 '21

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

Divine Hycenth • Jul 9 '21

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

icemover • Jun 7 '20 • 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.

AndyDeNike • Jun 7 '20

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

Divine Hycenth • Jun 24 '20

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 :)

AndyDeNike • Jun 8 '20

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.

Fernando Padilla • Jun 25 '20

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

Divine Hycenth • Jun 27 '20

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

ThomasGil • Sep 23 '20

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.

ThomasGil • Sep 23 '20

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 :)

Divine Hycenth • Oct 1 '20

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.

Erickson Manuel Holguín • Sep 28 '20

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 "

Divine Hycenth • Oct 1 '20

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

Sajad Ghawami • Apr 23 '20

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

Divine Hycenth • Apr 24 '20

I'm glad you found this useful.

Ankush0694 • Jul 25 '21

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

ahmedelamine • Dec 20 '20

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

Divine Hycenth • Dec 20 '20

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

Divine Hycenth • Jun 24 '20

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

Ahmed twabi • Oct 21 '21

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

Yure Galdino • Jul 7 '20

Hello, how could I limit the file size?

Divine Hycenth • Dec 20 '20

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

Thank you for your patience :)