diff --git a/Gemfile.lock b/Gemfile.lock index 5cbb357e..ee6ba77e 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - binda (0.0.8.beta.1) + binda (0.0.8.beta.3) aasm (>= 4.11, < 4.13) ancestry (>= 2.1, < 3.1) carrierwave (>= 0.10, < 1.12) diff --git a/app/assets/javascripts/binda/components/fileupload_custom_script.js b/app/assets/javascripts/binda/components/fileupload_custom_script.js new file mode 100644 index 00000000..cf42fefe --- /dev/null +++ b/app/assets/javascripts/binda/components/fileupload_custom_script.js @@ -0,0 +1,90 @@ + +export function custom_fileupload ( target ) { + + let $this = $( target ) + $this.fileupload({ + + url: $this.data('url'), // This should return json, not a proper page + dropZone: $this, + dataType: 'json', + autoUpload: true, + acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, + maxFileSize: 999000, + // Enable image resizing, except for Android and Opera, + // which actually support image resizing, but fail to + // send Blob objects via XHR requests: + disableImageResize: /Android(?!.*Chrome)|Opera/ + .test(window.navigator.userAgent), + previewMaxWidth: 100, + previewMaxHeight: 100, + previewCrop: true + + }).on('fileuploadadd', function (e, data) { + + data.context = $this.find('.details'); + $.each(data.files, function (index, file) { + $this.find('.fileupload--filename').text(file.name) + }); + $this.find('.fileupload--details').removeClass('fileupload--details--hidden') + + }).on('fileuploadprocessalways', function (e, data) { + + var index = data.index, + file = data.files[index], + node = $(data.context.children()[index]); + if (file.error) { + node + .append('
') + .append($('').text(file.error)); + } + if (index + 1 === data.files.length) { + data.context.find('button') + .text('Upload') + .prop('disabled', !!data.files.error); + } + + }).on('fileuploadprogressall', function (e, data) { + + var progress = parseInt(data.loaded / data.total * 100, 10); + console.log(progress) + $this.find('.progress .progress-bar').css( + 'width', + progress + '%' + ) + + }).on('fileuploaddone', function (e, data) { + + $.each(data.result.files, function (index, file) { + if (file.url) { + setTimeout( function() { + // remove context + data.context.remove() + // reset progress bar + $this.find('.progress .progress-bar').css('width', '0%') + // append/replace image + $this.find('.form-item--asset--image').attr('src', file.url).attr('alt', file.name) + $this.find('.fileupload--remove-image-btn').removeClass('invisible') + }, 500 ) // this 500ms of timeout is based on a .2s CSS transition. See fileupload stylesheets + setTimeout( function() { + $this.find('.fileupload--details').addClass('fileupload--details--hidden') + }, 300 ) + } else if (file.error) { + var error = $('').text(file.error); + $(data.context.children()[index]) + .append('
') + .append(error); + } + }); + + }).on('fileuploadfail', function (e, data) { + + $.each(data.files, function (index) { + var error = $('').text('File upload failed.'); + $(data.context.children()[index]) + .append('
') + .append(error); + }); + + }).prop('disabled', !$.support.fileInput) + .parent().addClass($.support.fileInput ? undefined : 'disabled'); +} \ No newline at end of file diff --git a/app/assets/javascripts/binda/components/form_item_asset.js b/app/assets/javascripts/binda/components/form_item_asset.js index 5bad01e5..69a2711d 100644 --- a/app/assets/javascripts/binda/components/form_item_asset.js +++ b/app/assets/javascripts/binda/components/form_item_asset.js @@ -2,6 +2,8 @@ /// FORM ITEM ASSET ///- - - - - - - - - - - - - - - - - - - - +import { custom_fileupload } from './fileupload_custom_script' + class FormItemAsset { constructor() @@ -17,114 +19,7 @@ class FormItemAsset setEvents() { - this.setupFileUpload() - } - - setupFileUpload() - { - var uploadButton = $('