upload style

app/assets/javascripts/modules/mod-fileuploader.js.coffee

@@ -2,31 +2,52 @@ $.extend
   mod_fileuploader: (options) ->
     settings =
       $input: null,
-      $textarea: null
+      $textarea: null,
+      $progressWrapper: null,
+      $progressBar: null
     settings = $.extend settings, options
 
+    # Used for replacing text
+    uploadingIndex = 0
+
     settings.$input.fileupload
       dataType: 'json'
+
+      add: (e, data) ->
+        settings.$progressWrapper.show()
+        settings.$textarea.val(settings.$textarea.val() + "\n[Uploading... #" + uploadingIndex + "]\n")
+
+        data.formData = { uploading_index: uploadingIndex }
+        data.submit()
+        uploadingIndex += 1
+
       done: (e, data) ->
+        settings.$progressWrapper.hide()
+
         $.each data.result.files, (index, file) ->
           # TODO: カーソル位置に挿入
 
-          console.log file
+          textarea_value = settings.$textarea.val()
 
           if file.type is 'image'
-            # image ![file-name](file-url)
-            settings.$textarea.val(settings.$textarea.val() + "\n![" + file.name + "](" + file.image + ")\n")
+            # ![file-name](file-url)
+            replacing_text = "![" + file.name + "](" + file.image + ")"
+            new_textarea_value = textarea_value.replace('[Uploading... #' + data.result.uploading_index + ']', replacing_text)
+            settings.$textarea.val(new_textarea_value)
           else if file.type is 'slide'
-            # slide !slide!(file-url)
             # [![alt text](image link)](web link)
-            settings.$textarea.val(settings.$textarea.val() + "\n[![" + file.name + "](" + file.image + ")](" + file.url + ")\n")
+            replacing_text = "[![" + file.name + "](" + file.image + ")](" + file.url + ")"
+            new_textarea_value = textarea_value.replace('[Uploading... #' + data.result.uploading_index + ']', replacing_text)
+            settings.$textarea.val(new_textarea_value)
 
           settings.$textarea.trigger("change")
           # $('<p/>').text(file.name).appendTo('#files') # TODO
-      # progressall: (e, data) ->
-      #   progress = parseInt(data.loaded / data.total * 100, 10)
-      #   $('.progress-bar').css
-      #     width: progress + '%'
+      progressall: (e, data) ->
+        progress = parseInt(data.loaded / data.total * 100, 10)
+        settings.$progressBar
+          .css(width: progress + '%')
+          .text(progress + '%')
+
 
     settings.$input.prop('disabled', !$.support.fileInput)
       .parent().addClass($.support.fileInput ? undefined : 'disabled');
@@ -34,15 +55,12 @@ $.extend
     $('<p id="mod-fileuploader-notify"/>').text('ここにドロップしてください').appendTo('body')
 
     $(window).bind 'dragover', (e) ->
-      console.log('dragover')
       $('#mod-fileuploader-notify').show()
     # $(window).bind 'dragleave', (e) ->
     #   console.log('dragleave')
     #   $('#mod-fileuploader-notify').hide()
     $(window).bind 'dragend', (e) ->
-      console.log('dragend')
       $('#mod-fileuploader-notify').hide()
     $(window).bind 'drop', (e) ->
-      console.log('drop')
       $('#mod-fileuploader-notify').hide()
 

app/controllers/apis_controller.rb

@@ -34,7 +34,7 @@ class ApisController < ApplicationController
         s3_files << { type: 'image', name: file.original_filename, image: res.public_url.to_s }
       when /\.pdf\Z/
         cover_image_name = "#{Digest::MD5.file(file.path).to_s}-cover.png"
-        pdf = Magick::ImageList.new(file.path)
+        pdf = Magick::ImageList.new(file.path + '[0]')
         cover_tmp = Rails.root.join('tmp', cover_image_name)
         pdf[0].write(cover_tmp)
         cover_res = s3_uploader.upload!(file: cover_tmp, name: cover_image_name)
@@ -43,7 +43,7 @@ class ApisController < ApplicationController
       end
     end
 
-    render json: { status: 'OK', files: s3_files }
+    render json: { status: 'OK', files: s3_files, uploading_index: params[:uploading_index] }
   end
 
   def user_mention

app/views/posts/_form.html.slim

@@ -33,6 +33,13 @@
     br/
 
     .row
+      #progress-wrapper.alert.alert-warning.fade.in style="display:none;"
+        | Uploading files...
+        #progress style="height:20px;"
+          .progress-bar.progress-bar-success.progress-bar-striped.active role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"
+            | 0%
+
+    .row
       .col-xs-6
         .panel.panel-default
           .panel-heading
@@ -53,8 +60,9 @@
                   i.fa.fa-list-ul
                 button.btn.btn-default.mod-mdEditor-btn-strikethrough type="button" title="打ち消し線"
                   i.fa.fa-strikethrough
-                / button.btn.btn-default.mod-mdEditor-btn-link type="button"
-                /   i.fa.fa-link
+              .btn-group.btn-group-xs
+                button#uploadButton.btn.btn-default type="button" title="Upload"
+                  | Upload
 
           .panel-body.panel-body-nopadding
             = f.text_area :body, class: 'mod-mdEditor-textarea'
@@ -73,10 +81,18 @@ input#fileupload data-url="/apis/file_receiver" multiple="" name="files[]" style
 
     $.mod_fileuploader({
       $input: $('#fileupload'),
-      $textarea: $('.mod-mdEditor-textarea')
+      $textarea: $('.mod-mdEditor-textarea'),
+      $progressWrapper: $('#progress-wrapper'),
+      $progressBar: $('#progress .progress-bar')
+    });
+
+    // Display upload dialog.
+    $('#uploadButton').on('click', function(){
+      $('input#fileupload').trigger('click');
     });
 
     // 下書き保存
+    // TODO
     $('.btn-save-draft').on('click', function(e){
       e.preventDefault();
       var val = $('.mod-mdEditor-body').val();