From d5823f10ecdface42caffe99e10955a100b2ad7b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 10 Dec 2015 17:54:33 +0100
Subject: [PATCH] Use mime types for input's accept property as safari doesn't
 play nicely with just the extensions

---
 .../ascribe_uploader/react_s3_fine_uploader_utils.js | 12 ++++++++----
 js/constants/mime_types.js                           | 11 +++++++++++
 2 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 js/constants/mime_types.js

diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js b/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
index ed76c5e8..a03965a4 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
@@ -1,11 +1,13 @@
 'use strict';
 
+import MimeTypes from '../../constants/mime_types';
+
 export const formSubmissionValidation = {
     /**
      * Returns a boolean if there has been at least one file uploaded
      * successfully without it being deleted or canceled.
      * @param  {array of files}  files provided by react fine uploader
-     * @return {boolean}       
+     * @return {boolean}
      */
     atLeastOneUploadedFile(files) {
         files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
@@ -69,12 +71,14 @@ export function displayValidProgressFilesFilter(file) {
  *
  * Takes an array of file extensions (['pdf', 'png', ...]) and transforms them into a string
  * that can be passed into an html5 input via its 'accept' prop.
- * @param  {array} allowedExtensions Array of strings without a dot prefixed
+ * @param  {array}  allowedExtensions Array of strings without a dot prefixed
  * @return {string}                   Joined string (comma-separated) of the passed-in array
  */
 export function transformAllowedExtensionsToInputAcceptProp(allowedExtensions) {
-    // add a dot in front of the extension
-    let prefixedAllowedExtensions = allowedExtensions.map((ext) => '.' + ext);
+    // Get the mime type of the extension if it's defined or add a dot in front of the extension
+    let prefixedAllowedExtensions = allowedExtensions.map((ext) => {
+        return MimeTypes[ext] || ('.' + ext);
+    });
 
     // generate a comma separated list to add them to the DOM element
     // See: http://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file
diff --git a/js/constants/mime_types.js b/js/constants/mime_types.js
new file mode 100644
index 00000000..215ac20e
--- /dev/null
+++ b/js/constants/mime_types.js
@@ -0,0 +1,11 @@
+'use strict';
+
+const MimeTypes = {
+    'jpg': 'image/jpeg',
+    'jpeg': 'image/jpeg',
+    'gif': 'image/gif',
+    'pdf': 'application/pdf',
+    'png': 'image/png'
+};
+
+export default MimeTypes;