Skip to content

R
rendezvous
Commit e61519a4 by tady
Options

fileupload in markdown

parent 707fbf63
Showing with 247 additions and 7 deletions
Gemfile
......@@ -122,3 +122,5 @@ gem 'draper', '~> 1.3'
# ActiveRecord versioning
gem 'paper_trail', '~> 3.0.0'
gem 'aws-sdk'
Gemfile.lock
......@@ -40,6 +40,10 @@ GEM
arel (4.0.2)
ast (1.1.0)
atomic (1.1.15)
aws-sdk (1.35.0)
json (~> 1.4)
nokogiri (>= 1.4.4)
uuidtools (~> 2.1)
bcrypt (3.1.7)
bcrypt-ruby (3.1.5)
bcrypt (>= 3.1.3)
......@@ -335,6 +339,7 @@ GEM
unf (0.1.3)
unf_ext
unf_ext (0.0.6)
uuidtools (2.1.4)
validates_email_format_of (1.5.3)
warden (1.2.3)
rack (>= 1.0)
......@@ -349,6 +354,7 @@ PLATFORMS
DEPENDENCIES
action-gmailer!
ancestry
aws-sdk
better_errors
binding_of_caller
capistrano (~> 3.1)
......
app/assets/javascripts/application.js
......@@ -14,6 +14,7 @@
// require jquery
//= require jquery_ujs
// require turbolinks
//= require ./lib/jquery.ui.widget
//= require_tree ./lib
//= require_tree .
......
app/assets/javascripts/lib/mod-fileuploader.js.coffee 0 → 100644
$.extend
mod_fileuploader: (options) ->
settings =
$input: null,
$textarea: null
settings = $.extend settings, options
settings.$input.fileupload
dataType: 'json'
done: (e, data) ->
$.each data.result.urls, (index, url) ->
settings.$textarea.val(settings.$textarea.val() + "![](" + url + ")\n")
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 + '%'
settings.$input.prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
$('<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/assets/javascripts/lib/mod-md-editor.js.coffee
......@@ -69,7 +69,7 @@ $.fn.extend
# TODO
prettyPrint()
$('.mod-mdEditor-body').on('keyup mouseup', generatePreview)
$('.mod-mdEditor-body').on('keyup mouseup change', generatePreview)
generatePreview()
......
app/assets/stylesheets/lib/jquery.fileupload-noscript.css 0 → 100755
@charset "UTF-8";
/*
* jQuery File Upload Plugin NoScript CSS 1.2.0
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
.fileinput-button input {
position: static;
opacity: 1;
filter: none;
font-size: inherit;
direction: inherit;
}
.fileinput-button span {
display: none;
}
app/assets/stylesheets/lib/jquery.fileupload-ui-noscript.css 0 → 100755
@charset "UTF-8";
/*
* jQuery File Upload UI Plugin NoScript CSS 8.8.5
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2012, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
.fileinput-button i,
.fileupload-buttonbar .delete,
.fileupload-buttonbar .toggle {
display: none;
}
app/assets/stylesheets/lib/jquery.fileupload-ui.css 0 → 100755
@charset "UTF-8";
/*
* jQuery File Upload UI Plugin CSS 9.0.0
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2010, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
.fileupload-buttonbar .btn,
.fileupload-buttonbar .toggle {
margin-bottom: 5px;
}
.progress-animated .progress-bar,
.progress-animated .bar {
background: url("../img/progressbar.gif") !important;
filter: none;
}
.fileupload-process {
float: right;
display: none;
}
.fileupload-processing .fileupload-process,
.files .processing .preview {
display: block;
width: 32px;
height: 32px;
background: url("../img/loading.gif") center no-repeat;
background-size: contain;
}
.files audio,
.files video {
max-width: 300px;
}
@media (max-width: 767px) {
.fileupload-buttonbar .toggle,
.files .toggle,
.files .btn span {
display: none;
}
.files .name {
width: 80px;
word-wrap: break-word;
}
.files audio,
.files video {
max-width: 80px;
}
.files img,
.files canvas {
max-width: 100%;
}
}
app/assets/stylesheets/lib/jquery.fileupload.css 0 → 100755
@charset "UTF-8";
/*
* jQuery File Upload Plugin CSS 1.3.0
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
.fileinput-button {
position: relative;
overflow: hidden;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
/* Fixes for IE < 8 */
@media screen\9 {
.fileinput-button input {
filter: alpha(opacity=0);
font-size: 100%;
height: 100%;
}
}
app/assets/stylesheets/lib/mod-fileuploader.css.scss 0 → 100644
.mod-fileuploader-box {
margin: 10px;
padding: 10px;
border: dotted 5px #AFEEEE;
background: #F0FFFF;
}
#mod-fileuploader-notify {
opacity:0.5;
margin: 20px;
padding-top: 40%;
font-size: 40px;
text-align: center;
display: none;
width: 100%;
height: 100%;
background: #1E90FF;
color: white;
position: absolute;
top: 0;
left: 0;
}
app/controllers/apis_controller.rb
......@@ -7,5 +7,23 @@ class ApisController < ApplicationController
# TODO: not to use
render text: h_application_format_markdown(params[:text] || '')
end
def file_receiver
s3 = AWS::S3.new
bucket = s3.buckets[Settings.s3.bucket_name]
s3_file_urls = []
params[:files].each do |file|
basename = File.basename(file.path)
o = bucket.objects[basename]
out = o.write(:file => file.path)
s3_file_urls << out.url_for(:read, expireds: 60).to_s
end
render json: { status: 'OK', urls: s3_file_urls }
end
end
app/views/posts/_form.html.erb
......@@ -14,15 +14,24 @@
<% end %>
<div class="row">
<div class="col-md-10">
<div class="col-xs-10">
<div class="field">
<div class="input-group">
<span class="input-group-addon"><%= f.label :title %></span>
<%= f.text_field :title, class: 'form-control mod-mdEditor-title' %>
</div>
</div>
</div>
<div class="col-xs-2">
<div class="actions">
<%= f.submit class: 'btn btn-primary js-disable-confirm-unload', id: 'save_button' %>
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-xs-8">
<div class="field">
<div class="input-group">
<span class="input-group-addon"><%= f.label :tags %></span>
......@@ -32,13 +41,15 @@
</div>
</div>
<div class="col-md-2">
<div class="actions">
<%= f.submit class: 'btn btn-primary js-disable-confirm-unload', id: 'save_button' %>
<div class="col-xs-4">
<div class="mod-fileuploader-box">
<div id="progress" class="progress" style="width: 100%">
<div class="progress-bar progress-bar-success"></div>
</div>
<div id="files" class="files">Uploads file here...</div>
</div>
</div>
</div><!-- /.row -->
<br>
......@@ -68,10 +79,17 @@
<% end %>
</div>
<input id="fileupload" type="file" name="files[]" data-url="/apis/file_receiver" multiple style="display:none">
<% content_for :footer_js do %>
<script type="text/javascript">
$.setConfirmUnload();
$('#post-form').mod_mdEditor({end_point: '/apis/markdown_preview'});
$.mod_fileuploader({
$input: $('#fileupload'),
$textarea: $('.mod-mdEditor-body')
});
</script>
<% end %>
config/initializers/aws_sdk.rb 0 → 100644
AWS.config(
:access_key_id => Settings.s3.access_key_id,
:secret_access_key => Settings.s3.secret_access_key)
config/routes.rb
Rendezvous::Application.routes.draw do
post 'apis/markdown_preview'
post 'apis/file_receiver'
root 'home#top', as: 'root'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment