Escape html characters when creating a public id (default) (#122)

* Escape html characters when creating a public id (default)

* v4.5.6

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-hoc",
-  "version": "4.5.5",
+  "version": "4.5.6",
   "description": "React HOCs",
   "main": "lib/index.js",
   "module": "esm/index.js",

src/cloudinaryUploader.js

@@ -74,9 +74,10 @@ const DEFAULT_REQUEST_OPTIONS = {
   mode: 'cors',
 }
 
-// The default public id creator just returns the name of the file.
+// The default public id creator returns the sanitized name of the file via html escaping.
+// Source: https://support.cloudinary.com/hc/en-us/articles/115001317409--Legal-naming-conventions
 function defaultCreatePublicId (file) {
-  return file.name
+  return encodeURIComponent(file.name)
 }
 
 // Removes file extension from file name if asset is an image or pdf
@@ -141,4 +142,4 @@ function cloudinaryUploader (options={}) {
     }
 }
 
-export default cloudinaryUploader
+export default cloudinaryUploader

test/cloudinary-uploader.test.js

@@ -122,6 +122,22 @@ test('cloudinaryUploader adds extension to `publicId` of raw files', () => {
   })
 })
 
+test('cloudinaryUploader adds html escaping to the default `publicId`', () => {
+  const illegallyNamedFile = { name: 'Final \\ Master Schedule? #S1&S2 <100%>.pdf', type: 'application/pdf' }
+  const forbiddenPattern = /[?&#\\<>]/
+
+  const Wrapped = () => <h1>Howdy</h1>
+  const Wrapper = cloudinaryUploader({ ...props })(Wrapped)
+  const component = shallow(<Wrapper />)
+  const { upload } = component.props()
+
+  return upload(fileData, illegallyNamedFile).then(response => {
+    component.update()
+    const responseJson = JSON.parse(response.body)
+    expect(responseJson.public_id).not.toMatch(forbiddenPattern)
+  })
+})
+
 test('cloudinaryUploader throws an error if request fails', () => {
   const Wrapped = () => <h1>Hi</h1>
   const Wrapper = cloudinaryUploader({ ...props, endpoint: '/failure' })(Wrapped)
@@ -146,4 +162,4 @@ test('cloudinaryUploader updates the `uploadStatus` prop if request fails', () =
     const { uploadStatus } = component.props()
     expect(uploadStatus).toEqual('upload-failure')
   })
-})
+})