Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Allow setting of fileupload options through s3uploader #126

Open
wants to merge 1 commit into from

2 participants

@ryanwood

This is a fairly simple change to address #125. I created a new settings option called fileupload_options which defaults to null. By passing any valid option from https://github.com/blueimp/jQuery-File-Upload/wiki/Options you can set the option directly in the fileupload plugin.

I simply moved all of the fileupload function overrides to an api object and them extended them with the new settings option. I intentionally made it so that someone could override even the s3uploader default API in case they wanted to extend it.

Let me know if you have any questions.

@sheerun

It is possible in my spin-off gem: https://github.com/sheerun/s3_file_field

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 2, 2013
  1. @ryanwood
This page is out of date. Refresh to see the latest.
Showing with 87 additions and 81 deletions.
  1. +3 −0  README.md
  2. +84 −81 app/assets/javascripts/s3_direct_upload.js.coffee
View
3  README.md
@@ -136,6 +136,7 @@ Use the javascript in `s3_direct_upload` as a guide.
* `before_add:` Callback function that executes before a file is added to the queue. It is passed file object and expects `true` or `false` to be returned. This could be useful if you would like to validate the filenames of files to be uploaded for example. If true is returned file will be uploaded as normal, false will cancel the upload.
* `progress_bar_target:` The jQuery selector for the element where you want the progress bars to be appended to. Default is the form element.
* `click_submit_target:` The jQuery selector for the element you wish to add a click handler to do the submitting instead of submiting on file open.
+* `fileupload_options:` Add any options that you wish to pass directly through to the underlying fileupload jQuery plugin. [View available options](https://github.com/blueimp/jQuery-File-Upload/wiki/Options).
### Example with all options
```coffeescript
@@ -147,6 +148,8 @@ jQuery ->
before_add: myCallBackFunction() # must return true or false if set
progress_bar_target: $('.js-progress-bars')
click_submit_target: $('.submit-target')
+ fileupload_options:
+ limitConcurrentUploads: 5
```
### Example with single file upload bar without script template
View
165 app/assets/javascripts/s3_direct_upload.js.coffee
@@ -23,6 +23,7 @@ $.fn.S3Uploader = (options) ->
progress_bar_target: null
click_submit_target: null
allow_multiple_files: true
+ fileupload_options: null
$.extend settings, options
@@ -33,88 +34,90 @@ $.fn.S3Uploader = (options) ->
form.submit() for form in forms_for_submit
false
- setUploadForm = ->
- $uploadForm.fileupload
-
- add: (e, data) ->
- file = data.files[0]
- file.unique_id = Math.random().toString(36).substr(2,16)
-
- unless settings.before_add and not settings.before_add(file)
- current_files.push data
- if $('#template-upload').length > 0
- data.context = $($.trim(tmpl("template-upload", file)))
- $(data.context).appendTo(settings.progress_bar_target || $uploadForm)
- else if !settings.allow_multiple_files
- data.context = settings.progress_bar_target
- if settings.click_submit_target
- if settings.allow_multiple_files
- forms_for_submit.push data
- else
- forms_for_submit = [data]
+ api =
+ add: (e, data) ->
+ file = data.files[0]
+ file.unique_id = Math.random().toString(36).substr(2,16)
+
+ unless settings.before_add and not settings.before_add(file)
+ current_files.push data
+ if $('#template-upload').length > 0
+ data.context = $($.trim(tmpl("template-upload", file)))
+ $(data.context).appendTo(settings.progress_bar_target || $uploadForm)
+ else if !settings.allow_multiple_files
+ data.context = settings.progress_bar_target
+ if settings.click_submit_target
+ if settings.allow_multiple_files
+ forms_for_submit.push data
else
- data.submit()
-
- start: (e) ->
- $uploadForm.trigger("s3_uploads_start", [e])
-
- progress: (e, data) ->
- if data.context
- progress = parseInt(data.loaded / data.total * 100, 10)
- data.context.find('.bar').css('width', progress + '%')
-
- done: (e, data) ->
- content = build_content_object $uploadForm, data.files[0], data.result
-
- callback_url = $uploadForm.data('callback-url')
- if callback_url
- content[$uploadForm.data('callback-param')] = content.url
-
- $.ajax
- type: $uploadForm.data('callback-method')
- url: callback_url
- data: content
- beforeSend: ( xhr, settings ) -> $uploadForm.trigger( 'ajax:beforeSend', [xhr, settings] )
- complete: ( xhr, status ) -> $uploadForm.trigger( 'ajax:complete', [xhr, status] )
- success: ( data, status, xhr ) -> $uploadForm.trigger( 'ajax:success', [data, status, xhr] )
- error: ( xhr, status, error ) -> $uploadForm.trigger( 'ajax:error', [xhr, status, error] )
-
- data.context.remove() if data.context && settings.remove_completed_progress_bar # remove progress bar
- $uploadForm.trigger("s3_upload_complete", [content])
-
- current_files.splice($.inArray(data, current_files), 1) # remove that element from the array
- $uploadForm.trigger("s3_uploads_complete", [content]) unless current_files.length
-
- fail: (e, data) ->
- content = build_content_object $uploadForm, data.files[0], data.result
- content.error_thrown = data.errorThrown
-
- data.context.remove() if data.context && settings.remove_failed_progress_bar # remove progress bar
- $uploadForm.trigger("s3_upload_failed", [content])
-
- formData: (form) ->
- data = form.serializeArray()
- fileType = ""
- if "type" of @files[0]
- fileType = @files[0].type
- data.push
- name: "content-type"
- value: fileType
-
- key = $uploadForm.data("key").replace('{timestamp}', new Date().getTime()).replace('{unique_id}', @files[0].unique_id)
-
- # substitute upload timestamp and unique_id into key
- key_field = $.grep data, (n) ->
- n if n.name == "key"
-
- if key_field.length > 0
- key_field[0].value = settings.path + key
-
- # IE <= 9 doesn't have XHR2 hence it can't use formData
- # replace 'key' field to submit form
- unless 'FormData' of window
- $uploadForm.find("input[name='key']").val(settings.path + key)
- data
+ forms_for_submit = [data]
+ else
+ data.submit()
+
+ start: (e) ->
+ $uploadForm.trigger("s3_uploads_start", [e])
+
+ progress: (e, data) ->
+ if data.context
+ progress = parseInt(data.loaded / data.total * 100, 10)
+ data.context.find('.bar').css('width', progress + '%')
+
+ done: (e, data) ->
+ content = build_content_object $uploadForm, data.files[0], data.result
+
+ callback_url = $uploadForm.data('callback-url')
+ if callback_url
+ content[$uploadForm.data('callback-param')] = content.url
+
+ $.ajax
+ type: $uploadForm.data('callback-method')
+ url: callback_url
+ data: content
+ beforeSend: ( xhr, settings ) -> $uploadForm.trigger( 'ajax:beforeSend', [xhr, settings] )
+ complete: ( xhr, status ) -> $uploadForm.trigger( 'ajax:complete', [xhr, status] )
+ success: ( data, status, xhr ) -> $uploadForm.trigger( 'ajax:success', [data, status, xhr] )
+ error: ( xhr, status, error ) -> $uploadForm.trigger( 'ajax:error', [xhr, status, error] )
+
+ data.context.remove() if data.context && settings.remove_completed_progress_bar # remove progress bar
+ $uploadForm.trigger("s3_upload_complete", [content])
+
+ current_files.splice($.inArray(data, current_files), 1) # remove that element from the array
+ $uploadForm.trigger("s3_uploads_complete", [content]) unless current_files.length
+
+ fail: (e, data) ->
+ content = build_content_object $uploadForm, data.files[0], data.result
+ content.error_thrown = data.errorThrown
+
+ data.context.remove() if data.context && settings.remove_failed_progress_bar # remove progress bar
+ $uploadForm.trigger("s3_upload_failed", [content])
+
+ formData: (form) ->
+ data = form.serializeArray()
+ fileType = ""
+ if "type" of @files[0]
+ fileType = @files[0].type
+ data.push
+ name: "content-type"
+ value: fileType
+
+ key = $uploadForm.data("key").replace('{timestamp}', new Date().getTime()).replace('{unique_id}', @files[0].unique_id)
+
+ # substitute upload timestamp and unique_id into key
+ key_field = $.grep data, (n) ->
+ n if n.name == "key"
+
+ if key_field.length > 0
+ key_field[0].value = settings.path + key
+
+ # IE <= 9 doesn't have XHR2 hence it can't use formData
+ # replace 'key' field to submit form
+ unless 'FormData' of window
+ $uploadForm.find("input[name='key']").val(settings.path + key)
+ data
+
+ setUploadForm = ->
+ fileupload_options = $.extend api, settings.fileupload_options
+ $uploadForm.fileupload fileupload_options
build_content_object = ($uploadForm, file, result) ->
content = {}
Something went wrong with that request. Please try again.