fix: encode filenames

packages/api/README.md

@@ -94,6 +94,8 @@ curl -X POST --data-binary @x.car -H 'Authorization: Bearer YOUR_API_KEY' http:/
 }
 ```
 
+You can also provide a name for the file using the header `X-NAME`, but be sure to encode the filename first. For example `LICENSE–MIT` should be sent as `LICENSE%E2%80%93MIT`.
+
 ### 🔒 `POST /upload`
 
 Upload a file for a root CID (maximum of 100 MB). _Authenticated_
@@ -105,6 +107,8 @@ curl -X POST --data-binary @file.txt -H 'Authorization: Bearer YOUR_API_KEY' htt
 }
 ```
 
+You can also provide a name for the file using the header `X-NAME`, but be sure to encode the filename first. For example `LICENSE–MIT` should be sent as `LICENSE%E2%80%93MIT`.
+
 ### 🔒 `GET /user/uploads`
 
 Get a list of user uploads. _Authenticated_

packages/api/src/car.js

@@ -149,7 +149,8 @@ export async function handleCarUpload (request, env, ctx, car, uploadType = 'Car
     backup(car, rootCid, user._id, env)
   ])
 
-  let name = headers.get('x-name')
+  const xName = headers.get('x-name')
+  let name = xName && decodeURIComponent(xName)
   if (!name || typeof name !== 'string') {
     name = `Upload at ${new Date().toISOString()}`
   }

packages/api/src/upload.js

@@ -15,11 +15,6 @@ export async function uploadPost (request, env, ctx) {
   const { headers } = request
   const contentType = headers.get('content-type') || ''
 
-  let name = headers.get('x-name')
-  if (!name || typeof name !== 'string') {
-    name = `Upload at ${new Date().toISOString()}`
-  }
-
   let input
   if (contentType.includes('multipart/form-data')) {
     const form = await toFormData(request)

packages/api/test/mocks/db/post_graphql.js

@@ -9,6 +9,15 @@ const gqlOkResponse = data => gqlResponse(200, { data })
  */
 module.exports = ({ body }) => {
   if (body.query.includes('createUpload')) {
+    // validate filename is decoded
+    const name = body.variables.data.name
+    const decoded = decodeURIComponent(body.variables.data.name)
+    if (name && name.includes('%') && !decoded.includes('%')) {
+      return gqlResponse(500, {
+        errors: [{ message: 'Filename was not decoded' }]
+      })
+    }
+
     return gqlOkResponse({
       createUpload: { content: { _id: 'test-content' } }
     })

packages/api/test/upload.spec.js

@@ -65,4 +65,24 @@ describe('POST /upload', () => {
     assert(cid, 'Server response payload has `cid` property')
     assert.strictEqual(cid, expectedCid, 'Server responded with expected CID')
   })
+
+  it('should decode filename from header', async () => {
+    const expectedName = 'filename–with–funky–chars'
+
+    // Create token
+    const token = await getTestJWT()
+
+    const res = await fetch(new URL('upload', endpoint), {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'X-Name': encodeURIComponent(expectedName)
+      },
+      body: new Blob(['hello world!'])
+    })
+
+    assert(res, 'Server responded')
+    // db mock throws 500 if filename was not decoded
+    assert(res.ok, 'Server response not ok: filename might not have been decoded.')
+  })
 })

packages/client/src/lib.js

@@ -137,7 +137,7 @@ class Web3Storage {
     let headers = Web3Storage.headers(token)
 
     if (name) {
-      headers = { ...headers, 'X-Name': name }
+      headers = { ...headers, 'X-Name': encodeURIComponent(name) }
     }
 
     const roots = await car.getRoots()

packages/client/test/put.spec.js

@@ -165,6 +165,19 @@ describe('putCar', () => {
     })
     assert.equal(cid, block.cid.toString(), 'returned cid matches the CAR')
   })
+
+  it('encodes filename for header', async () => {
+    const client = new Web3Storage({ token, endpoint })
+    const carReader = await createCar('hello world')
+    const expectedCid = 'bafybeiczsscdsbs7ffqz55asqdf3smv6klcw3gofszvwlyarci47bgf354'
+    const cid = await client.putCar(carReader, {
+      name: 'filename–with–funky–chars',
+      onRootCidReady: cid => {
+        assert.equal(cid, expectedCid, 'returned cid matches the CAR')
+      }
+    })
+    assert.equal(cid, expectedCid, 'returned cid matches the CAR')
+  })
 })
 
 function prepareFiles () {

packages/website/lib/api.js

@@ -1,6 +1,8 @@
 import { getMagic } from './magic'
 import constants from './constants'
 
+/** @typedef {{ name?: string } & import('web3.storage').Upload} Upload */
+
 export const API = constants.API
 
 const LIFESPAN = constants.MAGIC_TOKEN_LIFESPAN / 1000