question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple file uploads

See original GitHub issue

I have not found any example of uploading multiple files, so I’m opening this issue to see if someone could help.

So, I was able to create single file upload, but when it comes to multiple files upload I’ve been having problems. I did this little snippet to test it, but it only receives the first file of array.

TypeDefs:

const typeDefs = `
  scalar Upload

  type Post {
    id: ID!
    title: String!
    description: String!
    publishing_date: String!
    category: PostCategory!
    files: [String!]!
  }

  createPost(title: String!, description: String!, publishing_date: String!, category_id: ID!, files: [Upload!]!): Post
`

Resolver:

async createPost(_, { title, description, publishing_date, category_id, files }) {

  let process_upload = async upload => {
    let { filename, mimetype, encoding, createReadStream } = await upload
    let stream = createReadStream()
    filename = slugify(filename, { lower: true })
    console.log("============ TEST INI ============")
    console.log("stream: "+ stream)
    console.log("filename: "+ filename)
    console.log("mimetype: "+ mimetype)
    console.log("encoding: "+ encoding)
    console.log("========== TEST END ==========")
    return {
      stream,
      filename,
      mimetype,
      encoding
    }
  }

  Promise.all(files.map(process_upload)).then(async function(file_uploaded) {
    const util = require('util')
    console.log("INSPECT 1: " + util.inspect(file_uploaded[0], {showHidden: false, depth: null} ))
    console.log("x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x")
    console.log("INSPECT 2: " + util.inspect(file_uploaded[1], {showHidden: false, depth: null} ))
  })

}

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

6reactions
rafaelfesicommented, Sep 7, 2018

Thanks for the help @jaydenseric. I solved by following the example and understanding what was missing according to what you said.

My process_upload function is something like this, now:

let process_upload = async upload => {
  let { filename, mimetype, encoding, createReadStream } = await upload
  let stream = createReadStream()

  filename = slugify(filename, { lower: true })
  let path = '/tmp/'+ filename

  return new Promise((resolve, reject) =>
    stream
      .on('error', error => {
        if (stream.truncated)
          // Delete the truncated file
          fs.unlinkSync(path)
        reject(error)
      })
      // .on('data', (chunk) => {
      //   console.log('received ' + chunk.length + 'bytes of data')
      // })
      .pipe(fs.createWriteStream(path))
      // .on('error', error => reject(error))
      .on('finish', () => resolve({
        path, filename, mimetype, encoding
      }))
  )
}
1reaction
jaydensericcommented, Sep 4, 2018

The problem in that example is that each stream is not being promisified and used, awaiting the upload error or completion events. You can see an example of this here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I select and upload multiple files with HTML and PHP ...
This is just a sketch of a fully working answer. See PHP Manual: Handling file uploads for more information on proper, secure handling...
Read more >
How to allow multiple file uploads in HTML forms.
In this article, we will learn how to allow multiple files uploads in HTML forms. We use the multiple attributes, to allow multiple...
Read more >
Uploading multiple files - Manual - PHP
Multiple files can be uploaded using different name for input . It is also possible to upload multiple files simultaneously and have the...
Read more >
Multiple File Upload - Overview - OutSystems
Multiple File Upload ... Allow you to upload multiple files in one upload form or using drag and drop functionality. ... HTML 5...
Read more >
Multiple File Upload - Dribbble
Discover 2 Multiple File Upload designs on Dribbble. Your resource to discover and connect with designers worldwide.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found