138 lines
5.3 KiB
Plaintext
138 lines
5.3 KiB
Plaintext
<% content_for :page_specific_css do %>
|
|
<style>
|
|
#videoUploader .control-groups {
|
|
margin : 15px 10px;
|
|
text-align: center;
|
|
}
|
|
#videoUploader .controls.notifcation-area {
|
|
font-size: 14px;
|
|
margin-top: 15px;
|
|
}
|
|
.error {
|
|
color : red;
|
|
}
|
|
|
|
.fileinput-button {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|
|
<% end %>
|
|
<div id="videoUploader" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
|
|
<div class="modal-header">
|
|
<h3 id="myModalLabel">Upload Video</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="control-groups">
|
|
<div class="controls video-upload-input">
|
|
<span class="btn btn-info fileinput-button">
|
|
<i class="glyphicon glyphicon-plus"></i>
|
|
<span>Select files</span>
|
|
<input type="file" name="video_file" id="video-file" />
|
|
</span>
|
|
</div>
|
|
<div class="controls notifcation-area">
|
|
Please use Google Chrome or Firefox to upload files more than 300MB of size.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress" style="height:5px;margin-bottom:0px;">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
|
<button class="btn btn-primary hide" id="video-upload-btn">Upload</button>
|
|
<button class="btn btn-danger hide" id="video-upload-abort-btn">Abort</button>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var progressbar = $("#videoUploader .progress div.bar"),
|
|
server_dirname = "",
|
|
uploadBtn = $("#videoUploader #video-upload-btn"),
|
|
closeBtn = $("#videoUploader button[data-dismiss=modal]"),
|
|
abortUploadBtn = $("#videoUploader #video-upload-abort-btn"),
|
|
notificationArea = $("#videoUploader .notifcation-area"),
|
|
videoUploadInput = $("#videoUploader .video-upload-input"),
|
|
videoUploadInstance = null;
|
|
|
|
$("#video-file").fileupload({
|
|
autoUpload : false,
|
|
url : "/admin/vlogs/upload_temp_file",
|
|
maxChunkSize : 8 * 1024 * 1024,
|
|
acceptFileTypes: /(\.|\/)(mov|mpe?g|mp4|flv)$/i,
|
|
add : function(e, data){
|
|
uploadBtn.removeClass("hide");
|
|
notificationArea.removeClass("error").text(data.files[0].name);
|
|
var uploadData = data;
|
|
uploadBtn.one("click",function(){
|
|
$.ajax({
|
|
url : "/admin/vlogs/get_temp_dir_name",
|
|
dataType : "json",
|
|
type : "get"
|
|
}).done(function(data){
|
|
server_dirname = data.dirname;
|
|
$("#video_file_temp_dir").val(server_dirname);
|
|
$("#video_file_temp_name").val(uploadData.files[0].name);
|
|
videoUploadInstance = uploadData.submit()
|
|
.error(function (jqXHR, textStatus, errorThrown) {
|
|
videoUploadInput.slideDown();
|
|
videoUploadInput.find("input").val("");
|
|
closeBtn.removeClass("hide");
|
|
abortUploadBtn.addClass("hide");
|
|
uploadBtn.removeClass("hide");
|
|
$.ajax({
|
|
url : "/admin/vlogs/clear_temp_dir",
|
|
dataType : "json",
|
|
type : "post",
|
|
data : {dirname : server_dirname}
|
|
})
|
|
if (errorThrown === 'abort') {
|
|
notificationArea.addClass("error").text("File upload aborted.");
|
|
}else{
|
|
notificationArea.addClass("error").text("There was an error.");
|
|
}
|
|
});
|
|
})
|
|
})
|
|
}
|
|
}).bind('fileuploadsubmit',function (e,data) {
|
|
data.formData = {"dirname" : server_dirname};
|
|
closeBtn.addClass("hide");
|
|
abortUploadBtn.removeClass("hide");
|
|
uploadBtn.addClass("hide");
|
|
videoUploadInput.slideUp();
|
|
notificationArea.removeClass("error").text("Uploading. Please Wait...");
|
|
}).bind('fileuploadprogressall', function (e, data) {
|
|
var progress = parseInt(data.loaded / data.total * 100, 10);
|
|
progressbar.width(progress + "%");
|
|
notificationArea.removeClass("error").text(progress + "% uploaded.");
|
|
}).bind('fileuploaddone', function (e, data){
|
|
closeBtn.removeClass("hide");
|
|
abortUploadBtn.addClass("hide");
|
|
notificationArea.removeClass("error").text("File uploaded successfully. You may close this window.");
|
|
$("#video_file_name").text(data.files[0].name);
|
|
})
|
|
|
|
abortUploadBtn.on("click",function(){
|
|
if(confirm("This will abort the current upload. Are you sure?")){
|
|
videoUploadInstance.abort();
|
|
}
|
|
})
|
|
|
|
$("#videoUploader").on("shown",function(){
|
|
videoUploadInput.find("input").val("");
|
|
})
|
|
|
|
</script> |