Using extensions as accepted files is now possible.

Closes dropzone#182

Author: enyo

src/dropzone.coffee

@@ -91,13 +91,17 @@ class Dropzone extends Em
     # property, and if the Dropzone is clickable this will be used as
     # `accept` attribute.
     # 
+    # This is a comma separated list of mime types or extensions. E.g.:
+    # 
+    #     audio/*,video/*,image/png,.pdf
+    # 
     # See https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept
     # for a reference.
-    acceptedMimeTypes: null # eg: "audio/*,video/*,image/*"
+    acceptedFiles: null
 
     # @deprecated
-    # Use acceptedMimeTypes instead.
-    acceptParameter: null
+    # Use acceptedFiles instead.
+    acceptedMimeTypes: null
 
     # If false, files will not be added to the process queue automatically.
     # This can be useful if you need some additional user input before sending
@@ -381,7 +385,12 @@ class Dropzone extends Em
 
     throw new Error "No URL provided." unless @options.url
 
-    throw new Error "You can't provide both 'acceptParameter' and 'acceptedMimeTypes'. 'acceptParameter' is deprecated." if @options.acceptParameter and @options.acceptedMimeTypes
+    throw new Error "You can't provide both 'acceptedFiles' and 'acceptedMimeTypes'. 'acceptedMimeTypes' is deprecated." if @options.acceptedFiles and @options.acceptedMimeTypes
+
+    # Backwards compatibility
+    if @options.acceptedMimeTypes
+      @options.acceptedFiles = @options.acceptedMimeTypes 
+      delete @options.acceptedMimeTypes
 
     @options.method = @options.method.toUpperCase()
 
@@ -442,10 +451,7 @@ class Dropzone extends Em
         @hiddenFileInput.setAttribute "type", "file"
         @hiddenFileInput.setAttribute "multiple", "multiple"
 
-        @hiddenFileInput.setAttribute "accept", @options.acceptedMimeTypes if @options.acceptedMimeTypes?
-
-        # Backwards compatibility
-        @hiddenFileInput.setAttribute "accept", @options.acceptParameter if @options.acceptParameter?
+        @hiddenFileInput.setAttribute "accept", @options.acceptedFiles if @options.acceptedFiles?
 
         # Not setting `display="none"` because some browsers don't accept clicks
         # on elements that aren't displayed.
@@ -659,11 +665,11 @@ class Dropzone extends Em
   # (This allows for asynchronous validation)
   # 
   # This function checks the filesize, and if the file.type passes the 
-  # `acceptedMimeTypes` check.
+  # `acceptedFiles` check.
   accept: (file, done) ->
     if file.size > @options.maxFilesize * 1024 * 1024
       done @options.dictFileTooBig.replace("{{filesize}}", Math.round(file.size / 1024 / 10.24) / 100).replace("{{maxFilesize}}", @options.maxFilesize)
-    else unless Dropzone.isValidMimeType file.type, @options.acceptedMimeTypes
+    else unless Dropzone.isValidFile file, @options.acceptedFiles
       done @options.dictInvalidFileType
     else
       @options.accept.call this, file, done
@@ -897,7 +903,7 @@ class Dropzone extends Em
     # Finally add the file
     # Has to be last because some servers (eg: S3) expect the file to be the
     # last parameter
-    formData.append @options.paramName, file
+    formData.append "#{@options.paramName}", file
 
     xhr.send formData
 
@@ -1072,19 +1078,22 @@ Dropzone.getElements = (els, name) ->
 # Validates the mime type like this:
 # 
 # https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept
-Dropzone.isValidMimeType = (mimeType, acceptedMimeTypes) ->
-  return yes unless acceptedMimeTypes # If there are no accepted mime types, it's OK
-  acceptedMimeTypes = acceptedMimeTypes.split ","
+Dropzone.isValidFile = (file, acceptedFiles) ->
+  return yes unless acceptedFiles # If there are no accepted mime types, it's OK
+  acceptedFiles = acceptedFiles.split ","
 
+  mimeType = file.type
   baseMimeType = mimeType.replace /\/.*$/, ""
 
