Merge pull request #173 from readmeio/fix/multipart-handling

Author: develohpanda

.jshintrc

@@ -1,4 +1,5 @@
 {
   "asi": true,
+  "browser": true,
   "node": true
 }

src/helpers/form-data.js

@@ -0,0 +1,105 @@
+/**
+ * @license https://raw.githubusercontent.com/node-fetch/node-fetch/master/LICENSE.md
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016 - 2020 Node Fetch Team
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ * Extracted from https://github.com/node-fetch/node-fetch/blob/64c5c296a0250b852010746c76144cb9e14698d9/src/utils/form-data.js
+ */
+
+const carriage = '\r\n'
+const dashes = '-'.repeat(2)
+
+const NAME = Symbol.toStringTag
+
+const isBlob = object => {
+  return (
+    typeof object === 'object' &&
+    typeof object.arrayBuffer === 'function' &&
+    typeof object.type === 'string' &&
+    typeof object.stream === 'function' &&
+    typeof object.constructor === 'function' &&
+    /^(Blob|File)$/.test(object[NAME])
+  )
+}
+
+/**
+ * @param {string} boundary
+ */
+const getFooter = boundary => `${dashes}${boundary}${dashes}${carriage.repeat(2)}`
+
+/**
+ * @param {string} boundary
+ * @param {string} name
+ * @param {*} field
+ *
+ * @return {string}
+ */
+function getHeader (boundary, name, field) {
+  let header = ''
+
+  header += `${dashes}${boundary}${carriage}`
+  header += `Content-Disposition: form-data; name="${name}"`
+
+  if (isBlob(field)) {
+    header += `; filename="${field.name}"${carriage}`
+    header += `Content-Type: ${field.type || 'application/octet-stream'}`
+  }
+
+  return `${header}${carriage.repeat(2)}`
+}
+
+/**
+ * @return {string}
+ */
+module.exports.getBoundary = () => {
+  // This generates a 50 character boundary similar to those used by Firefox.
+  // They are optimized for boyer-moore parsing.
+  var boundary = '--------------------------'
+  for (var i = 0; i < 24; i++) {
+    boundary += Math.floor(Math.random() * 10).toString(16)
+  }
+
+  return boundary
+}
+
+/**
+ * @param {FormData} form
+ * @param {string} boundary
+ */
+module.exports.formDataIterator = function * (form, boundary) {
+  for (const [name, value] of form) {
+    yield getHeader(boundary, name, value)
+
+    if (isBlob(value)) {
+      yield * value.stream()
+    } else {
+      yield value
+    }
+
+    yield carriage
+  }
+
+  yield getFooter(boundary)
+}
+
+module.exports.isBlob = isBlob

src/index.js

@@ -1,14 +1,19 @@
+/* eslint-env browser */
+
 'use strict'
 
 var debug = require('debug')('httpsnippet')
 var es = require('event-stream')
 var MultiPartForm = require('form-data')
+var FormDataPolyfill = require('form-data/lib/form_data')
 var qs = require('querystring')
 var reducer = require('./helpers/reducer')
 var targets = require('./targets')
 var url = require('url')
 var validate = require('har-validator/lib/async')
 
