From 5651f6f04c47f9fae5462ae23a1cc81fbb741375 Mon Sep 17 00:00:00 2001 From: Ben Augarten Date: Sat, 2 May 2015 21:42:25 -0600 Subject: [PATCH 1/4] trigger progress event on fileupload progress --- README.md | 11 ++++++++++- app/assets/javascripts/s3_direct_upload.js.coffee | 1 + 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5861f7b..c557706 100644 --- a/README.md +++ b/README.md @@ -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. @@ -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 diff --git a/app/assets/javascripts/s3_direct_upload.js.coffee b/app/assets/javascripts/s3_direct_upload.js.coffee index 8548306..f611c8a 100644 --- a/app/assets/javascripts/s3_direct_upload.js.coffee +++ b/app/assets/javascripts/s3_direct_upload.js.coffee @@ -60,6 +60,7 @@ $.fn.S3Uploader = (options) -> progress: (e, data) -> if data.context + $uploadForm.trigger("s3_uploads_progress", [e, data]) progress = parseInt(data.loaded / data.total * 100, 10) data.context.find('.bar').css('width', progress + '%') From 28e36e22db851ee7a8267bc0c4070c0b60fb95df Mon Sep 17 00:00:00 2001 From: Ben Augarten Date: Sat, 2 May 2015 21:51:20 -0600 Subject: [PATCH 2/4] don't expose underlying event --- app/assets/javascripts/s3_direct_upload.js.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/s3_direct_upload.js.coffee b/app/assets/javascripts/s3_direct_upload.js.coffee index f611c8a..3d39dda 100644 --- a/app/assets/javascripts/s3_direct_upload.js.coffee +++ b/app/assets/javascripts/s3_direct_upload.js.coffee @@ -60,7 +60,7 @@ $.fn.S3Uploader = (options) -> progress: (e, data) -> if data.context - $uploadForm.trigger("s3_uploads_progress", [e, data]) + $uploadForm.trigger("s3_uploads_progress", [data]) progress = parseInt(data.loaded / data.total * 100, 10) data.context.find('.bar').css('width', progress + '%') From 71e16e361288e8dc22dcd86e04274d3086151595 Mon Sep 17 00:00:00 2001 From: Ben Augarten Date: Sat, 13 Jun 2015 15:57:16 -0600 Subject: [PATCH 3/4] url safe filename before upload --- app/assets/javascripts/s3_direct_upload.js.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/s3_direct_upload.js.coffee b/app/assets/javascripts/s3_direct_upload.js.coffee index 3d39dda..826a1c0 100644 --- a/app/assets/javascripts/s3_direct_upload.js.coffee +++ b/app/assets/javascripts/s3_direct_upload.js.coffee @@ -142,7 +142,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.replace(/[^a-z0-9]/gi, '_').toLowerCase() content.filesize = file.size if 'size' of file content.lastModifiedDate = file.lastModifiedDate if 'lastModifiedDate' of file content.filetype = file.type if 'type' of file From 2b7fe6f50fc5e387e938c8fa7a062f827cc7c99d Mon Sep 17 00:00:00 2001 From: Ben Augarten Date: Sat, 13 Jun 2015 16:40:07 -0600 Subject: [PATCH 4/4] urlescape filename on upload --- app/assets/javascripts/s3_direct_upload.js.coffee | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/s3_direct_upload.js.coffee b/app/assets/javascripts/s3_direct_upload.js.coffee index 826a1c0..846e2a9 100644 --- a/app/assets/javascripts/s3_direct_upload.js.coffee +++ b/app/assets/javascripts/s3_direct_upload.js.coffee @@ -114,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) -> @@ -130,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) -> @@ -142,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.names.replace(/[^a-z0-9]/gi, '_').toLowerCase() + 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