-  for validMimeType in acceptedMimeTypes
-    validMimeType = validMimeType.trim()
-    if /\/\*$/.test validMimeType
+  for validType in acceptedFiles
+    validType = validType.trim()
+    if validType.charAt(0) == "."
+      return yes if file.name.indexOf(validType, file.name.length - validType.length) != -1
+    else if /\/\*$/.test validType
       # This is something like a image/* mime type
-      return yes if baseMimeType == validMimeType.replace /\/.*$/, ""
+      return yes if baseMimeType == validType.replace /\/.*$/, ""
     else
-      return yes if mimeType == validMimeType
+      return yes if mimeType == validType
 
   return no
 

test/test.coffee

@@ -122,41 +122,53 @@ describe "Dropzone", ->
           Dropzone.discover()
           expect(element3.dropzone).to.not.be.ok
 
-    describe "Dropzone.isValidMimeType()", ->
-      it "should return true if called without acceptedMimeTypes", ->
-        Dropzone.isValidMimeType("some/type", null).should.be.ok
+    describe "Dropzone.isValidFile()", ->
+      it "should return true if called without acceptedFiles", ->
+        Dropzone.isValidFile({ type: "some/type" }, null).should.be.ok
 
       it "should properly validate if called with concrete mime types", ->
         acceptedMimeTypes = "text/html,image/jpeg,application/json"
 
-        Dropzone.isValidMimeType("text/html", acceptedMimeTypes).should.be.ok
-        Dropzone.isValidMimeType("image/jpeg", acceptedMimeTypes).should.be.ok
-        Dropzone.isValidMimeType("application/json", acceptedMimeTypes).should.be.ok
-        Dropzone.isValidMimeType("image/bmp", acceptedMimeTypes).should.not.be.ok
+        Dropzone.isValidFile({ type: "text/html" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "image/jpeg" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "application/json" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "image/bmp" }, acceptedMimeTypes).should.not.be.ok
 
       it "should properly validate if called with base mime types", ->
         acceptedMimeTypes = "text/*,image/*,application/*"
 
-        Dropzone.isValidMimeType("text/html", acceptedMimeTypes).should.be.ok
-        Dropzone.isValidMimeType("image/jpeg", acceptedMimeTypes).should.be.ok
-        Dropzone.isValidMimeType("application/json", acceptedMimeTypes).should.be.ok
-        Dropzone.isValidMimeType("image/bmp", acceptedMimeTypes).should.be.ok
-        Dropzone.isValidMimeType("some/type", acceptedMimeTypes).should.not.be.ok
+        Dropzone.isValidFile({ type: "text/html" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "image/jpeg" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "application/json" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "image/bmp" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "some/type" }, acceptedMimeTypes).should.not.be.ok
 
       it "should properly validate if called with mixed mime types", ->
         acceptedMimeTypes = "text/*,image/jpeg,application/*"
 
-        Dropzone.isValidMimeType("text/html", acceptedMimeTypes).should.be.ok
-        Dropzone.isValidMimeType("image/jpeg", acceptedMimeTypes).should.be.ok
-        Dropzone.isValidMimeType("image/bmp", acceptedMimeTypes).should.not.be.ok
-        Dropzone.isValidMimeType("application/json", acceptedMimeTypes).should.be.ok
-        Dropzone.isValidMimeType("some/type", acceptedMimeTypes).should.not.be.ok
+        Dropzone.isValidFile({ type: "text/html" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "image/jpeg" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "image/bmp" }, acceptedMimeTypes).should.not.be.ok
+        Dropzone.isValidFile({ type: "application/json" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "some/type" }, acceptedMimeTypes).should.not.be.ok
 
       it "should properly validate even with spaces in between", ->
         acceptedMimeTypes = "text/html ,   image/jpeg, application/json"
 
