Merge pull request #395 from transloadit/fix/paste

Fix pasting files, default `image` file name, add type to meta, file type refactor

examples/aws-presigned-url/main.js

@@ -25,7 +25,7 @@ uppy.use(AwsS3, {
       },
       body: JSON.stringify({
         filename: file.name,
-        contentType: `${file.type.general}/${file.type.specific}`
+        contentType: file.type
       })
     }).then((response) => {
       // Parse the JSON response.

examples/bundled-example/main.js

@@ -3,7 +3,7 @@ const Dashboard = require('../../src/plugins/Dashboard')
 // const GoogleDrive = require('../../src/plugins/GoogleDrive')
 const Dropbox = require('../../src/plugins/Dropbox')
 const Instagram = require('../../src/plugins/Instagram')
-// const Webcam = require('../../src/plugins/Webcam')
+const Webcam = require('../../src/plugins/Webcam')
 const Tus = require('../../src/plugins/Tus')
 // const XHRUpload = require('../../src/plugins/XHRUpload')
 // const FileInput = require('../../src/plugins/FileInput')
@@ -61,6 +61,7 @@ const uppy = Uppy({
   // .use(GoogleDrive, {target: Dashboard, host: 'http://localhost:3020'})
   .use(Dropbox, {target: Dashboard, host: 'http://localhost:3020'})
   .use(Instagram, {target: Dashboard, host: 'http://localhost:3020'})
+  .use(Webcam, {target: Dashboard})
   .use(Tus, {endpoint: TUS_ENDPOINT, resume: true})
   .use(MetaData, {
     fields: [

src/core/Core.js

@@ -268,7 +268,7 @@ class Uppy {
     }
 
     if (allowedFileTypes) {
-      const isCorrectFileType = allowedFileTypes.filter(match(file.type.mime)).length > 0
+      const isCorrectFileType = allowedFileTypes.filter(match(file.type)).length > 0
       if (!isCorrectFileType) {
         const allowedFileTypesString = allowedFileTypes.join(', ')
         this.info(`${this.i18n('youCanOnlyUploadFileTypes')} ${allowedFileTypesString}`, 'error', 5000)
@@ -306,25 +306,29 @@ class Uppy {
     }).then(() => {
       return Utils.getFileType(file).then((fileType) => {
         const updatedFiles = Object.assign({}, this.state.files)
-        const fileName = file.name || 'noname'
-        const fileExtension = Utils.getFileNameAndExtension(fileName)[1]
+        let fileName
+        if (file.name) {
+          fileName = file.name
+        } else if (fileType.split('/')[0] === 'image') {
+          fileName = fileType.split('/')[0] + '.' + fileType.split('/')[1]
+        } else {
+          fileName = 'noname'
+        }
+        const fileExtension = Utils.getFileNameAndExtension(fileName).extension
         const isRemote = file.isRemote || false
 
         const fileID = Utils.generateFileID(file)
-        const fileTypeGeneral = fileType[0]
-        const fileTypeSpecific = fileType[1]
 
         const newFile = {
           source: file.source || '',
           id: fileID,
           name: fileName,
           extension: fileExtension || '',
-          meta: Object.assign({}, { name: fileName }, this.getState().meta),
-          type: {
-            general: fileTypeGeneral,
-            specific: fileTypeSpecific,
-            mime: fileType.join('/')
-          },
+          meta: Object.assign({}, this.getState().meta, {
+            name: fileName,
+            type: fileType
+          }),
+          type: fileType,
           data: file.data,
           progress: {
             percentage: 0,
@@ -390,7 +394,7 @@ class Uppy {
    * Generate a preview image for the given file, if possible.
    */
   generatePreview (file) {
-    if (Utils.isPreviewSupported(file.type.specific) && !file.isRemote) {
+    if (Utils.isPreviewSupported(file.type) && !file.isRemote) {
       Utils.createThumbnail(file, 200).then((thumbnail) => {
         this.setPreviewURL(file.id, thumbnail)
       }).catch((err) => {
@@ -865,13 +869,13 @@ class Uppy {
   * @param {string} msg Message to be displayed by the informer
   */
 
-  info (message, type, duration) {
+  info (message, type = 'info', duration = 3000) {
     const isComplexMessage = typeof message === 'object'
 
     this.setState({
       info: {
         isHidden: false,
-        type: type || 'info',
+        type: type,
         message: isComplexMessage ? message.message : message,
         details: isComplexMessage ? message.details : null
       }

src/core/Core.test.js

@@ -288,7 +288,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => core.upload())
@@ -311,7 +311,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -339,7 +339,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -392,7 +392,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => core.upload())
@@ -421,7 +421,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -449,7 +449,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -504,7 +504,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -524,7 +524,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: fileData
         })
         .then(() => {
@@ -533,7 +533,7 @@ describe('src/Core', () => {
             extension: 'jpg',
             id: fileId,
             isRemote: false,
-            meta: { name: 'foo.jpg' },
+            meta: { name: 'foo.jpg', type: 'image/jpeg' },
             name: 'foo.jpg',
             preview: sampleImageDataURI,
             data: fileData,
@@ -547,7 +547,7 @@ describe('src/Core', () => {
             remote: '',
             size: 17175,
             source: 'jest',
-            type: { general: 'image', specific: 'jpeg', mime: 'image/jpeg' }
+            type: 'image/jpeg'
           }
           expect(core.state.files[fileId]).toEqual(newFile)
           newFile.preview = undefined // not sure why this happens.. needs further investigation
@@ -565,7 +565,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -585,7 +585,7 @@ describe('src/Core', () => {
       return expect(core.addFile({
         source: 'jest',
         name: 'foo.jpg',
-        type: 'image/jpg',
+        type: 'image/jpeg',
         data: null
       })).rejects.toMatchObject({ message: 'onBeforeFileAdded: a plain string' })
     })
@@ -604,7 +604,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -636,7 +636,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -669,7 +669,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -678,6 +678,7 @@ describe('src/Core', () => {
           core.updateMeta({ boo: 'moo', bur: 'fur' }, fileId)
           expect(core.state.files[fileId].meta).toEqual({
             name: 'foo.jpg',
+            type: 'image/jpeg',
             foo: 'bar',
             bur: 'fur',
             boo: 'moo'
@@ -692,7 +693,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -701,6 +702,7 @@ describe('src/Core', () => {
           core.emit('core:update-meta', { boo: 'moo', bur: 'fur' }, fileId)
           expect(core.state.files[fileId].meta).toEqual({
             name: 'foo.jpg',
+            type: 'image/jpeg',
             foo: 'bar',
             bur: 'fur',
             boo: 'moo'
@@ -716,7 +718,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -755,7 +757,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -763,7 +765,7 @@ describe('src/Core', () => {
             .addFile({
               source: 'jest',
               name: 'foo2.jpg',
-              type: 'image/jpg',
+              type: 'image/jpeg',
               data: utils.dataURItoFile(sampleImageDataURI, {})
             })
         }).then(() => {
@@ -798,7 +800,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {
@@ -806,7 +808,7 @@ describe('src/Core', () => {
             .addFile({
               source: 'jest',
               name: 'foo2.jpg',
-              type: 'image/jpg',
+              type: 'image/jpeg',
               data: utils.dataURItoFile(sampleImageDataURI, {})
             })
         }).then(() => {
@@ -866,13 +868,13 @@ describe('src/Core', () => {
       core.addFile({
         source: 'jest',
         name: 'foo1.jpg',
-        type: 'image/jpg',
+        type: 'image/jpeg',
         data: utils.dataURItoFile(sampleImageDataURI, {})
       })
       return expect(core.addFile({
         source: 'jest',
         name: 'foo2.jpg',
-        type: 'image/jpg',
+        type: 'image/jpeg',
         data: utils.dataURItoFile(sampleImageDataURI, {})
       })).rejects.toMatchObject({ message: 'File not allowed' }).then(() => {
         expect(core.state.info.message).toEqual('You can only upload 1 file')
@@ -892,7 +894,7 @@ describe('src/Core', () => {
       return expect(core.addFile({
         source: 'jest',
         name: 'foo2.jpg',
-        type: 'image/jpg',
+        type: 'image/jpeg',
         data: utils.dataURItoFile(sampleImageDataURI, {})
       })).rejects.toMatchObject({ message: 'File not allowed' }).then(() => {
         expect(core.state.info.message).toEqual('You can only upload: image/gif, image/png')
@@ -910,7 +912,7 @@ describe('src/Core', () => {
       return expect(core.addFile({
         source: 'jest',
         name: 'foo.jpg',
-        type: 'image/jpg',
+        type: 'image/jpeg',
         data: utils.dataURItoFile(sampleImageDataURI, {})
       })).rejects.toMatchObject({ message: 'File not allowed' }).then(() => {
         expect(core.state.info.message).toEqual('This file exceeds maximum allowed size of 1.2 KB')
@@ -1086,7 +1088,7 @@ describe('src/Core', () => {
       return core.addFile({
         source: 'jest',
         name: 'foo.jpg',
-        type: 'image/jpg',
+        type: 'image/jpeg',
         data: utils.dataURItoFile(sampleImageDataURI, {})
       }).then(() => {
         core.createUpload(Object.keys(core.state.files))
@@ -1121,7 +1123,7 @@ describe('src/Core', () => {
         .addFile({
           source: 'jest',
           name: 'foo.jpg',
-          type: 'image/jpg',
+          type: 'image/jpeg',
           data: utils.dataURItoFile(sampleImageDataURI, {})
         })
         .then(() => {

src/core/Utils.js

@@ -89,7 +89,9 @@ function runPromiseSequence (functions, ...args) {
   return promise
 }
 
-function isPreviewSupported (fileTypeSpecific) {
+function isPreviewSupported (fileType) {
+  if (!fileType) return false
+  const fileTypeSpecific = fileType.split('/')[1]
   // list of images that browsers can preview
   if (/^(jpeg|gif|png|svg|svg\+xml|bmp)$/.test(fileTypeSpecific)) {
     return true
@@ -114,21 +116,20 @@ function getArrayBuffer (chunk) {
 }
 
 function getFileType (file) {
-  const emptyFileType = ['', '']
   const extensionsToMime = {
     'md': 'text/markdown',
     'markdown': 'text/markdown',
     'mp4': 'video/mp4',
-    'mp3': 'audio/mp3'
+    'mp3': 'audio/mp3',
+    'svg': 'image/svg+xml'
   }
 
-  const fileExtension = getFileNameAndExtension(file.name)[1]
+  const fileExtension = file.name ? getFileNameAndExtension(file.name).extension : null
 
   if (file.isRemote) {
-    // some providers do not support for file types
-    let mime = file.type ? file.type : extensionsToMime[fileExtension]
-    const type = mime ? mime.split('/') : emptyFileType
-    return Promise.resolve(type)
+    // some remote providers do not support file types
+    const mime = file.type ? file.type : extensionsToMime[fileExtension]
+    return Promise.resolve(mime)
   }
 
   // 1. try to determine file type from magic bytes with file-type module
@@ -138,31 +139,25 @@ function getFileType (file) {
     .then((buffer) => {
       const type = fileType(buffer)
       if (type && type.mime) {
-        return type.mime.split('/')
+        return type.mime
       }
 
       // 2. if that’s no good, check if mime type is set in the file object
       if (file.type) {
-        return file.type.split('/')
+        return file.type
       }
 
       // 3. if that’s no good, see if we can map extension to a mime type
-      if (extensionsToMime[fileExtension]) {
-        return extensionsToMime[fileExtension].split('/')
+      if (fileExtension && extensionsToMime[fileExtension]) {
+        return extensionsToMime[fileExtension]
       }
 
       // if all fails, well, return empty
-      return emptyFileType
+      return null
     })
     .catch(() => {
-      return emptyFileType
+      return null
     })
-
-    // if (file.type) {
-    //   return Promise.resolve(file.type.split('/'))
-    // }
-    // return mime.lookup(file.name)
-    // return file.type ? file.type.split('/') : ['', '']
 }
 
 // TODO Check which types are actually supported in browsers. Chrome likes webm
@@ -182,12 +177,20 @@ function getFileTypeExtension (mimeType) {
   return mimeToExtensions[mimeType] || null
 }
 
-// returns [fileName, fileExt]
+/**
+* Takes a full filename string and returns an object {name, extension}
+*
+* @param {string} fullFileName
+* @return {object} {name, extension}
+*/
 function getFileNameAndExtension (fullFileName) {
   var re = /(?:\.([^.]+))?$/
   var fileExt = re.exec(fullFileName)[1]
   var fileName = fullFileName.replace('.' + fileExt, '')
-  return [fileName, fileExt]
+  return {
+    name: fileName,
+    extension: fileExt
+  }
 }
 
 /**

src/core/Utils.test.js

@@ -81,17 +81,17 @@ describe('core/utils', () => {
 
   describe('getFileNameAndExtension', () => {
     it('should return the filename and extension as an array', () => {
-      expect(utils.getFileNameAndExtension('fsdfjodsuf23rfw.jpg')).toEqual([
-        'fsdfjodsuf23rfw',
-        'jpg'
-      ])
+      expect(utils.getFileNameAndExtension('fsdfjodsuf23rfw.jpg')).toEqual({
+        name: 'fsdfjodsuf23rfw',
+        extension: 'jpg'
+      })
     })
 
     it('should handle invalid filenames', () => {
-      expect(utils.getFileNameAndExtension('fsdfjodsuf23rfw')).toEqual([
-        'fsdfjodsuf23rfw',
-        undefined
-      ])
+      expect(utils.getFileNameAndExtension('fsdfjodsuf23rfw')).toEqual({
+        name: 'fsdfjodsuf23rfw',
+        extension: undefined
+      })
     })
   })
 
@@ -176,7 +176,7 @@ describe('core/utils', () => {
         name: 'foo.webm'
       }
       return utils.getFileType(file).then(r => {
-        expect(r).toEqual(['audio', 'webm'])
+        expect(r).toEqual('audio/webm')
       })
     })
 
@@ -187,7 +187,7 @@ describe('core/utils', () => {
         data: 'sdfsdfhq9efbicw'
       }
       return utils.getFileType(file).then(r => {
-        expect(r).toEqual(['audio', 'webm'])
+        expect(r).toEqual('audio/webm')
       })
     })
 
@@ -197,7 +197,7 @@ describe('core/utils', () => {
         data: 'sdfsfhfh329fhwihs'
       }
       return utils.getFileType(file).then(r => {
-        expect(r).toEqual(['audio', 'mp3'])
+        expect(r).toEqual('audio/mp3')
       })
     })
 
@@ -207,7 +207,7 @@ describe('core/utils', () => {
         data: 'sdfsfhfh329fhwihs'
       }
       return utils.getFileType(file).then(r => {
-        expect(r).toEqual(['', ''])
+        expect(r).toEqual(null)
       })
     })
   })
@@ -243,7 +243,7 @@ describe('core/utils', () => {
 
   describe('isPreviewSupported', () => {
     it('should return true for any filetypes that browsers can preview', () => {
-      const supported = ['jpeg', 'gif', 'png', 'svg', 'svg+xml', 'bmp']
+      const supported = ['image/jpeg', 'image/gif', 'image/png', 'image/svg', 'image/svg+xml', 'image/bmp']
       supported.forEach(ext => {
         expect(utils.isPreviewSupported(ext)).toEqual(true)
       })

src/plugins/AwsS3/index.js

@@ -31,7 +31,7 @@ module.exports = class AwsS3 extends Plugin {
     }
 
     const filename = encodeURIComponent(file.name)
-    const type = encodeURIComponent(`${file.type.general}/${file.type.specific}`)
+    const type = encodeURIComponent(file.type)
     return fetch(`${this.opts.host}/s3/params?filename=${filename}&type=${type}`, {
       method: 'get',
       headers: { accept: 'application/json' }

src/plugins/Dashboard/Dashboard.js

@@ -33,7 +33,12 @@ module.exports = function Dashboard (props) {
       if (file.kind !== 'file') return
 
       const blob = file.getAsFile()
-      props.log('File pasted')
+      if (!blob) {
+        props.log('[Dashboard] File pasted, but the file blob is empty')
+        props.info('Error pasting file', 'error')
+        return
+      }
+      props.log('[Dashboard] File pasted')
       props.addFile({
         source: props.id,
         name: file.name,

src/plugins/Dashboard/FileCard.js

@@ -38,11 +38,11 @@ module.exports = function fileCard (props) {
     </div>
     ${props.fileCardFor
       ? html`<div class="UppyDashboardFileCard-inner">
-          <div class="UppyDashboardFileCard-preview" style="background-color: ${getFileTypeIcon(file.type.general, file.type.specific).color}">
+          <div class="UppyDashboardFileCard-preview" style="background-color: ${getFileTypeIcon(file.type).color}">
             ${file.preview
               ? html`<img alt="${file.name}" src="${file.preview}">`
               : html`<div class="UppyDashboardItem-previewIconWrap">
-                <span class="UppyDashboardItem-previewIcon" style="color: ${getFileTypeIcon(file.type.general, file.type.specific).color}">${getFileTypeIcon(file.type.general, file.type.specific).icon}</span>
+                <span class="UppyDashboardItem-previewIcon" style="color: ${getFileTypeIcon(file.type).color}">${getFileTypeIcon(file.type).icon}</span>
                 <svg class="UppyDashboardItem-previewIconBg" width="72" height="93" viewBox="0 0 72 93"><g><path d="M24.08 5h38.922A2.997 2.997 0 0 1 66 8.003v74.994A2.997 2.997 0 0 1 63.004 86H8.996A2.998 2.998 0 0 1 6 83.01V22.234L24.08 5z" fill="#FFF"/><path d="M24 5L6 22.248h15.007A2.995 2.995 0 0 0 24 19.244V5z" fill="#E4E4E4"/></g></svg>
               </div>`
             }

src/plugins/Dashboard/FileItem.js

@@ -21,7 +21,7 @@ module.exports = function fileItem (props) {
   const isPaused = file.isPaused || false
   const error = file.error || false
 
-  const fileName = getFileNameAndExtension(file.meta.name)[0]
+  const fileName = getFileNameAndExtension(file.meta.name).name
   const truncatedFileName = props.isWide ? truncateString(fileName, 15) : fileName
 
   const onPauseResumeCancelRetry = (ev) => {
@@ -47,11 +47,11 @@ module.exports = function fileItem (props) {
                   id="uppy_${file.id}"
                   title="${file.meta.name}">
       <div class="UppyDashboardItem-preview">
-        <div class="UppyDashboardItem-previewInnerWrap" style="background-color: ${getFileTypeIcon(file.type.general, file.type.specific).color}">
+        <div class="UppyDashboardItem-previewInnerWrap" style="background-color: ${getFileTypeIcon(file.type).color}">
           ${file.preview
             ? html`<img alt="${file.name}" src="${file.preview}">`
             : html`<div class="UppyDashboardItem-previewIconWrap">
-                <span class="UppyDashboardItem-previewIcon" style="color: ${getFileTypeIcon(file.type.general, file.type.specific).color}">${getFileTypeIcon(file.type.general, file.type.specific).icon}</span>
+                <span class="UppyDashboardItem-previewIcon" style="color: ${getFileTypeIcon(file.type).color}">${getFileTypeIcon(file.type).icon}</span>
                 <svg class="UppyDashboardItem-previewIconBg" width="72" height="93" viewBox="0 0 72 93"><g><path d="M24.08 5h38.922A2.997 2.997 0 0 1 66 8.003v74.994A2.997 2.997 0 0 1 63.004 86H8.996A2.998 2.998 0 0 1 6 83.01V22.234L24.08 5z" fill="#FFF"/><path d="M24 5L6 22.248h15.007A2.995 2.995 0 0 0 24 19.244V5z" fill="#E4E4E4"/></g></svg>
               </div>`
           }

src/plugins/Dashboard/getFileTypeIcon.js

@@ -1,6 +1,16 @@
 const { iconText, iconAudio, iconVideo, iconPDF } = require('./icons')
 
-module.exports = function getIconByMime (fileTypeGeneral, fileTypeSpecific) {
+module.exports = function getIconByMime (fileType) {
+  const defaultChoice = {
+    color: '#cbcbcb',
+    icon: ''
+  }
+
+  if (!fileType) return defaultChoice
+
+  const fileTypeGeneral = fileType.split('/')[0]
+  const fileTypeSpecific = fileType.split('/')[1]
+
   if (fileTypeGeneral === 'text') {
     return {
       color: '#000',
@@ -36,8 +46,5 @@ module.exports = function getIconByMime (fileTypeGeneral, fileTypeSpecific) {
     }
   }
 
-  return {
-    color: '#cbcbcb',
-    icon: ''
-  }
+  return defaultChoice
 }

website/src/docs/aws-s3.md

@@ -148,7 +148,7 @@ uppy
         },
         body: JSON.stringify({
           filename: file.name,
-          contentType: `${file.type.general}/${file.type.specific}`
+          contentType: file.type
         })
       }).then((response) => {
         // Parse the JSON response.