This is the part of code:
inprogress = false;
function getid(id) {
return document.getElementById(id);
}
var uploader = new plupload.Uploader({
runtimes : 'gears,html5,flash,silverlight,browserplus',
browse_button : 'link-browse',
max_file_size : '100mb',
url : 'site/upload/process.php?dir=<?php echo $uplid; ?>',
flash_swf_url : 'site/upload/plupload.flash.swf',
silverlight_xap_url : 'site/upload/plupload.silverlight.xap',
});
uploader.bind('Init', function(up, params) {
//$('filelist').innerHTML = "<div>Current runtime: " + params.runtime + "</div>";
});
uploader.bind('FilesAdded', function(up, files) {
if(uploader.files.length <= 0){
var element = document.getElementById('standby');
element.parentNode.removeChild(element);
}
if(up.files.length > 4 || uploader.files.length > 4)
{
alert('Only 5 files per upload !');
return false;
}
for (var i in files) {
getid('filelist').innerHTML += '<div class="item" id="' + files[i].id + '"><div class="name">' + files[i].name + '</div><div onclick="removeme(\''+files[i].id+'\')" id="remove-'+files[i].id+'" class="remove"></div><div class="size">[ ' + plupload.formatSize(files[i].size) + ' ]</div><div class="percent"></div></div>';
}
});
uploader.bind('UploadFile', function(up, file) {
getid('submit-form').innerHTML += '<input type="hidden" name="file-' + file.id + '" value="' + file.name + '" />';
});
uploader.bind('UploadProgress', function(up, file) {
getid(file.id).getElementsByTagName('div')[3].innerHTML = '<span>' + file.percent + "%</span>";
});
uploader.bind('StateChanged', function(uploader) {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
window.location = "./dl/<?php echo $uplid; ?>"
}
});
getid('link-upload').onclick = function() {
if(uploader.files.length < 1){
alert('Please select files first.');
return false;
}
inprogress = true;
uploader.start();
return false;
};
uploader.init();
function removeme(id){
if(inprogress) return false;
if(uploader.files.length == 1)
getid('filelist').innerHTML += '<div id="standby"></div>';
var element = document.getElementById(id);
element.parentNode.removeChild(element);
var toremove = '';
for(var i in uploader.files){
if(uploader.files[i].id === id){
toremove = i;
}
}
uploader.files.splice(toremove, 1);
}
I can limit of files being uploaded,
And if I have 4 files selected, and I select 5 more -> it will show error
but if I at first select for example 14 files, they will be shown in "filelist".
How to limit that, or where to put "return false";
Thanks for any help :)
- Working for Pupload v2.0
$("#uploader").pluploadQueue({
runtimes: 'html5,html4',
url: 'upload.php',
max_file_size: '2mb',
unique_names: false,
rename: true,
prevent_duplicates: true,
init : {
FilesAdded: function(up, files) {
var max_files = 12;
plupload.each(files, function(file) {
if (up.files.length > max_files) {
alert('You are allowed to add only ' + max_files + ' files.');
up.removeFile(file);
}
});
if (up.files.length >= max_files) {
$('#pickfiles').hide('slow');
}
},
FilesRemoved: function(up, files) {
if (up.files.length < max_files) {
$('#pickfiles').fadeIn('slow');
}
}
},
resize : {width : 700, height : 700, quality : 90},
filters: [
{
title: "Image files",
extensions: "jpg,jpeg,gif,png"
}
]
});
Expand if(up.files.length > 4 || uploader.files.length > 4) to if(up.files.length > 4 || uploader.files.length > 4 || files.length > 4).
Just use max_file_count: 4 option to limit amount files to upload
in reply to Rob W's answer, up and uploader is the same since it's the uploader instance, hence redundant; and it would be useful to also check (uploader.files.length + files.length) > 4 in order to check if a couple of incoming files would exceed the 4 when taking the already "registered" files into account (e.g. somebody adds 2 files and then 3 files subsequently).
So in conclusion, I would recommend
if(uploader.files.length > 4 || files.length > 4 || (uploader.files.length + files.length) > 4) {
Related
Any help is greatly appreciated! I've spent so long searching but I haven't found a solution or a problem like mine...
I'm writing an Electron application, and as part of it, there is a section for the users to drag and drop files. I'm then taking that file and uploading it to AWS S3.
The first time I drag and drop it goes into my function but no request is sent out to AWS S3, I then drag and drop again and it sends out the expected request and saves the file however it's the first requests information (name, path & body), and from then on when I drag and drop the file it send outs the request every time but always with the previous request's info. It's like its one sequence behind....
This is the s3 code:
function submitNewFileS3(file, filepath) {
const AWS = require('aws-sdk');
AWS.config = new AWS.Config({
accessKeyId: localStorage.getItem("accessKeyId"),
secretAccessKey: localStorage.getItem("secretAccessKey"),
region: 'eu-west-2'
});
var upload = new AWS.S3.ManagedUpload({
params: {
Bucket: 'sampe-bucket',
Key: filepath, // File name you want to save as in S3
Body: file
}
});
return upload.promise();
}
How I call the function:
var reader = new FileReader();
reader.onload = function (e2) {
// finished reading file data.
finishUploading(e2.target.result);
}
function finishUploading(url) {
// strip off the data: url prefix to get just the base64-encoded bytes
var data;
if (url.indexOf('data:image') > -1) {
data = url.replace(/^data:image\/\w+;base64,/, "");
} else if (url.indexOf('data:application') > -1) {
data = url.replace(/^data:application\/\w+;base64,/, "");
}
//only firing after sencon upload
var buf = Buffer.from(data, 'base64');
var filePathS3 = directory + (fileName).replace(/\-/g, "_").replace(/ /g, "_");
submitNewFileS3(buf, filePathS3).then(function (response) {
console.log(response);
}).catch(function (response) {
console.log(response);
});
}
reader.readAsDataURL(f); // start reading the file data.
Does anyone have any suggestions - I'm going out of my mind...I've tried so many tutorials and solutions and they all work...on the second call...
I've double checked all the required data is ready before making the request.
Many thanks in advance!
EDIT - more of what's going on in my main before sending my file to be uploaded:
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var directory;
if (e.target.id == 'drop_zone_overview') {
//placed in general area, check which folders are showing to get dir
console.log(e);
//get whats visible
var whatPath;
$(".icon").each(function () {
if (this.style.display != 'none') {
whatPath = this.id;
}
});
//pick one and check what root we're in
var pathArray = whatPath.split('-');
console.log(pathArray);
} else if (e.target.id == 'drop_zone_individual') {
//placed on top of folder, check dir
directory = (e.target).getAttribute('data-targetfolder');
console.log(directory);
}
var files = e.dataTransfer.files,
folder;
for (var i = 0, f; f = files[i]; i++) { // iterate in the files dropped
if (!f.type && f.size % 4096 == 0) {
// The file is a folder
folder = true;
} else {
// The file is not a folder
folder = false;
}
const fs = require('fs');
console.log(f);
var fileName = f.name;
var reader = new FileReader();
reader.onload = function (e2) {
// finished reading file data.
finishUploading(e2.target.result);
}
function finishUploading(url) {
// strip off the data: url prefix to get just the base64-encoded bytes
var data;
if (url.indexOf('data:image') > -1) {
data = url.replace(/^data:image\/\w+;base64,/, "");
} else if (url.indexOf('data:application') > -1) {
data = url.replace(/^data:application\/\w+;base64,/, "");
}
var buf = Buffer.from(data, 'base64');
var filePathS3 = directory + (fileName).replace(/\-/g, "_").replace(/ /g, "_");
submitNewFileS3(buf, filePathS3).then(function (response) {
console.log(response);
}).catch(function (response) {
console.log(response);
});
}
reader.readAsDataURL(f); // start reading the file data.
uploadedFiles.push(f);
}
uploadedFiles.forEach(function (file) {
var pathKey = directory + (file.name).replace(/\-/g, "_");
pathKey = pathKey.replace(/ /g, "_").replace(/\//g, '-').replace(/\./g, '__');
if ($('#' + pathKey).length) {
//filename already exists in directory
alert(file.name + ' already exists in folder ' + directory);
} else {
var displayDiv;
if (file.type == 'image/png') {
//image
//add to directory
displayDiv = '<img id="' + pathKey + '" class="fileInfo thumb file-type file-type-img" src="' + URL.createObjectURL(file) + '" ondblclick="preview_image(this)"/>'
} else if (file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
//xlsx doc
displayDiv = '<div id="' + pathKey + '" class="fileInfo thumb file-type file-type-xlsx" data-downloadLink="' + URL.createObjectURL(file) + '" ></div>';
} else if (file.type == 'application/pdf') {
//pdf doc
displayDiv = '<div id="' + pathKey + '" class="fileInfo thumb file-type file-type-pdf" data-downloadLink="' + URL.createObjectURL(file) + '" ></div>';
} else if (file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
//word doc
displayDiv = '<div id="' + pathKey + '" class="fileInfo thumb file-type file-type-docx" data-downloadLink="' + URL.createObjectURL(file) + '" </div>';
console.log('its a doc');
} else if (file.type == 'application/x-zip-compressed') {
//zip file doc
displayDiv = '<div id="' + pathKey + '" class="fileInfo thumb file-type file-type-zip" data-downloadLink="' + URL.createObjectURL(file) + '" </div>';
} else if (file.type == '') {
//folder
console.log('what typep is this~~~~~ ' + file.type);
file.name = file.name + '/';
}
//save to folder array
if (file.type == 'application/x-zip-compressed' || file.type == '') {
var htmlTemplate = [
getHtml([
'<li id=' + pathKey.replace(/ /g, "_").replace(/\//g, '-').replace(/\./g, '__') + ' class="icon folderItems fileInfo thumb" data-downloadLink="directory_' + pathKey + '" ondblclick="viewAlbum(this.id)" style="display:none">',
'<i id="drop_zone_individual" data-targetFolder="' + pathKey + '" class="folders fas fa-folder" style="font-size: 115px; color: rgb(13, 36, 60); cursor: pointer;"></i>',
'<div class="folderLabel" style="text-align:center">' + file.name + '</div>',
'</li>'
])
];
folders.push({
Key: directory + (file.name).replace(/\-/g, "_").replace(/ /g, "_"),
LastModified: file.lastModifiedDate,
Size: file.size,
});
} else {
//append to ui file list
var htmlTemplate = [
getHtml([
'<li id=' + pathKey + ' class="icon downloadableItem" style="display:none">',
'<span>',
'<div style="text-align:center">',
displayDiv,
'</div>',
'<div style="text-align:center">',
'<span>',
file.name,
'</span>',
'</div>',
'</span>',
'</li>'
])
];
//save to folder list
folders.push({
Key: directory + (file.name).replace(/\-/g, "_").replace(/ /g, "_"),
LastModified: file.lastModifiedDate,
Size: file.size,
signedUrl: URL.createObjectURL(file)
});
}
localStorage.setItem("s3Objects", JSON.stringify(folders));
$('#photoAlbumViewerList').append(htmlTemplate);
console.log(folders);
$("#" + pathKey).click(function (e) {
getAlbumInfo(this.id);
if (e.shiftKey) {
if ($(this).hasClass('thumb')) {
$(this).removeClass('thumb').addClass('thumbChecked');
$(this).css("border", "2px solid #c32032");
// $(this).attr("data-downloadLink");
links.push($(this).attr("data-downloadLink"));
if (links.length != 0) {
$('.download').css("display", "block");
}
} else if ($(this).hasClass('thumbChecked')) {
$(this).removeClass('thumbChecked').addClass('thumb');
$(this).css("border", "2px solid white");
var itemtoRemove = $(this).attr('src');
links.splice($.inArray(itemtoRemove, links), 1);
console.log(links);
if (links.length == 0) {
$('.download').css("display", "none");
}
}
}
});
}
});
uploadedFiles = [];
e.target.classList.remove('drop_zone_hovered');
$('#drop_zone_text').hide();
}
As an FYI - the issue lied where I reinitialised AWS and S3 variables, it wasn't needed as I set it at the start of launch and reinitialising it slowed it all down while it remade the connection!
I have this script for show/hide divs
var folder;
$(function() {
$('#teamleag').change(function() {
if ($('#teamleag').val() == 'footballal') {
$('#selectleag').show();
$('#selectleag1').hide();
$('#selectleag2').hide();
folder = "basket";
} else if ($('#teamleag').val() == 'footballleomit') {
$('#selectleag').hide();
$('#selectleag1').show();
$('#selectleag2').hide();
folder = "footballal";
} else if ($('#teamleag').val() == 'basketball') {
$('#selectleag').hide();
$('#selectleag1').hide();
$('#selectleag2').show();
folder = "football_leomit";
}
});
});
Inside the div I have select option tag that show image when selected
$(document).ready(function() {
$("#hometeam").change(function() {
var src = $(this).val();
$("#imagePreview").html(src ? '<img class=home src="img/teamslogo/' + folder + '/' + src + '">' : '');
});
});
$(document).ready(function() {
$("#awayteam").change(function() {
var src = $(this).val();
$("#imagePreview1").html(src ? '<img class=home src="img/teamslogo/' + folder + '/' + src + '">' : '');
});
});
The images are coming from different folders. How can I pass a variable with the folder name and link it to the div selected. I tried to put folder global variable and pass it between them but I get undefined
Take hidden field like below
<input id="folderName" type="hidden" value="">
$(function() {
$('#teamleag').change(function() {
if ($('#teamleag').val() == 'footballal') {
$('#selectleag').show();
$('#selectleag1').hide();
$('#selectleag2').hide();
$('#folderName').val('basket');
} else if ($('#teamleag').val() == 'footballleomit') {
$('#selectleag').hide();
$('#selectleag1').show();
$('#selectleag2').hide();
$('#folderName').val('footballal');
} else if ($('#teamleag').val() == 'basketball') {
$('#selectleag').hide();
$('#selectleag1').hide();
$('#selectleag2').show();
$('#folderName').val('football_leomit');
}
});
});
$(document).ready(function() {
$("#awayteam").change(function() {
var src = $(this).val();
var folder = $("#folderName").val();
$("#imagePreview1").html(src ? '<img class="home" src="img/teamslogo/' + folder + '/' + src + '">' : '');
});
});
Hope this code work fine ....
I have a function that is part of a fileupload, however when i try to validate the files through an array, wether i use an "accepted" file or a "wrong" file, i get the same end result which is the alert message on the return false statement of the code.
can someone spot an error here ? there are no syntax errors in the function.
handleFiles = function (files,e){
var rand = Math.floor((Math.random()*100000)+3);
for(var i=0, file; file = files[i]; i++) {
var fileType = new Array("psd","ai","eps","svg","png","doc","docx","jpg","jpeg","pptx","ppt","gif");
var file_extension = file.name.split('.').pop().toLowerCase();
if (parseInt(file.size / 1024) > 204800) {
alert("Filen er \""+file.name+"\" for stor");
return false;
}
if (fileType[i]==file_extension)
{
var src = '/printuploads/upload.png'
var template = '<div class="eachImage" id="'+rand+'">';
template += '<span class="preview" id="'+rand+'"><img src="'+src+'"><span class="overlay"><span class="updone"></span></span>';
template += '</span>'
template += '<div class="progress" id="'+rand+'"><span></span></div>';
if($("#dropbox .eachImage").html() == null)
$("#dropbox").html(template);
else
$("#dropbox").append(template);
upload(file,rand);
return true;
}
alert("Forkert filformat");
return false;
}
};
Your validation to check if the file extension is supported is incorrect:
fileType[i]==file_extension
Here, i is the index of file, not the extension. So every file extension is being compared with "psd".
Instead it should be checking if the extension is available in the array file_extension. You can do that using Array#some method:
fileType.some(t => t == file_extension)
Or, you can simply check that the extension belongs to the array using indexOf:
fileType.indexOf(file_extension) >= 0
Here's a working snippet, you can check the logged value in the console:
var handleFiles = function(files, e) {
var rand = Math.floor((Math.random() * 100000) + 3);
for (var i = 0, file; file = files[i]; i++) {
var fileType = new Array("psd", "ai", "eps", "svg", "png", "doc", "docx", "jpg", "jpeg", "pptx", "ppt", "gif");
var file_extension = file.name.split('.').pop().toLowerCase();
if (parseInt(file.size / 1024) > 204800) {
alert("Filen er \"" + file.name + "\" for stor");
return false;
}
if (fileType.some(t => t == file_extension)) {
console.log("Extension matches");
var src = '/printuploads/upload.png'
var template = '<div class="eachImage" id="' + rand + '">';
template += '<span class="preview" id="' + rand + '"><img src="' + src + '"><span class="overlay"><span class="updone"></span></span>';
template += '</span>'
template += '<div class="progress" id="' + rand + '"><span></span></div>';
if ($("#dropbox .eachImage").html() == null)
$("#dropbox").html(template);
else
$("#dropbox").append(template);
upload(file, rand);
return true;
}
alert("Forkert filformat");
return false;
}
};
function upload() {};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type ="file" onchange="handleFiles(this.files, event);">
I have an ajax based website & i have successfully added support for the back button, which works fine. My issue is that when i go back i can not go forward.
How can i add an a future item in history? Or enable the forward button?
Is there an event to manipulate the forward button?
history buttons
HASHBANG LIBRARY
function hashbang(pages){
this.currentPage = [];
this.currentPageIndex = 0;
this.displayer = true;
var that = this;
this.setup = function(){
N$(window).event('popstate', function(node, event){
console.log('pop');
document.body.style.display = "none";
that.displayer = false;
that.removeResources();
that.currentPageIndex++;
//var hash = (event.state)? event.state.page : window.location.hash.slice(1).replace('!','');
console.log(that.currentPage[that.currentPage.length - 1 - that.currentPageIndex]);
if(pages[that.currentPage[that.currentPage.length - 1 - that.currentPageIndex]['src']]){
that.currentPage[that.currentPage.length - 1 - that.currentPageIndex]['params']['hash'] = '#!' + that.currentPage[that.currentPage.length - 1 - that.currentPageIndex]['params']['hash'];
that.changePage(that.currentPage[that.currentPage.length - 1 - that.currentPageIndex]['src'], that.currentPage[that.currentPage.length - 1 - that.currentPageIndex]['js'], that.currentPage[that.currentPage.length - 1 - that.currentPageIndex]['into'], that.currentPage[that.currentPage.length - 1 - that.currentPageIndex]['params'], true);
}
});
}
this.state = function(page_, update){
N$.ajax('../php/ajax/AJAX_BASE.php', 'post', {}, function(AJAX_BASE){//get base
if(window.history.pushState && window.history.replaceState){//compatibility check
if(!update){
if(window.history.state != null){
if(window.history.state.page != page_){// if page is not page_
window.history.pushState({page: page_}, '', AJAX_BASE+page_);//push page into history
}else{
try{
window.history.replaceState({page:page_}, '', AJAX_BASE+page_);
}catch(error){
}
}
}else{
window.history.pushState({page: page_}, '', AJAX_BASE+page_);
}
}else{
window.location.hash = '!'+page_;
}
}
}, true);
}
this.loadPage = function(src, func_array, into, params, prevent_push){
console.log('loadPage:::: ' + src);
if(typeof params != typeof {})
params = {};
if(params['hash'] == undefined){
params['hash'] = window.location.hash;
}else{
params['hash'] = params['hash'];
}
this.state(src + params['hash'], false);
params['hash'] = params['hash'].replace(/#!/g, "-").slice(1);
var mobile = ( (browser)?( (browser.loaded_mobile)? browser.loaded_mobile : false ): false);
N$.loadCSS(src + '_' + mobile + '.css', function(){
N$.ajax(src + '_' + mobile + '.php', 'POST',params, function(page_content){
N$(into).innerHTML(page_content);
if(func_array['initialize'])
func_array['initialize'](params);
console.log('attempted::' + src + '_' + mobile + '.js');
N$.loadJS(src + '_' + mobile + '.js', function(){
console.log('loaded::' + src + '_' + mobile + '.js');
if(func_array['execute'])
func_array['execute'](params);
});
if(func_array['terminate'])
func_array['terminate'](params);
if(!that.displayer)
document.body.style.display = "block";
}, false);
});
if(!prevent_push || prevent_push == undefined || prevent_push == null){
console.log('page pushed');
var pusher = {
'src': src,
'params': params,
'js': func_array,
'into': into
};
console.log(pusher);
that.currentPage.push(
pusher
);
}
}
this.loadPartial = function(src, func_array, into, params){
src = '/i/partials/' + src;
if(typeof params != typeof {})
params = {};
var mobile = ( (browser)?( (browser.loaded_mobile)? browser.loaded_mobile : false ): false);
N$.loadCSS(src + '_' + mobile + '.css', function(){
N$.ajax(src + '_' + mobile + '.php', 'POST',params, function(page_content){
N$(into).innerHTML(page_content);
if(func_array['initialize'])
func_array['initialize']();
N$.loadJS(src + '_' + mobile + '.js', function(){
if(func_array['execute'])
func_array['execute']();
});
if(func_array['terminate'])
func_array['terminate']();
}, false);
});
}
this.changePage = function(src, func_array, into, params, prevent_push){
console.log('changePage:::: ' + src);
document.body.style.display = "none";
this.displayer = false;
this.removeResources();
this.loadPage(src, func_array, into, params, prevent_push);
}
this.removeResources = function(){
var mobile = ( (browser)?( (browser.loaded_mobile)? browser.loaded_mobile : false ): false);
if(this.currentPage[this.currentPage.length - 1]){
N$.removeResource(this.currentPage[this.currentPage.length - 1]['src']+ '_' + mobile +'.css', N$.globals.loaded_css);
N$.removeResource(this.currentPage[this.currentPage.length - 1]['src']+ '_' + mobile +'.js', N$.globals.loaded_script);
}
}
}
This library works in adjacent to other libraries. My interest is on the popstate event
I have literally been trying to figure this out for the past 5 hours.
I have tried countless methods that I have found online and none have worked. So far, this method worked the best(only shows one error).
The error that I get is: "Uncaught ReferenceError: deletefile is not defined"
Please note that the error only occurs when I click the "Remove" hyperlink.
//UPLOAD CODE
$(document).ready(function() {
// Custom example logic
function $(id) {
return document.getElementById(id);
}
var uploader = new plupload.Uploader({
runtimes : 'gears,html5,flash,silverlight,browserplus',
browse_button : 'pickfiles',
container: 'container',
drop_element: 'uploadBox',
max_file_size : '10mb',
url : 'upload.php',
flash_swf_url : '../js/plupload/plupload.flash.swf',
silverlight_xap_url : '../js/plupload/plupload.silverlight.xap',
filters : [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
]
//,
//multipart_params : {
// "title" : $("#title").val(),
// "descripition" : $("#description").val()
//}
});
uploader.bind('Init', function(up, params) {
if (uploader.features.dragdrop) {
var target = $("uploadBox");
target.ondragover = function(event) {
event.dataTransfer.dropEffect = "move";
this.className = "dragover";
};
target.ondragenter = function() {
this.className = "dragover";
};
target.ondragleave = function() {
this.className = "";
};
target.ondrop = function() {
this.className = "";
};
}
});
uploader.bind('FilesAdded', function(up, files) {
function deletefile(i) {
uploader.splice(i,1);
}
for (var i in files) {
$('filelist').innerHTML += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') Remove<b></b></div>';
}
});
uploader.bind('UploadProgress', function(up, file) {
$(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
});
$('uploadfiles').onclick = function() {
uploader.start();
return false;
};
uploader.init();
});
Thanks.
Assuming filelist is an id (so, using $('#filelist')), you may try to replace this :
uploader.bind('FilesAdded', function(up, files) {
function deletefile(i) {
uploader.splice(i,1);
}
for (var i in files) {
$('filelist').innerHTML += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') Remove<b></b></div>';
}
});
with this :
uploader.bind('FilesAdded', function(up, files) {
var deleteHandle = function(uploaderObject, fileObject) {
return function(event) {
event.preventDefault();
uploaderObject.removeFile(fileObject);
$(this).closest("div#" + fileObject.id).remove();
};
};
for (var i in files) {
$('#filelist').append($('<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') Remove</div>'));
$('#deleteFile' + files[i].id).click(deleteHandle(up, files[i]));
}
});
I also suppose $('uploadfiles') should be $('#uploadfiles') but it is out of scope of the question.
Hope this will help.
// jquery plugin
uploader.plupload('getUploader').splice();
$('.plupload_filelist_content', uploader).empty();
uploader=newplupload.Uploader({
//-----
});
uploader.bind('FilesAdded',function(up,files)
{
//----
up.refresh();//RepositionFlash/Silverlight
});
uploader.bind('QueueChanged',function(up,files){
//#doc-filelist is the id of dive, which shows the Queue
$('#doc-filelist').html('');
$.each(uploader.files,function(i,file){
$('#doc-filelist').append(
'<divid="'+file.id+'">'+
file.name+'('+plupload.formatSize(file.size)+')<b></b>'+
'<spanclass="remove_file"data-file="'+i+'">X</span>'+
'</div>');
});
if(uploader.files.length==0){
$('#uploadfiles').addClass('disabled');
}
//console.log(uploader.files);
});
uploader.bind('UploadComplete', function (up, file) {
up.splice();
up.refresh();
});
$('.relevant-document').on('click','.remove_file',function(e){
uploader.splice($(this).attr('data-file'),1);
uploader.refresh();
});