Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

trigger progress event on fileupload progress #215

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

trigger progress event on fileupload progress #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5651f6f
trigger progress event on fileupload progress
baugarten May 3, 2015
28e36e2
don't expose underlying event
baugarten May 3, 2015
71e16e3
url safe filename before upload
baugarten Jun 13, 2015
2b7fe6f
urlescape filename on upload
baugarten Jun 13, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ $('#myS3Uploader').bind 's3_uploads_start', (e) ->
alert("Uploads have started")
```

#### Successfull upload
#### Successful upload
When a file has been successfully uploaded to S3, the `s3_upload_complete` is triggered on the form. A `content` object is passed along with the following attributes :

* `url` The full URL to the uploaded file on S3.
Expand All @@ -221,6 +221,15 @@ $('#myS3Uploader').bind "s3_upload_complete", (e, content) ->
$('#someHiddenField').val(content.url)
```

#### Upload Progress
When uploading to S3, we receive periodic progress events that expose the percentage of the file(s) uploaded to s3. This is how we update the progress bar. This could be useful for displaying more fine-grained information about the upload, like an ETA or rate.

```coffeescript
$('#myS3Uploader').bind "s3_upload_progress", (e, data) ->
remaining_time = (data.total - data.loaded) / data.bitrate
$('#someHiddenField').val(remaining_time)
```

#### Failed upload
When an error occured during the transferm the `s3_upload_failed` is triggered on the form with the same `content` object is passed for the successful upload with the addition of the `error_thrown` attribute. The most basic way to handle this error would be to display an alert message to the user in case the upload fails :
```coffeescript
Expand Down
8 changes: 6 additions & 2 deletions app/assets/javascripts/s3_direct_upload.js.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ $.fn.S3Uploader = (options) ->

progress: (e, data) ->
if data.context
$uploadForm.trigger("s3_uploads_progress", [data])
progress = parseInt(data.loaded / data.total * 100, 10)
data.context.find('.bar').css('width', progress + '%')

Expand Down Expand Up @@ -113,10 +114,12 @@ $.fn.S3Uploader = (options) ->
name: "content-type"
value: fileType

filename_parts = @files[0].name.split('.')
key = $uploadForm.data("key")
.replace('{timestamp}', new Date().getTime())
.replace('{unique_id}', @files[0].unique_id)
.replace('{extension}', @files[0].name.split('.').pop())
.replace('{extension}', filename_parts[filename_parts.length - 1])
.replace('${filename}', @files[0].name.replace(/[^a-z0-9\.]/gi, '_').toLowerCase())

# substitute upload timestamp and unique_id into key
key_field = $.grep data, (n) ->
Expand All @@ -129,6 +132,7 @@ $.fn.S3Uploader = (options) ->
# replace 'key' field to submit form
unless 'FormData' of window
$uploadForm.find("input[name='key']").val(settings.path + key)

data

build_content_object = ($uploadForm, file, result) ->
Expand All @@ -141,7 +145,7 @@ $.fn.S3Uploader = (options) ->
content.filepath = $uploadForm.find('input[name=key]').val().replace('/${filename}', '')
content.url = domain + content.filepath + '/' + encodeURIComponent(file.name)

content.filename = file.name
content.filename = file.names
content.filesize = file.size if 'size' of file
content.lastModifiedDate = file.lastModifiedDate if 'lastModifiedDate' of file
content.filetype = file.type if 'type' of file
Expand Down