Add drag file to upload feature.
This commit is contained in:
parent
93168486f7
commit
a1848f8ed1
|
|
@ -18,7 +18,38 @@
|
|||
<% end %>
|
||||
|
||||
<%#= f.error_messages %>
|
||||
|
||||
<style>
|
||||
#fileupload {
|
||||
position: relative;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
height: 254px;
|
||||
}
|
||||
#fileupload #dropzone.drop {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border: 2px dashed #0088CC;
|
||||
border-radius: 10px;
|
||||
color: #0088CC;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 0;
|
||||
}
|
||||
#fileupload #dropzone {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
font-size: 3em;
|
||||
font-family: 'Raleway';
|
||||
line-height: 1.2em;
|
||||
color: #e4e4e4;
|
||||
}
|
||||
#fileupload #dropzone.in {
|
||||
opacity: .7;
|
||||
z-index: 2;
|
||||
border-color: #faa732;
|
||||
color: #faa732;
|
||||
}
|
||||
</style>
|
||||
<!-- Input Area -->
|
||||
<div class="input-area">
|
||||
|
||||
|
|
@ -170,6 +201,12 @@
|
|||
<hr>
|
||||
</div>
|
||||
<% end %>
|
||||
<div id="fileupload" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragleave="(function(){$('#dropzone').removeClass('in');})()">
|
||||
<div id="dropzone" class="drop">
|
||||
<div data-icons=""></div>
|
||||
<%=t("archive.drag_file_to_here")%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -184,6 +221,67 @@
|
|||
|
||||
<% content_for :page_specific_javascript do %>
|
||||
<script>
|
||||
function FileListItems (files) {
|
||||
var b = new ClipboardEvent("").clipboardData || new DataTransfer()
|
||||
for (var i = 0, len = files.length; i<len; i++) b.items.add(files[i])
|
||||
return b.files
|
||||
}
|
||||
function change_files_to_file_field(file_field,files){
|
||||
var fileupload = $(file_field).parents(".fileupload");
|
||||
if(fileupload.length > 0){
|
||||
fileupload.find(".fileupload-preview").text(files[0].name);
|
||||
}
|
||||
var files_list = new FileListItems(files)
|
||||
$(file_field).prop("files" ,files_list);
|
||||
}
|
||||
function dragOverHandler(ev) {
|
||||
document.activeElement.blur();
|
||||
$(ev.target).addClass("in");
|
||||
// Prevent default behavior (Prevent file from being opened)
|
||||
ev.preventDefault();
|
||||
}
|
||||
function dropHandler(ev) {
|
||||
// Prevent default behavior (Prevent file from being opened)
|
||||
ev.preventDefault();
|
||||
var files = [];
|
||||
if (ev.dataTransfer.items) {
|
||||
// Use DataTransferItemList interface to access the file(s)
|
||||
for (var i = 0; i < ev.dataTransfer.items.length; i++) {
|
||||
// If dropped items aren't files, reject them
|
||||
if (ev.dataTransfer.items[i].kind === 'file') {
|
||||
var file = ev.dataTransfer.items[i].getAsFile();
|
||||
files.push(file)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Use DataTransfer interface to access the file(s)
|
||||
for (var i = 0; i < ev.dataTransfer.files.length; i++) {
|
||||
var file = ev.dataTransfer.files[i];
|
||||
files.push(file)
|
||||
}
|
||||
}
|
||||
files.forEach(function(file){
|
||||
var single_file = [file];
|
||||
var file_field = add_file_field();
|
||||
change_files_to_file_field(file_field,single_file);
|
||||
})
|
||||
$(ev.target).removeClass("in");
|
||||
}
|
||||
function add_file_field(){
|
||||
var self = $('#add_file');
|
||||
var new_id = $(self).prev().attr('value');
|
||||
var old_id = new RegExp("new_archive_file_multiples", "g");
|
||||
var on = $('.language-nav li.active').index();
|
||||
var le = $('#add-target').children('.start-line').length;
|
||||
$(self).prev().attr('value', parseInt(new_id) + 1);
|
||||
$('#add-target').prepend(("<%= escape_javascript(add_attribute 'form_file', f, :archive_file_multiples) %>").replace(old_id, new_id).replace("new_archive_file_sort_order_XXX", parseInt(new_id) + 1));
|
||||
var file_field = $('#add-target').find("*").eq(0).find("[type=\"file\"]");
|
||||
$('#add-target').children('.start-line').eq(le).children('.input-append').find('.tab-content').each(function() {
|
||||
$(self).children('.tab-pane').eq(on).addClass('in active').siblings().removeClass('in active');
|
||||
});
|
||||
formTip();
|
||||
return file_field;
|
||||
}
|
||||
$(document).ready(function() {
|
||||
$(".plugin-sortable").sortable({
|
||||
update : function(event, ui){
|
||||
|
|
@ -194,18 +292,7 @@
|
|||
}
|
||||
});
|
||||
$('.main-forms .add-on').tooltip();
|
||||
$(document).on('click', '#add_file', function(){
|
||||
var new_id = $(this).prev().attr('value');
|
||||
var old_id = new RegExp("new_archive_file_multiples", "g");
|
||||
var on = $('.language-nav li.active').index();
|
||||
var le = $('#add-target').children('.start-line').length;
|
||||
$(this).prev().attr('value', parseInt(new_id) + 1);
|
||||
$('#add-target').prepend(("<%= escape_javascript(add_attribute 'form_file', f, :archive_file_multiples) %>").replace(old_id, new_id).replace("new_archive_file_sort_order_XXX", parseInt(new_id) + 1));
|
||||
$('#add-target').children('.start-line').eq(le).children('.input-append').find('.tab-content').each(function() {
|
||||
$(this).children('.tab-pane').eq(on).addClass('in active').siblings().removeClass('in active');
|
||||
});
|
||||
formTip();
|
||||
});
|
||||
$(document).on('click', '#add_file', add_file_field);
|
||||
$(document).on('click', '.delete_file', function(){
|
||||
$(this).parents('.input-prepend').remove();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ en:
|
|||
restful_actions:
|
||||
categories_order: Categories Order
|
||||
archive:
|
||||
drag_file_to_here: Drag file to here
|
||||
description: File description
|
||||
category: Category
|
||||
sort_number: Sort Order
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ zh_tw:
|
|||
restful_actions:
|
||||
categories_order: 類別排序
|
||||
archive:
|
||||
drag_file_to_here: 拖移檔案到此
|
||||
description: 檔案簡介
|
||||
category: 類別
|
||||
sort_number: 排序號碼
|
||||
|
|
|
|||
Loading…
Reference in New Issue