Light

cristovao-trevisan / express-multipart-file-parser Goto Github PK

View Code? Open in Web Editor NEW

51.0 3.0 8.0 22 KB

Parser for express that allows file upload with multipart/form-data, compatible with google cloud functions

License: MIT License

JavaScript 100.00%

expressjs middleware multipart-formdata file-upload cloud-functions

express-multipart-file-parser's Introduction

Express Multipart File Parser

Parser for express that allows file upload with multipart/form-data

Works with Google Cloud Functions

Usage

// default parser without destructuring
const fileParser = require('express-multipart-file-parser')

...
app.use(fileParser)
...

app.post('/file', (req, res) => {
  const {
    fieldname,
    originalname,
    encoding,
    mimetype,
    buffer,
  } = req.files[0]
  ...
})

Usage with Options

// must use destructuring for options
const { fileParser } = require('express-multipart-file-parser')

...
app.use(fileParser({
  rawBodyOptions: {
    limit: '15mb',
  },
  busboyOptions: {
    limits: {
      fields: 2
    }
  },
}))

Options

rawBodyOptions: see raw-body
busboyOptions: see busboy

express-multipart-file-parser's People

Contributors

Stargazers

Watchers

Forkers

crowd-studio danishack minotad66 amarcosos andriibulbuk riteshdalal ncains natanil-m

express-multipart-file-parser's Issues

I still get `missing multipart field` even after installing busboy for Cloud Functions

Firstly, thanks.

I'm trying to upload files through GraphQL to a Firebase Cloud Storage.

I've been using this in conjunction with Firebase Cloud Functions and an Apollo GraphQL Express Server. I am still getting the following error:
BadRequestError: Missing multipart field ‘operations’ (https://github.com/jaydenseric/graphql-multipart-request-spec). with a 400 bad request

Here is my cURL

curl 'http://localhost:5000/my-app/us-central1/api' -H 'accept: */*' -H 'Referer: http://localhost:3001/' -H 'Origin: http://localhost:3001' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36' -H 'Sec-Fetch-Mode: cors' -H 'Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryBEn54vJZH3hg1sBm' --data-binary $'------WebKitFormBoundaryBEn54vJZH3hg1sBm\r\nContent-Disposition: form-data; name="operations"\r\n\r\n{"operationName":"SingleUpload","variables":{"file":null},"query":"mutation SingleUpload($file: Upload\u0021) {\\n  singleUpload(file: $file) {\\n    filename\\n    mimetype\\n    encoding\\n    __typename\\n  }\\n}\\n"}\r\n------WebKitFormBoundaryBEn54vJZH3hg1sBm\r\nContent-Disposition: form-data; name="map"\r\n\r\n{"1":["variables.file"]}\r\n------WebKitFormBoundaryBEn54vJZH3hg1sBm\r\nContent-Disposition: form-data; name="1"; filename="00n0n_bEJWcIpml9s_600x450.jpg"\r\nContent-Type: image/jpeg\r\n\r\n\r\n------WebKitFormBoundaryBEn54vJZH3hg1sBm--\r\n' --compressed

My server setup looks like this:

const express = require('express')
const cors = require('cors');
const { ApolloServer } = require('apollo-server-express')
const fileParser = require('express-multipart-file-parser')
const schema = require('./schema')
const resolvers = require('./resolvers')

const app = express();
// cors allows our server to accept requests from different origins
app.use(cors());
app.options('*', cors());
app.use(fileParser)
// setup server
const server = new ApolloServer({
    typeDefs: schema,
    resolvers,
    introspection: true, // so we can access the playground in production reference: https://www.apollographql.com/docs/apollo-server/api/apollo-server/#constructor-options-lt-ApolloServer-gt
    playground: true,
    uploads: {
        // Limits here should be stricter than config for surrounding
        // infrastructure such as Nginx so errors can be handled elegantly by
        // graphql-upload:
        // https://github.com/jaydenseric/graphql-upload#type-processrequestoptions
        maxFileSize: 10000000, // 10 MB
        maxFiles: 1
    },
})
server.applyMiddleware({ app, path: '/', cors: true })

I've logged throughout your NPM module and I do get to this part

busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
    let fileBuffer = Buffer.from('')
    file.on('data', (data) => { fileBuffer = Buffer.concat([fileBuffer, data]) })
    console.log('here!!', file, filename)
    console.log('fileBuffer', fileBuffer)
    file.on('end', () => {
    req.files.push({
        fieldname,
        originalname: filename,
        encoding,
        mimetype,
        buffer: fileBuffer,
    })
    console.log('END!', fileBuffer)
    })
})

busboy.on('finish', () => {
    console.log( 'busboy finish')
    next()
})

Am I missing some small thing in my setup that I've overlooked?

Allow to pass custom parameters to Busboy

It'd be nice to allow passing custom parameters to Busboy (like, to define file size limit).

And, a HUGE THANKS for this library. This was the solution after almost 3 hours of search and struggle.

fileParser is not a function

when I try the destructuring in order to add options I get error "fileParser is not a function"

const {fileParser} = require('express-multipart-file-parser')

app.use(fileParser({
    rawBodyOptions: {
        limit: '15mb',
    },
    busboyOptions: {
        limits: {
            fields: 2,
        },
    },
}))

Docs Flaw

// default parser without destructuring
const fileParser = require('express-multipart-file-parser')

...
app.use(fileParser)
...

app.post('/file', (req, res) => {
  const {
    fieldname,
    filename,
    encoding,
    mimetype,
    buffer,
  } = req.files[0]
  ...
})

has to be

// default parser without destructuring
const fileParser = require('express-multipart-file-parser')

...
app.use(fileParser)
...

app.post('/file', (req, res) => {
  const {
    fieldname,
    originalname,
    encoding,
    mimetype,
    buffer,
  } = req.files[0]
  ...
})

filename --> originalname

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.