+const { formDataIterator, isBlob } = require('./helpers/form-data.js')
+
 // constructor
 var HTTPSnippet = function (data) {
   var entries
@@ -104,22 +109,59 @@ HTTPSnippet.prototype.prepare = function (request) {
       if (request.postData.params) {
         var form = new MultiPartForm()
 
+        // The `form-data` module returns one of two things: a native FormData object, or its own polyfill. Since the
+        // polyfill does not support the full API of the native FormData object, when this library is running in a
+        // browser environment it'll fail on two things:
+        //
+        //  - The API for `form.append()` has three arguments and the third should only be present when the second is a
+        //    Blob or USVString.
+        //  - `FormData.pipe()` isn't a function.
+        //
+        // Since the native FormData object is iterable, we easily detect what version of `form-data` we're working
+        // with here to allow `multipart/form-data` requests to be compiled under both browser and Node environments.
+        //
+        // This hack is pretty awful but it's the only way we can use this library in the browser as if we code this
+        // against just the native FormData object, we can't polyfill that back into Node because Blob and File objects,
+        // which something like `formdata-polyfill` requires, don't exist there.
+        const isNativeFormData = !(form instanceof FormDataPolyfill)
+
         // easter egg
-        form._boundary = '---011000010111000001101001'
+        const boundary = '---011000010111000001101001'
+        if (!isNativeFormData) {
+          form._boundary = boundary
+        }
 
         request.postData.params.forEach(function (param) {
-          form.append(param.name, param.value || '', {
-            filename: param.fileName || null,
-            contentType: param.contentType || null
-          })
+          const name = param.name
+          const value = param.value || ''
+          const filename = param.fileName || null
+
+          if (isNativeFormData) {
+            if (isBlob(value)) {
+              form.append(name, value, filename)
+            } else {
+              form.append(name, value)
+            }
+          } else {
+            form.append(name, value, {
+              filename: filename,
+              contentType: param.contentType || null
+            })
+          }
         })
 
-        form.pipe(es.map(function (data, cb) {
-          request.postData.text += data
-        }))
+        if (isNativeFormData) {
+          for (var data of formDataIterator(form, boundary)) {
+            request.postData.text += data
+          }
+        } else {
+          form.pipe(es.map(function (data, cb) {
+            request.postData.text += data
+          }))
+        }
 
-        request.postData.boundary = form.getBoundary()
-        request.headersObj['content-type'] = 'multipart/form-data; boundary=' + form.getBoundary()
+        request.postData.boundary = boundary
+        request.headersObj['content-type'] = 'multipart/form-data; boundary=' + boundary
       }
       break
 

src/targets/node/request.js

@@ -61,7 +61,7 @@ module.exports = function (source, options) {
           return
         }
 
-        if (param.fileName && !param.value) {
+        if (param.fileName) {
           includeFS = true
 
           attachment.value = 'fs.createReadStream("' + param.fileName + '")'
@@ -115,7 +115,7 @@ module.exports = function (source, options) {
       .push('});')
       .blank()
 
-  return code.join().replace('"JAR"', 'jar').replace(/"fs\.createReadStream\(\\"(.+)\\"\)"/, 'fs.createReadStream("$1")')
+  return code.join().replace('"JAR"', 'jar').replace(/'fs\.createReadStream\("(.+)"\)'/g, "fs.createReadStream('$1')")
 }
 
 module.exports.info = {

src/targets/php/http2.js

@@ -60,8 +60,8 @@ module.exports = function (source, options) {
 
       code.push('$body = new http\\Message\\Body;')
           .push('$body->addForm(%s, %s);',
-            Object.keys(fields).length ? helpers.convert(fields, opts.indent) : 'NULL',
-            files.length ? helpers.convert(files, opts.indent) : 'NULL'
+            Object.keys(fields).length ? helpers.convert(fields, opts.indent) : 'null',
+            files.length ? helpers.convert(files, opts.indent) : 'null'
           )
 
       // remove the contentType header

src/targets/shell/curl.js

@@ -44,10 +44,11 @@ module.exports = function (source, options) {
   switch (source.postData.mimeType) {
     case 'multipart/form-data':
       source.postData.params.map(function (param) {
-        var post = util.format('%s=%s', param.name, param.value)
-
-        if (param.fileName && !param.value) {
+        var post = ''
+        if (param.fileName) {
           post = util.format('%s=@%s', param.name, param.fileName)
+        } else {
+          post = util.format('%s=%s', param.name, param.value)
         }
 
         code.push('%s %s', opts.short ? '-F' : '--form', helpers.quote(post))

test/fixtures/output/http/1.1/application-form-encoded

@@ -1,6 +1,6 @@
-POST /har HTTP/1.1
-Content-Type: application/x-www-form-urlencoded
-Host: mockbin.com
-Content-Length: 19
-
+POST /har HTTP/1.1
+Content-Type: application/x-www-form-urlencoded
+Host: mockbin.com
+Content-Length: 19
+
 foo=bar&hello=world

test/fixtures/output/http/1.1/application-json

@@ -1,6 +1,6 @@
-POST /har HTTP/1.1
-Content-Type: application/json
-Host: mockbin.com
-Content-Length: 118
-
+POST /har HTTP/1.1
+Content-Type: application/json
+Host: mockbin.com
+Content-Length: 118
+
 {"number":1,"string":"f\"oo","arr":[1,2,3],"nested":{"a":"b"},"arr_mix":[1,"a",{"arr_mix_nested":{}}],"boolean":false}

test/fixtures/output/http/1.1/cookies

@@ -1,5 +1,5 @@
-POST /har HTTP/1.1
-Cookie: foo=bar; bar=baz
-Host: mockbin.com
-
+POST /har HTTP/1.1
+Cookie: foo=bar; bar=baz
+Host: mockbin.com
+
 

test/fixtures/output/http/1.1/custom-method

@@ -1,4 +1,4 @@
-PROPFIND /har HTTP/1.1
-Host: mockbin.com
-
+PROPFIND /har HTTP/1.1
+Host: mockbin.com
+