Асинхронная загрузка файлов в Rails

Последнее, что нужно сделать, это показать битрейт (скорость загрузки) пользователю. Это легко:

фото / new_multiple.html.erb

 [...] <div class="progress-wrapper"> <p>Bitrate: <span class="bitrate"></span></p> <div class="progress"> <div class="progress-bar" role="progressbar"> 0% </div> </div> </div> [...] 

И сценарий:

 [...] var bitrate = wrapper.find('.bitrate'); multiple_photos_form.on('fileuploadprogressall', function (e, data) { bitrate.text((data.bitrate / 1024).toFixed(2) + 'Kb/s'); var progress = parseInt(data.loaded / data.total * 100, 10); progress_bar.css('width', progress + '%').text(progress + '%'); }); 

Наша форма выглядит довольно круто и предоставляет полезную информацию для пользователя. Давайте перейдем к пятой и последней итерации.

Добавление Dropzone

Плагин File Upload предоставляет способ настроить так называемую «Dropzone» — область, где пользователи могут перетаскивать свои файлы, чтобы начать загрузку немедленно (проверьте поддержку браузера ).

Это хорошая альтернатива файловому диалогу по умолчанию. Кажется более естественным просто оставить некоторые файлы для загрузки.

Давайте добавим новый элемент в нашу разметку:

фото / new_multiple.html.erb

 [...] <h3>Upload multiple photos</h3> <div id="dropzone" class="fade">Drop files here</div> <%= form_for @photo do |f| %> <div class="form-group"> <%= f.label :author %> <%= f.text_field :author, class: 'form-control' %> </div> <div class="form-group"> <%= f.label :image, 'Choose files here' %> <%= f.file_field :image, required: true, multiple: true, name: 'photo 
 
  '%>
   </ DIV>

   <div class = "progress-wrapper">
     <p> Битрейт: <span class = "битрейт"> </ span> </ p>
     <div class = "progress">
       <div class = "progress-bar" role = "progressbar">
         0%
       </ DIV>
     </ DIV>
   </ DIV>
 <% end%>
 [...] 

Сценарий:

фото / new_multiple.html.erb

 [...] multiple_photos_form.fileupload({ dataType: 'script', dropZone: $('#dropzone'), add: function (e, data) { types = /(\.|\/)(gif|jpe?g|png|bmp)$/i; file = data.files[0]; if (types.test(file.type) || types.test(file.name)) { data.submit(); } else { alert(file.name + " must be GIF, JPEG, BMP or PNG file"); } } }); [...] 

Мы также можем применить некоторые CSS3-переходы к рабочей зоне (здесь нам помогут события File Upload). Вот несколько стилей, которые вы можете использовать:

таблицы стилей / application.css.scss

 @import "compass/css3/transition"; @import "compass/css3/opacity"; @import "compass/css3/border-radius"; [...] #dropzone { background: palegreen; width: 150px; text-align: center; font-weight: bold; height: 50px; line-height: 50px; border: 1px solid darken(palegreen, 10%); @include border-radius(10px); } #dropzone.in { width: 600px; height: 200px; line-height: 200px; font-size: larger; } #dropzone.hover { background: lawngreen; border: 1px solid darken(lawngreen, 10%); } #dropzone.fade { @include transition-property(all); @include transition-duration(0.5s); @include transition-timing-function(ease-out); @include opacity(1); } 

Я использую некоторые утилиты Compass (мне лень указывать все префиксы вендоров для атрибутов CSS3), поэтому не забудьте добавить эти строки в Gemfile:

Gemfile

 [...] gem 'compass-rails' gem 'compass' [...] 

и запустите bundle install .

Вот сценарии, которые позаботятся об анимации дропзоны:

фото / new_multiple.html.erb

 $(document).bind('dragover', function (e) { var dropZone = $('#dropzone'), timeout = window.dropZoneTimeout; if (!timeout) { dropZone.addClass('in'); } else { clearTimeout(timeout); } var found = false, node = e.target; do { if (node === dropZone[0]) { found = true; break; } node = node.parentNode; } while (node != null); if (found) { dropZone.addClass('hover'); } else { dropZone.removeClass('hover'); } window.dropZoneTimeout = setTimeout(function () { window.dropZoneTimeout = null; dropZone.removeClass('in hover'); }, 100); }); - $(document).bind('dragover', function (e) { var dropZone = $('#dropzone'), timeout = window.dropZoneTimeout; if (!timeout) { dropZone.addClass('in'); } else { clearTimeout(timeout); } var found = false, node = e.target; do { if (node === dropZone[0]) { found = true; break; } node = node.parentNode; } while (node != null); if (found) { dropZone.addClass('hover'); } else { dropZone.removeClass('hover'); } window.dropZoneTimeout = setTimeout(function () { window.dropZoneTimeout = null; dropZone.removeClass('in hover'); }, 100); }); 

Вы можете прочитать больше об этом здесь .

Теперь вы можете проверить форму и увидеть, что все это работает. ?

Вывод

Мы рассмотрели два решения для асинхронной загрузки файлов. Надеюсь, вы нашли эту статью интересной и полезной.

Вы когда-нибудь пытались реализовать асинхронную загрузку файлов в своих приложениях? Какие решения вы использовали? С какими проблемами вы столкнулись? Поделитесь своим опытом в комментариях!