initial carrierwave commit. support for heroku
This commit is contained in:
Espen Antonsen
parent
225d68138e
commit
efb21a1df1
|
|
@ -84,7 +84,7 @@ class Photo < ActiveRecord::Base
|
|||
# TODO: thumbnails size should be set in settings.yml
|
||||
|
||||
return if File.exists?(APP_CONFIG[:thumbs_path] + self.album.path + "/" + self.id.to_s + "_collection" + self.extension)
|
||||
puts "thumb " + self.path_original
|
||||
|
||||
ImageScience.with_image(self.path_original) do |img|
|
||||
img.cropped_thumbnail(200) do |thumb|
|
||||
thumb.save APP_CONFIG[:thumbs_path] + self.album.path + "/" + self.id.to_s + "_collection" + self.extension
|
||||
|
|
@ -145,7 +145,6 @@ class Photo < ActiveRecord::Base
|
|||
end
|
||||
|
||||
def destroy_file
|
||||
#puts "DELETE THUMBS OF " + APP_CONFIG[:photos_path] + self.path
|
||||
File.delete( self.path_original ) if File.exists?( self.path_original )
|
||||
File.delete( self.path_modified("_collection") ) if File.exists?( self.path_modified("_collection") )
|
||||
File.delete( self.path_modified("_album") ) if File.exists?( self.path_modified("_album") )
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
<% content_for :head do %>
|
||||
<link rel="stylesheet" href="/javascripts/galleria/galleria.css" type="text/css" media="screen" charset="utf-8">
|
||||
<% end %>
|
||||
|
||||
<% content_for :javascript do %>
|
||||
<script type="text/javascript" src="/javascripts/galleria/jquery.galleria.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/scrollable/jquery.scrollable-1.0.2.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/jquery.mousewheel.3.0.2/jquery.mousewheel.js"></script>
|
||||
<% end %>
|
||||
|
||||
<h1><%= @album.title %></h1>
|
||||
|
||||
<% if current_user %>
|
||||
<%= link_to "Edit album", edit_album_path( @album )%>
|
||||
<% end %>
|
||||
<%= link_to "Generate PDF", album_path( @album, :pdf) %>
|
||||
|
||||
<div id="photo">
|
||||
<div id="photo_metadata"></div>
|
||||
<div id="photo_large">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="thumbstrip">
|
||||
<ul id="thumbs" class="gallery">
|
||||
<%= render :partial => @album.photos.find(:all) %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p><%= @album.description %></p>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<% content_for :javascript do %>
|
||||
<script type="text/javascript" src="/javascripts/jquery.uploadify-v1.6.2.mit/jquery.uploadify.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('#photo').fileUpload({
|
||||
uploader:'/javascripts/jquery.uploadify-v1.6.2.mit/uploader.swf',
|
||||
script:'<%= photos_path %>',
|
||||
scriptData: {
|
||||
'<%= get_session_key %>' : encodeURIComponent('<%= u cookies[get_session_key] %>'),
|
||||
'<%= request_forgery_protection_token %>' : encodeURIComponent('<%= u form_authenticity_token %>'),
|
||||
'photo[album_id]' : "<%= @album.id %>"
|
||||
},
|
||||
cancelImg:'/javascripts/jquery.uploadify-v1.6.2.mit/cancel.png',
|
||||
multi:true,
|
||||
auto:true,
|
||||
onComplete : function (e,queueId,fileObj,res,data) {
|
||||
if (res.substring(0, 7) === "FILEID:") {
|
||||
var image = $('<img>').appendTo('#thumbs')
|
||||
image.css('display','none')
|
||||
image.attr('src', res.substring(7) )
|
||||
image.fadeIn('slow')
|
||||
}
|
||||
},
|
||||
onError : function (e,queueId,fileObj,errorObj,res) {
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<% end %>
|
||||
<form>
|
||||
<input type="file" id="photo" name="photo" />
|
||||
<br />
|
||||
<div id="thumbs"></div>
|
||||
</form>
|
||||
|
||||
|
|
@ -1,729 +0,0 @@
|
|||
if ( $('ul.gallery').length ) {
|
||||
$('ul.gallery').galleria( {
|
||||
clickNext : true,
|
||||
insert: "#photo_large",
|
||||
onImage: function ( image, caption, thumb ) {
|
||||
image.css('display','none').fadeIn()
|
||||
|
||||
thumb.parents('li').siblings().children('img.selected').fadeTo(500,0.3)
|
||||
thumb.fadeTo('fast',1).addClass('selected')
|
||||
$( '#photo_metadata' ).html( '<a href=\'/photos/' + thumb.attr('id').replace('thumb_', '') + '/edit\'>Update photo details</a>' )
|
||||
|
||||
var scrollable = $("#thumbstrip").scrollable()
|
||||
scrollable.seekTo( thumb.parents('ul').children().index( thumb.parents('li') ) )
|
||||
},
|
||||
onThumb: function ( thumb) {
|
||||
thumb.css({display:'none',opacity: (thumb.parents('li').is('.active') ? '1' : '0.3') }).fadeIn(1500)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if ( $('#thumbstrip').length ) {
|
||||
$('#thumbstrip').scrollable( {
|
||||
items : '#thumbs',
|
||||
clickable: true,
|
||||
keyboard : false
|
||||
})
|
||||
if ( $('#thumbs li.active').length == 0 ){
|
||||
//$('div.scrollable').scrollable().click(0)
|
||||
$('#thumbs li:first').addClass('active')
|
||||
}
|
||||
}
|
||||
|
||||
<% content_for :javascript do %>
|
||||
<script type="text/javascript" src="/javascripts/swfupload/swfupload.js"></script>
|
||||
<% end %>
|
||||
|
||||
<style type="text/css">
|
||||
/* -----------------------------------------------
|
||||
www.swfupload.org
|
||||
Description: Common Screen Stylesheet for SWFUpload Demos
|
||||
Updated on: May 1, 2008
|
||||
----------------------------------------------- */
|
||||
|
||||
|
||||
/* -----------------------------------------------
|
||||
GLOBAL RESET
|
||||
----------------------------------------------- */
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-weight: inherit;
|
||||
font-style: inherit;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* remember to define focus styles! */
|
||||
:focus { outline: 0; }
|
||||
body {
|
||||
line-height: 1;
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
/* tables still need 'cellspacing="0"' in the markup */
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: "";
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: "" "";
|
||||
}
|
||||
|
||||
|
||||
/* -----------------------------------------------
|
||||
BASIC ELEMENTS
|
||||
----------------------------------------------- */
|
||||
|
||||
|
||||
/* -- Text Styles ------------------------------- */
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
font: 12px/1.4em Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #385ea2;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
strong { font-weight: 700; }
|
||||
|
||||
h1 {
|
||||
font: 28px/1em Arial, Helvetica, sans-serif;
|
||||
padding: 60px 20px 20px;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 a{
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
padding-top: 1em;
|
||||
padding-bottom: .25em;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin-top: .25em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
ul { padding: 4px 5px; }
|
||||
ul li {
|
||||
padding: 4px 5px;
|
||||
margin: 0 20px;
|
||||
list-style:square;
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
background:#edffb8 none repeat scroll 0%;
|
||||
border-color:#b2da3a;
|
||||
border-style:solid;
|
||||
border-width:1px 0;
|
||||
font-size: 1em;
|
||||
margin: 1em 0pt;
|
||||
overflow:auto;
|
||||
padding: 0.3em 0.4em;
|
||||
white-space:pre;
|
||||
}
|
||||
|
||||
/* -- Layout ------------------------------- */
|
||||
|
||||
|
||||
#header {
|
||||
background: #313131 url(http://demo.swfupload.org/v220/images/header-bg.jpg) repeat-x top left;
|
||||
height: 125px;
|
||||
position: relative;
|
||||
}
|
||||
#logo {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: url(http://demo.swfupload.org/v220/images/logo.gif) no-repeat 20px 20px;
|
||||
height: 106px;
|
||||
width: 272px;
|
||||
text-indent: -5000px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* hide link text */
|
||||
#logo a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-indent: -5000px;
|
||||
overflow: hidden;
|
||||
height: 106px;
|
||||
width: 272px;
|
||||
}
|
||||
|
||||
#version {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 85px;
|
||||
}
|
||||
|
||||
|
||||
#content { width: 680px;}
|
||||
#content { margin: 20px 90px; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* -- Form Styles ------------------------------- */
|
||||
form {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.fieldset {
|
||||
border: 1px solid #afe14c;
|
||||
margin: 10px 0;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
div.fieldset span.legend {
|
||||
position: relative;
|
||||
background-color: #FFF;
|
||||
padding: 3px;
|
||||
top: -30px;
|
||||
font: 700 14px Arial, Helvetica, sans-serif;
|
||||
color: #73b304;
|
||||
}
|
||||
|
||||
div.flash {
|
||||
width: 375px;
|
||||
margin: 10px 5px;
|
||||
border-color: #D9E4FF;
|
||||
|
||||
-moz-border-radius-topleft : 5px;
|
||||
-webkit-border-top-left-radius : 5px;
|
||||
-moz-border-radius-topright : 5px;
|
||||
-webkit-border-top-right-radius : 5px;
|
||||
-moz-border-radius-bottomleft : 5px;
|
||||
-webkit-border-bottom-left-radius : 5px;
|
||||
-moz-border-radius-bottomright : 5px;
|
||||
-webkit-border-bottom-right-radius : 5px;
|
||||
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border-width: 1px;
|
||||
margin-bottom: 10px;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[disabled]{ border: 1px solid #ccc } /* FF 2 Fix */
|
||||
|
||||
|
||||
label {
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
display:block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#btnSubmit { margin: 0 0 0 155px ; }
|
||||
|
||||
/* -- Table Styles ------------------------------- */
|
||||
td {
|
||||
font: 10pt Helvetica, Arial, sans-serif;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.progressWrapper {
|
||||
width: 357px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progressContainer {
|
||||
margin: 5px;
|
||||
padding: 4px;
|
||||
border: solid 1px #E8E8E8;
|
||||
background-color: #F7F7F7;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Message */
|
||||
.message {
|
||||
margin: 1em 0;
|
||||
padding: 10px 20px;
|
||||
border: solid 1px #FFDD99;
|
||||
background-color: #FFFFCC;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Error */
|
||||
.red {
|
||||
border: solid 1px #B50000;
|
||||
background-color: #FFEBEB;
|
||||
}
|
||||
|
||||
/* Current */
|
||||
.green {
|
||||
border: solid 1px #DDF0DD;
|
||||
background-color: #EBFFEB;
|
||||
}
|
||||
|
||||
/* Complete */
|
||||
.blue {
|
||||
border: solid 1px #CEE2F2;
|
||||
background-color: #F0F5FF;
|
||||
}
|
||||
|
||||
.progressName {
|
||||
font-size: 8pt;
|
||||
font-weight: 700;
|
||||
color: #555;
|
||||
width: 323px;
|
||||
height: 14px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progressBarInProgress,
|
||||
.progressBarComplete,
|
||||
.progressBarError {
|
||||
font-size: 0;
|
||||
width: 0%;
|
||||
height: 2px;
|
||||
background-color: blue;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.progressBarComplete {
|
||||
width: 100%;
|
||||
background-color: green;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.progressBarError {
|
||||
width: 100%;
|
||||
background-color: red;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.progressBarStatus {
|
||||
margin-top: 2px;
|
||||
width: 337px;
|
||||
font-size: 7pt;
|
||||
font-family: Arial;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a.progressCancel {
|
||||
font-size: 0;
|
||||
display: block;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
background-image: url(http://demo.swfupload.org/v220/images/cancelbutton.gif);
|
||||
background-repeat: no-repeat;
|
||||
background-position: -14px 0px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
a.progressCancel:hover {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
|
||||
/* -- SWFUpload Object Styles ------------------------------- */
|
||||
.swfupload {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
function fileQueueError(file, errorCode, message) {
|
||||
try {
|
||||
var imageName = "error.gif";
|
||||
var errorName = "";
|
||||
if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) {
|
||||
errorName = "You have attempted to queue too many files.";
|
||||
}
|
||||
|
||||
if (errorName !== "") {
|
||||
alert(errorName);
|
||||
return;
|
||||
}
|
||||
|
||||
switch (errorCode) {
|
||||
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
|
||||
imageName = "zerobyte.gif";
|
||||
break;
|
||||
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
|
||||
imageName = "toobig.gif";
|
||||
break;
|
||||
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
|
||||
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
|
||||
default:
|
||||
alert(message);
|
||||
break;
|
||||
}
|
||||
|
||||
addImage("http://demo.swfupload.org/v220/applicationdemo/images/" + imageName);
|
||||
|
||||
} catch (ex) {
|
||||
this.debug(ex);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function fileDialogComplete(numFilesSelected, numFilesQueued) {
|
||||
try {
|
||||
if (numFilesQueued > 0) {
|
||||
this.startUpload();
|
||||
}
|
||||
} catch (ex) {
|
||||
this.debug(ex);
|
||||
}
|
||||
}
|
||||
|
||||
function uploadProgress(file, bytesLoaded) {
|
||||
|
||||
try {
|
||||
var percent = Math.ceil((bytesLoaded / file.size) * 100);
|
||||
|
||||
var progress = new FileProgress(file, this.customSettings.upload_target);
|
||||
progress.setProgress(percent);
|
||||
if (percent === 100) {
|
||||
progress.setStatus("Creating thumbnail...");
|
||||
progress.toggleCancel(false, this);
|
||||
} else {
|
||||
progress.setStatus("Uploading...");
|
||||
progress.toggleCancel(true, this);
|
||||
}
|
||||
} catch (ex) {
|
||||
this.debug(ex);
|
||||
}
|
||||
}
|
||||
|
||||
function uploadSuccess(file, serverData) {
|
||||
try {
|
||||
var progress = new FileProgress(file, this.customSettings.upload_target);
|
||||
|
||||
if (serverData.substring(0, 7) === "FILEID:") {
|
||||
addImage(serverData.substring(7));
|
||||
|
||||
progress.setStatus("Thumbnail Created.");
|
||||
progress.toggleCancel(false);
|
||||
} else {
|
||||
addImage("http://demo.swfupload.org/v220/applicationdemo/images/error.gif");
|
||||
progress.setStatus("Error.");
|
||||
progress.toggleCancel(false);
|
||||
alert(serverData);
|
||||
|
||||
}
|
||||
|
||||
|
||||
} catch (ex) {
|
||||
this.debug(ex);
|
||||
}
|
||||
}
|
||||
|
||||
function uploadComplete(file) {
|
||||
try {
|
||||
/* I want the next upload to continue automatically so I'll call startUpload here */
|
||||
if (this.getStats().files_queued > 0) {
|
||||
this.startUpload();
|
||||
} else {
|
||||
var progress = new FileProgress(file, this.customSettings.upload_target);
|
||||
progress.setComplete();
|
||||
progress.setStatus("All images received.");
|
||||
progress.toggleCancel(false);
|
||||
}
|
||||
} catch (ex) {
|
||||
this.debug(ex);
|
||||
}
|
||||
}
|
||||
|
||||
function uploadError(file, errorCode, message) {
|
||||
var imageName = "error.gif";
|
||||
var progress;
|
||||
try {
|
||||
switch (errorCode) {
|
||||
case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
|
||||
try {
|
||||
progress = new FileProgress(file, this.customSettings.upload_target);
|
||||
progress.setCancelled();
|
||||
progress.setStatus("Cancelled");
|
||||
progress.toggleCancel(false);
|
||||
}
|
||||
catch (ex1) {
|
||||
this.debug(ex1);
|
||||
}
|
||||
break;
|
||||
case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
|
||||
try {
|
||||
progress = new FileProgress(file, this.customSettings.upload_target);
|
||||
progress.setCancelled();
|
||||
progress.setStatus("Stopped");
|
||||
progress.toggleCancel(true);
|
||||
}
|
||||
catch (ex2) {
|
||||
this.debug(ex2);
|
||||
}
|
||||
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
|
||||
imageName = "uploadlimit.gif";
|
||||
break;
|
||||
default:
|
||||
alert(message);
|
||||
break;
|
||||
}
|
||||
|
||||
addImage("http://demo.swfupload.org/v220/applicationdemo/images/" + imageName);
|
||||
|
||||
} catch (ex3) {
|
||||
this.debug(ex3);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function addImage(src) {
|
||||
var newImg = document.createElement("img");
|
||||
newImg.style.margin = "5px";
|
||||
|
||||
document.getElementById("thumbnails").appendChild(newImg);
|
||||
if (newImg.filters) {
|
||||
try {
|
||||
newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
|
||||
} catch (e) {
|
||||
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
|
||||
newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
|
||||
}
|
||||
} else {
|
||||
newImg.style.opacity = 0;
|
||||
}
|
||||
|
||||
newImg.onload = function () {
|
||||
fadeIn(newImg, 0);
|
||||
};
|
||||
newImg.src = src;
|
||||
}
|
||||
|
||||
function fadeIn(element, opacity) {
|
||||
var reduceOpacityBy = 5;
|
||||
var rate = 30; // 15 fps
|
||||
|
||||
|
||||
if (opacity < 100) {
|
||||
opacity += reduceOpacityBy;
|
||||
if (opacity > 100) {
|
||||
opacity = 100;
|
||||
}
|
||||
|
||||
if (element.filters) {
|
||||
try {
|
||||
element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
|
||||
} catch (e) {
|
||||
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
|
||||
element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
|
||||
}
|
||||
} else {
|
||||
element.style.opacity = opacity / 100;
|
||||
}
|
||||
}
|
||||
|
||||
if (opacity < 100) {
|
||||
setTimeout(function () {
|
||||
fadeIn(element, opacity);
|
||||
}, rate);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ******************************************
|
||||
* FileProgress Object
|
||||
* Control object for displaying file info
|
||||
* ****************************************** */
|
||||
|
||||
function FileProgress(file, targetID) {
|
||||
this.fileProgressID = "divFileProgress";
|
||||
|
||||
this.fileProgressWrapper = document.getElementById(this.fileProgressID);
|
||||
if (!this.fileProgressWrapper) {
|
||||
this.fileProgressWrapper = document.createElement("div");
|
||||
this.fileProgressWrapper.className = "progressWrapper";
|
||||
this.fileProgressWrapper.id = this.fileProgressID;
|
||||
|
||||
this.fileProgressElement = document.createElement("div");
|
||||
this.fileProgressElement.className = "progressContainer";
|
||||
|
||||
var progressCancel = document.createElement("a");
|
||||
progressCancel.className = "progressCancel";
|
||||
progressCancel.href = "#";
|
||||
progressCancel.style.visibility = "hidden";
|
||||
progressCancel.appendChild(document.createTextNode(" "));
|
||||
|
||||
var progressText = document.createElement("div");
|
||||
progressText.className = "progressName";
|
||||
progressText.appendChild(document.createTextNode(file.name));
|
||||
|
||||
var progressBar = document.createElement("div");
|
||||
progressBar.className = "progressBarInProgress";
|
||||
|
||||
var progressStatus = document.createElement("div");
|
||||
progressStatus.className = "progressBarStatus";
|
||||
progressStatus.innerHTML = " ";
|
||||
|
||||
this.fileProgressElement.appendChild(progressCancel);
|
||||
this.fileProgressElement.appendChild(progressText);
|
||||
this.fileProgressElement.appendChild(progressStatus);
|
||||
this.fileProgressElement.appendChild(progressBar);
|
||||
|
||||
this.fileProgressWrapper.appendChild(this.fileProgressElement);
|
||||
|
||||
document.getElementById(targetID).appendChild(this.fileProgressWrapper);
|
||||
fadeIn(this.fileProgressWrapper, 0);
|
||||
|
||||
} else {
|
||||
this.fileProgressElement = this.fileProgressWrapper.firstChild;
|
||||
this.fileProgressElement.childNodes[1].firstChild.nodeValue = file.name;
|
||||
}
|
||||
|
||||
this.height = this.fileProgressWrapper.offsetHeight;
|
||||
|
||||
}
|
||||
FileProgress.prototype.setProgress = function (percentage) {
|
||||
this.fileProgressElement.className = "progressContainer green";
|
||||
this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
|
||||
this.fileProgressElement.childNodes[3].style.width = percentage + "%";
|
||||
};
|
||||
FileProgress.prototype.setComplete = function () {
|
||||
this.fileProgressElement.className = "progressContainer blue";
|
||||
this.fileProgressElement.childNodes[3].className = "progressBarComplete";
|
||||
this.fileProgressElement.childNodes[3].style.width = "";
|
||||
|
||||
};
|
||||
FileProgress.prototype.setError = function () {
|
||||
this.fileProgressElement.className = "progressContainer red";
|
||||
this.fileProgressElement.childNodes[3].className = "progressBarError";
|
||||
this.fileProgressElement.childNodes[3].style.width = "";
|
||||
|
||||
};
|
||||
FileProgress.prototype.setCancelled = function () {
|
||||
this.fileProgressElement.className = "progressContainer";
|
||||
this.fileProgressElement.childNodes[3].className = "progressBarError";
|
||||
this.fileProgressElement.childNodes[3].style.width = "";
|
||||
|
||||
};
|
||||
FileProgress.prototype.setStatus = function (status) {
|
||||
this.fileProgressElement.childNodes[2].innerHTML = status;
|
||||
};
|
||||
|
||||
FileProgress.prototype.toggleCancel = function (show, swfuploadInstance) {
|
||||
this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden";
|
||||
if (swfuploadInstance) {
|
||||
var fileID = this.fileProgressID;
|
||||
this.fileProgressElement.childNodes[0].onclick = function () {
|
||||
swfuploadInstance.cancelUpload(fileID);
|
||||
return false;
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
var swfu;
|
||||
window.onload = function () {
|
||||
swfu = new SWFUpload({
|
||||
// Backend Settings
|
||||
upload_url: "<%= new_upload_path_with_session_information %>",
|
||||
post_params : {
|
||||
'method' : "_put",
|
||||
'authenticity_token' : '<%= u form_authenticity_token -%>',
|
||||
'photo[album_id]' : "<%= @album.id %>"
|
||||
},
|
||||
|
||||
// File Upload Settings
|
||||
file_size_limit : "2 MB", // 2MB
|
||||
file_types : "*.jpg",
|
||||
file_types_description : "JPG Images",
|
||||
file_upload_limit : "0",
|
||||
|
||||
// Event Handler Settings - these functions as defined in Handlers.js
|
||||
// The handlers are not part of SWFUpload but are part of my website and control how
|
||||
// my website reacts to the SWFUpload events.
|
||||
file_queue_error_handler : fileQueueError,
|
||||
file_dialog_complete_handler : fileDialogComplete,
|
||||
upload_progress_handler : uploadProgress,
|
||||
upload_error_handler : uploadError,
|
||||
upload_success_handler : uploadSuccess,
|
||||
upload_complete_handler : uploadComplete,
|
||||
|
||||
// Button Settings
|
||||
button_image_url : "http://demo.swfupload.org/v220/applicationdemo/images/SmallSpyGlassWithTransperancy_17x18.png",
|
||||
button_placeholder_id : "spanButtonPlaceholder",
|
||||
button_width: 180,
|
||||
button_height: 18,
|
||||
button_text : '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',
|
||||
button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',
|
||||
button_text_top_padding: 0,
|
||||
button_text_left_padding: 18,
|
||||
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
|
||||
button_cursor: SWFUpload.CURSOR.HAND,
|
||||
|
||||
// Flash Settings
|
||||
flash_url : "/javascripts/swfupload/Flash/swfupload.swf",
|
||||
|
||||
custom_settings : {
|
||||
upload_target : "divFileProgressContainer"
|
||||
},
|
||||
|
||||
// Debug Settings
|
||||
debug: false
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<div id="content">
|
||||
<h2>Application Demo</h2>
|
||||
<p>This demo shows how SWFUpload can behave like an AJAX application. Images are uploaded by SWFUpload then some JavaScript is used to display the thumbnails without reloading the page.</p>
|
||||
<% form_for(Photo.new) do |f| %>
|
||||
<div style="display: inline; border: solid 1px #7FAAFF; background-color: #C5D9FF; padding: 2px;">
|
||||
<span id="spanButtonPlaceholder"></span>
|
||||
</div>
|
||||
<% end %>
|
||||
<div id="divFileProgressContainer" style="height: 75px;"></div>
|
||||
<div id="thumbnails"></div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue