This is sample Rails partial file to upload image to S3 using FineUploader. I need to use two/three partials like this to upload video/other file. (i.e.) multiple FU instances in a web page. Other than first instance, they won't show "Upload file" button.
<div class="model image-post">
<textarea id='with_photo' style="height: 60px;" placeholder="Share some words with this photo"></textarea>
<div class="uploadArea text-align-center relative-position">
<div id="manual-draggable-area">
<h4 class="normal-font margin-bottom-20">Drag Photo Here</h4>
<p>Or</p>
</div>
<ul id="post-upload"></ul>
</div>
<a style="color:white" href="#" onclick="window.imgUploader.uploadStoredFiles(); return false;">Post photo</a>
<div class="model-close"></div>
</div>
<script type="text/javascript">
$(function(){
window.responding_to = '';
window.group = '';
refresh_uploader();
});
function sanitiseName(name){
return name.replace(/[^a-zA-z0-9.]/,'').replace(/\s/g,"");
}
function refresh_uploader(){
window.num_files_uploaded = 0;
window.num_files_completed = 0;
var errorHandler = function(event, id, fileName, reason) {
window.num_files_uploaded = 0;
qq.log("id: " + id + ", fileName: " + fileName + ", reason: " + reason);
};
var submittedFile = function(id,fileName) {
var cleanName = sanitiseName(fileName);
imgUploader.setParams({key: "<%= temp %>"+cleanName,AWSAccessKeyId: '<%= MY_AWS_ACCESS_KEY %>',policy: '<%= raw policy %>',signature: '<%= raw signature %>'},id);
window.num_files_uploaded += 1;
return true;
};
var completed = function(id,name,responseJSON) {
var timeNow = (Math.floor((new Date(new Date().toUTCString()).getTime())/1000) + window.num_files_completed).toString();
window.num_files_completed += 1;
var cleanName = sanitiseName(name);
$.pnotify_remove_all();
var hash = {};
hash = {post: 'yes',text: $('#with_photo').val(),responding_to: window.responding_to,group: window.group,file: cleanName};
if(window.num_files_uploaded > 1){
hash['time'] = timeNow;
}
$.ajax({
type: 'POST',
url: '/home/images_uploaded',
data: hash
});
if(window.num_files_uploaded > 1){
if(window.num_files_completed == window.num_files_uploaded){
jQuery(".model.image-post").dialog("close");
$.pnotify({
title: 'Uploaded',
type: 'success',
text: 'Your photos were posted.'
});
window.group = '';
window.responding_to = '';
refresh_uploader();
}
}
else{
jQuery(".model.image-post").dialog("close");
$.pnotify({
title: 'Uploaded',
type: 'success',
text: 'Your photo was posted.'
});
window.group = '';
window.responding_to = '';
refresh_uploader();
}
};
window.imgUploader = new qq.FineUploader({
element: $('#post-upload')[0],
autoUpload: false,
paramsInBody: true,
uploadButtonText: "Select Files",
inputName: 'file',
multiple: true,
maxConnections: 1,
request: {
endpoint: "http://ift.tt/PsQMbo"
},
callbacks: {
onError: errorHandler,
onSubmit: submittedFile,
onComplete: completed
},
validation: {
sizeLimit: 102400,
allowedExtensions: ['jpeg', 'jpg','png']
}
});
}
</script>
Aucun commentaire:
Enregistrer un commentaire