-        Dropzone.isValidMimeType("text/html", acceptedMimeTypes).should.be.ok
-        Dropzone.isValidMimeType("image/jpeg", acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "text/html" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ type: "image/jpeg" }, acceptedMimeTypes).should.be.ok
+
+      it "should properly validate extensions", ->
+        acceptedMimeTypes = "text/html ,    image/jpeg, .pdf  ,.png"
+
+        Dropzone.isValidFile({ name: "somxsfsd", type: "text/html" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ name: "somesdfsdf", type: "image/jpeg" }, acceptedMimeTypes).should.be.ok
+        Dropzone.isValidFile({ name: "somesdfadfadf", type: "application/json" }, acceptedMimeTypes).should.not.be.ok
+        Dropzone.isValidFile({ name: "some-file file.pdf", type: "random/type" }, acceptedMimeTypes).should.be.ok
+        # .pdf has to be in the end
+        Dropzone.isValidFile({ name: "some-file.pdf file.gif", type: "random/type" }, acceptedMimeTypes).should.not.be.ok
+        Dropzone.isValidFile({ name: "some-file file.png", type: "random/type" }, acceptedMimeTypes).should.be.ok
+
 
   describe "Dropzone.getElement() / getElements()", ->
     tmpElements = [ ]
@@ -221,9 +233,9 @@ describe "Dropzone", ->
       dropzone = new Dropzone element, url: "url"
       expect(-> new Dropzone element, url: "url").to.throw "Dropzone already attached."
 
-    it "should throw an exception if both acceptParameter and acceptedMimeTypes are specified", ->
+    it "should throw an exception if both acceptedFiles and acceptedMimeTypes are specified", ->
       element = document.createElement "div"
-      expect(-> dropzone = new Dropzone element, url: "test", acceptParameter: "param", acceptedMimeTypes: "types").to.throw "You can't provide both 'acceptParameter' and 'acceptedMimeTypes'. 'acceptParameter' is deprecated."
+      expect(-> dropzone = new Dropzone element, url: "test", acceptedFiles: "param", acceptedMimeTypes: "types").to.throw "You can't provide both 'acceptedFiles' and 'acceptedMimeTypes'. 'acceptedMimeTypes' is deprecated."
 
     it "should set itself as element.dropzone", ->
       element = document.createElement "div"
@@ -260,6 +272,12 @@ describe "Dropzone", ->
           forceFallback: on
           fallback: -> done()
 
+      it "should set acceptedFiles if deprecated acceptedMimetypes option has been passed", ->
+        dropzone = new Dropzone element,
+          url: "/some/other/url"
+          acceptedMimeTypes: "my/type"
+        dropzone.options.acceptedFiles.should.equal "my/type"
+
       describe "options.clickable", ->
         clickableElement = null
         dropzone = null
@@ -293,7 +311,7 @@ describe "Dropzone", ->
     describe "clickable", ->
 
       dropzones =
-        "using acceptParameter": new Dropzone(Dropzone.createElement("""<form action="/"></form>"""), { clickable: yes, acceptParameter: "audio/*,video/*" })
+        "using acceptedFiles": new Dropzone(Dropzone.createElement("""<form action="/"></form>"""), { clickable: yes, acceptedFiles: "audio/*,video/*" })
         "using acceptedMimeTypes": new Dropzone(Dropzone.createElement("""<form action="/"></form>"""), { clickable: yes, acceptedMimeTypes: "audio/*,video/*" })
 
       it "should not add an accept attribute if no acceptParameter", ->
@@ -414,13 +432,13 @@ describe "Dropzone", ->
       it "shouldn't pass if the filesize is too big", ->
         dropzone.accept { size: 10 * 1024 * 1024, type: "audio/mp3" }, (err) -> err.should.eql "File is too big (10MB). Max filesize: 4MB."
 
-      it "should properly accept files which mime types are listed in acceptedMimeTypes", ->
+      it "should properly accept files which mime types are listed in acceptedFiles", ->
 
         dropzone.accept { type: "audio/mp3" }, (err) -> expect(err).to.be.undefined
         dropzone.accept { type: "image/png" }, (err) -> expect(err).to.be.undefined
         dropzone.accept { type: "audio/wav" }, (err) -> expect(err).to.be.undefined
 
-      it "should properly reject files when the mime type isn't listed in acceptedMimeTypes", ->
+      it "should properly reject files when the mime type isn't listed in acceptedFiles", ->
 
         dropzone.accept { type: "image/jpeg" }, (err) -> err.should.eql "You can't upload files of this type."