I'm working on a project that uses drag-drop file handling to attach files to a form.
The form is pretty simple:
<form accept-charset="UTF-8" action="..." enctype="multipart/form-data" method="post">
<input multiple="multiple" name="files[]" type="file" />
<div id="download-drop"></div>
</form>
- I can select multiple files in the FilBrowser window and they will all post to the server
- I can't drag multiple files into the dropzone - they aren't posted to the form
When I look at the server logs, I can see the files array is posted, but the files I drop onto the dropzone are not included.
Here is my javascript (actually coffeescript):
class Uploader
constructor: (drop_zone, upload_button) ->
@attachments = []
@$upload_button = $(upload_button)
@$upload_button.bind 'change', @manual
@$drop_zone = $(drop_zone)
@$drop_zone.bind 'dragenter', @noop
@$drop_zone.bind 'dragexit', @noop
@$drop_zone.bind 'dragover', @noop
@$drop_zone.bind 'drop', @drop
@render()
# Perform a noop by preventing the default behavior and stopping
# event propagation.
noop: (e) ->
e.stopPropagation()
e.preventDefault()
# Handler for when a file is dropped.
drop: (e) =>
@noop e
for file in e.dataTransfer.files
@attachments.push file
@render()
# Handle a manual file upload (using the HTML element)
manual: (e) =>
@noop e
for file in e.currentTarget.files
@attachments.push file
@render()
# Render helper function that redraws the HTML element
render: =>
@$drop_zone.html ''
html = []
if @attachments?.length > 0
for attachment, i in @attachments
html.push attachment.name
@$drop_zone.html html.join('')
@Uploader = Uploader
A few things I've already looked into:
- The class is created and both selectors are found and exist
noop
works as expected- Scopes are all correct
- Drop works as expected
Can someone shed light on this? I think I need to add each attachment to the files array, but I don't know how.
drop
worked proper. – xiaoyi Nov 26 '12 at 15:40