i am using Plupload to upload images in my site. it work like a charm on all desktop browser but not in i-pad. When i click on upload button, it refreshes the page. I searched and didn't found anything to fix it. So finally, i m here to ask my question. I am using pl upload Core Api.
Here is my code:
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'local_file_upload', // you can pass an id...
container: document.getElementById('container'), // ... or DOM Element itself
url : "<?php echo WEBSITE_URL . '/includes/upload.php';?>",
unique_names : true,
multi_selection: false,
max_file_count: 1,
flash_swf_url : pl_upload_url+'Moxie.swf',
silverlight_xap_url : pl_upload_url+'/Moxie.xap',
filters : {
max_file_size : '10mb',
mime_types: [
{title : "Image files", extensions : "jpg,gif,png,jpeg"},
]
},
init: {
PostInit: function() {
document.getElementById('filelist').innerHTML = '';
document.getElementById('upload_images').onclick = function() {
uploader.start();
jQuery("#upload_images").css("display","none");
return false;
};
},
FileUploaded: function (up, file) {
if(image_path != "")
{
jQuery("#filelist").css("display","none");
var ajaxURL = "../includes/ajax.php";
jQuery.post(ajaxURL,"image_path="+image_path+"&ajax=true&action=uploadImage",function(data)
{
jQuery("#preview_image").html("<img src='<?php echo WEBSITE_URL.'/uploads/users/'.$user_id.'/thumbnail/'?>"+file.target_name+"' style='width:100%'/>");
});
}
else
{
alert("<?php echo _("Kinldy select image to upload");?>");
}
},
FilesAdded: function(up, files) {
if (uploader.files.length == 2) {
uploader.removeFile(uploader.files[0]);
}
plupload.each(files, function(file) {
jQuery("#filelist").css("display","block");
var img_type = file.name;
var type = img_type.split(".");
image_path = file.id+"."+type[1];
document.getElementById('filelist').innerHTML = '<div id="' + file.id + '" >' + img_type + ' (' + plupload.formatSize(file.size) + ') <b image_path="'+file.id+"."+type[1]+'" style="color:#fff;" onclick="removeImage(this);">x</b></div>';
jQuery("#upload_images").css("display","block");
});
},
UploadProgress: function(up, file) {
jQuery("#"+file.id).find("b").html('<span>' + file.percent + "%</span>");
},
Error: function(up, err) {
document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
}
}
});
uploader.init();
Waiting for some reply. Thanks
I am having a similar problem with plupload on the ipad.
I copied your code and it indeed refreshes the page.
I tried removing the "PostInit"-code and that stopped the refreshing of the page.
Related
Using CKEditor to send email and upload attachments. Below is the minimal configuration I've from this source.
CKEDITOR.replace('email.Message', {
filebrowserUploadUrl: '/Controller/UploadAttachment',
extraPlugins: 'attach', // attachment plugin
toolbar: this.customToolbar, //use custom toolbar
autoCloseUpload: true, //autoClose attachment container on attachment upload
validateSize: 30, //30mb size limit
onAttachmentUpload: function(response) {
/*
the following code just utilizes the attachment upload response to generate
ticket-attachment on your page
*/
attachment_id = $(response).attr('data-id');
if (attachment_id) {
attachment = $(response).html();
$closeButton = $('<span class="attachment-close">').text('x').on('click', closeButtonEvent)
$('.ticket-attachment-container').show()
.append($('<div>', {
class: 'ticket-attachment'
}).html(attachment).append($closeButton))
.append($('<input>', {
type: 'hidden',
name: 'attachment_ids[]'
}).val(attachment_id));
}
}
});
On the Controller side I've got below code
const string scriptTag = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction({0}, '{1}', '{2}')</script>";
public ContentResult UploadAttachment()
{
string basePath = HttpContext.Server.MapPath("~/assets/Images/");
const string baseUrl = #"/ckfinder/userfiles/";
var funcNum = 0;
int.TryParse(Request["CKEditorFuncNum"], out funcNum);
if (Request.Files == null || Request.Files.Count < 1)
return BuildReturnScript(funcNum, null, "No file has been sent");
if (!System.IO.Directory.Exists(basePath))
return BuildReturnScript(funcNum, null, "basePath folder doesn't exist");
var receivedFile = Request.Files[0];
var fileName = receivedFile.FileName;
if (string.IsNullOrEmpty(fileName)) {
return BuildReturnScript(funcNum, null, "File name is empty");
}
var sFileName = System.IO.Path.GetFileName(fileName);
var nameWithFullPath = System.IO.Path.Combine(basePath, sFileName);
//Note: you may want to consider using your own naming convention for files, as this is vulnerable to overwrites
//e.g. at the moment if two users uploaded a file called image1.jpg, one would clash with the other.
//In the past, I've used Guid.NewGuid() combined with the file extension to ensure uniqueness.
receivedFile.SaveAs(nameWithFullPath);
var url = baseUrl + sFileName;
return BuildReturnScript(funcNum, url, null);
}
private ContentResult BuildReturnScript(int functionNumber, string url, string errorMessage) {
return Content(
string.Format(scriptTag, functionNumber, HttpUtility.JavaScriptStringEncode(url ? ? ""), HttpUtility.JavaScriptStringEncode(errorMessage ? ? "")),
"text/html"
);
}
Below is the response I get back inside onAttachmentUpload - function
<form enctype="multipart/form-data" method="POST" dir="ltr" lang="en" action="/Controller/UploadAttachment?CKEditor=email_Message&CKEditorFuncNum=0&langCode=en">
<label id="cke_73_label" for="cke_74_fileInput_input" style="display:none"></label>
<input style="width:100%" id="cke_74_fileInput_input" aria-labelledby="cke_73_label" type="file" name="attachment" size="38">
</form>
<script>
window.parent.CKEDITOR.tools.callFunction(98);
window.onbeforeunload = function({
window.parent.CKEDITOR.tools.callFunction(99)
});
</script>
But it is expecting some data-id for attachment id. I've no idea what the response should look like. Could someone tell me what the actual response should look like and what is the data-id its expecting as attr in response? Also, is there anyway I can upload multiple files with this?
This is how I am returning the response now and rendering the attached file. Hope it might help someone in future.
[AcceptVerbs(HttpVerbs.Post)]
public ContentResult UploadAttachment() {
string basePath = HttpContext.Server.MapPath("~/somepath");
var funcNum = 0;
int.TryParse(Request["CKEditorFuncNum"], out funcNum);
if (Request.Files == null || Request.Files.Count < 1)
return Content("No file has been sent");
if (!System.IO.Directory.Exists(basePath))
Directory.CreateDirectory(Path.Combine(basePath));
var receivedFile = Request.Files[0];
var fileName = receivedFile.FileName;
if (string.IsNullOrEmpty(fileName)) {
return Content("File name is empty");
}
var sFileName = System.IO.Path.GetFileName(fileName);
var nameWithFullPath = Path.Combine(basePath, sFileName);
receivedFile.SaveAs(nameWithFullPath);
var content = "<span data-href=\"" + nameWithFullPath + "\" data-id=\"" + funcNum + "\"><i class=\"fa fa-paperclip\"> </i> " + sFileName + "</span>";
return Content(content);
}
and on the JS side I have below code to append the uploaded file name:
CKEDITOR.replace('email.Message', {
filebrowserUploadUrl: '/Controller/UploadAttachment',
extraPlugins: 'attach', // attachment plugin
toolbar: this.customToolbar, //use custom toolbar
autoCloseUpload: true, //autoClose attachment container on attachment upload
validateSize: 30, //30mb size limit
onAttachmentUpload: function(response) {
/*
the following code just utilizes the attachment upload response to generate
ticket-attachment on your page
*/
attachment_id = $(response).attr('data-id');
if (attachment_id) {
attachment = response;
$closeButton = '<span class="attachment-close btn btn-danger float-right" style="margin-top:-7px"><i class="fa fa-trash"></i></span>'; //.on('click', closeButtonEvent)
$respDiv = '<ol class="breadcrumb navbar-breadcrumb" style="padding:18px 15px"><li style="display:block">' + attachment + $closeButton + '</li></ol>';
$('.ticket-attachment-container').show()
.append($('<div>', {
class: 'ticket-attachment'
}).html($respDiv))
.append($('<input>', {
type: 'hidden',
name: 'attachment_ids[]'
}).val(attachment_id));
$('.ticket-attachment-container').on('click', '.attachment-close', function() {
$(this).closest('.ticket-attachment').remove();
if (!$('.ticket-attachment-container .ticket-attachment').length)
$('.ticket-attachment-container').hide();
});
}
}
});
I use valums file uploader and I have a problem with image dimension validatation before upload. image_extension and image_filesize return false, but because image dimnension is in onload async function, returning false has no effect and image is submitted and uploaded.
sample code:
function create_uploader()
{
var uploader = new qq.FileUploaderBasic(
{
button: $('#upload_button')[0],
action: 'mdl/sys.upload.img.php',
maxConnections: 7,
debug: false,
multiple: false,
params:
{
upload_dir: '../files/_temp/',
image_size: '1280,1024',
thumb_size: '240,240'
},
onSubmit: function(id, fileName)
{
// validate extension
var file_extension = (/[.]/.exec(fileName)) ? /[^.]+$/.exec(fileName):undefined;
if (!(file_extension && /^(jpg|JPG|jpeg|JPEG|png|PNG)$/.test(file_extension)))
{
return false;
// OK, execution stop
}
// validate image size
var img_filesize = window.event.target.files[0].size;
if (img_filesize > 1048576)
{
return false;
// OK, execution stop
}
// validate image dimension
var img_size = new Image();
img_size.src = window.URL.createObjectURL(window.event.target.files[0]);
img_size.onload = function()
{
var img_width = img_size.naturalWidth;
var img_height = img_size.naturalHeight;
window.URL.revokeObjectURL(img_size.src);
if (img_width < 640 || img_width > 800)
{
return false;
}
if (img_height < 480 || img_height > 600)
{
return false;
}
}
},
onProgress: function(id, fileName, loaded, total)
{
// progress code
},
onComplete: function(id, fileName, results)
{
// complete code
}
});
}
create_uploader();
Any ideas how to do this?
Edit: Subquestion.
How i can call in onSubmit procedure cancel and dequeue event which valums file uploader handling? If is this possible, then i can call this events in my validation and cancel upload image..
I have solution :)
This is not entirely the whole code because it is a bit complicated. It works something like this to me:
sys.upload.php
<script type="text/javascript">
$(document).ready(function()
{
function create_uploader()
{
var internal_counter = 0; // very important for multiple upload!
var uploader = new qq.FileUploaderBasic(
{
button: $('#upload_button')[0],
action: 'mdl/sys.upload.img.php',
maxConnections: 5,
multiple: true,
debug: false,
params:
{
upload_dir: '../files/_temp/',
image_size: '1280,1024',
thumb_size: '<?php echo isset ($thumb_size) ? $thumb_size : '240,240'; ?>'
},
onSubmit: function(id, fileName)
{
// reset internal counter only if submit form button is enabled
if ($('#submit_form').prop('disabled') == false)
{
internal_counter = 0;
}
// find upload button and temperatory disable it
setTimeout(function(){$('#upload_button').css({'opacity': '0.25'}).find("input[type='file']").css({'cursor': 'default'}).prop('disabled', true)},25);
// disable submit form button
$('#submit_form').prop('disabled', true);
// create new form data
var image_data_temp = null;
var form_data = new FormData();
form_data.append('file', $("input[type='file']")[0].files[internal_counter]);
form_data.append('filesize', '5242880');
form_data.append('min_width', '600');
form_data.append('max_width', '4096');
form_data.append('min_height', '450');
form_data.append('max_height', '2160');
// send new form for validate
$.ajax(
{
type: 'POST',
url: 'mdl/sys.upload-validate.php',
async: false,
data: form_data,
cache: false,
contentType: false,
processData: false
}).done(function(results)
{
image_data_temp = results;
});
var image_data = image_data_temp.split(';');
/*
image_data[0] => status message
image_data[1] => name
image_data[2] => type
image_data[3] => size
image_data[4] => human size
image_data[5] => width
image_data[6] => height
image_data[7] => icon symbol shortcut
*/
// counter must increase before check validation
internal_counter ++;
if (image_data[0] != 'ok')
{
// stop if validation is not OK
// you can here add some function for error etc.
console.log (image_data[0]);
// enable submit form button
$('#submit_form').prop('disabled', false);
// enable upload button
setTimeout(function(){$('#upload_button').css({'opacity': '1'}).find("input[type='file']").css({'cursor': 'pointer'}).prop('disabled', false);},25);
return false;
}
// validation is ok now, onProgress is processed
},
onProgress: function(id, fileName, loaded, total)
{
// on progress code
},
onComplete: function(id, fileName, results)
{
// process if is image uploaded
internal_counter = 0;
// enable submit form button
$('#submit_form').prop('disabled', false);
// enable upload button
$('#upload_button').css({'opacity': '1'}).find("input[type='file']").css({'cursor': 'pointer'}).prop('disabled', false);
}
});
}
create_uploader();
});
</script>
sys.upload-validate.php
<?php
header ('Connection: close');
require_once '../sys.functions.php'; // it is not necessary
function show_data($str_a, $str_b, $str_c, $str_d, $str_e, $str_f, $str_g, $str_h)
{
echo $str_a;
echo ';';
echo $str_b;
echo ';';
echo $str_c;
echo ';';
echo $str_d;
echo ';';
echo $str_e;
echo ';';
echo $str_f;
echo ';';
echo $str_g;
echo ';';
echo $str_h;
}
$image_info = getimagesize ($_FILES['file']['tmp_name']);
$image_width = $image_info[0];
$image_height = $image_info[1];
if
(
$_FILES['file']['type'] != 'image/pjpeg' &&
$_FILES['file']['type'] != 'image/jpeg' &&
$_FILES['file']['type'] != 'image/x-png' &&
$_FILES['file']['type'] != 'image/png'
)
{
show_data
(
'Nesprávny typ súboru. Podporované sú iba JPG a PNG obrázky.',
$_FILES['file']['name'],
$_FILES['file']['type'],
$_FILES['file']['size'],
human_file_size($_FILES['file']['size']),
$image_width,
$image_height,
'file'
);
return;
}
if ($_FILES['file']['size'] > (int)$_POST['filesize'])
{
show_data
(
'Súbor je príliš veľký (' . human_file_size($_FILES['file']['size']) . '). Maximálna povolená veľkosť pre súbor je ' . human_file_size((int)$_POST['filesize']) . '.',
$_FILES['file']['name'],
$_FILES['file']['type'],
$_FILES['file']['size'],
human_file_size($_FILES['file']['size']),
$image_width,
$image_height,
'file'
);
return;
}
if ($image_width < (int)$_POST['min_width'] || $image_width > (int)$_POST['max_width'])
{
show_data
(
'Nesprávna šírka (' . $image_width . ' bodov). Minimálna šírka musí byť ' . $_POST['min_width'] . ', maximálna ' . $_POST['max_width'] . ' bodov.',
$_FILES['file']['name'],
$_FILES['file']['type'],
$_FILES['file']['size'],
human_file_size($_FILES['file']['size']),
$image_width,
$image_height,
'wdt'
);
return;
}
if ($image_height < (int)$_POST['min_height'] || $image_height > (int)$_POST['max_height'])
{
show_data
(
'Nesprávna výška (' . $image_height . ' bodov). Minimálna výška musí byť ' . $_POST['min_height'] . ', maximálna ' . $_POST['max_height'] . ' bodov.',
$_FILES['file']['name'],
$_FILES['file']['type'],
$_FILES['file']['size'],
human_file_size($_FILES['file']['size']),
$image_width,
$image_height,
'hgh'
);
return;
}
show_data
(
'ok',
$_FILES['file']['name'],
$_FILES['file']['type'],
$_FILES['file']['size'],
human_file_size($_FILES['file']['size']),
$image_width,
$image_height,
null
);
return;
?>
Maybe it helps someone :)
Wonder if someone can advise please - I am using Plupload and need to redirect to a different page to add information into a database.
I can upload the file perfectly, but I cannot seem to get it to redirect.
Ive tried putting in the code into "UploadComplete" and in a different test into "FileUploaded"
Using Firebug I put in breaks into the script and both sections are stopped at at the start, but when the file is finished it doesnt touch either of them.
Therefore I thought Id put it into the upload.php file in the Chunks section (as per a google result suggested).
// Check if file has been uploaded
if (!$chunks || $chunk == $chunks - 1) {
// Strip the temp .part suffix off
rename("{$filePath}.part", $filePath);
$mypi = $projid;
header("Location: addimg.php?file=" . $fileName . "&blid=" . $mypi);
die();
}
In debugging it went through and hit the redirect and the die following, then then it went back to the start of the "if (!chunks etc)" and run through it again, but never redirected.
What am I missing please! Im pulling out my hair to make this work.
Thanks in advance
Javascript:
var uploader = new plupload.Uploader({
browse_button: 'browse', // this can be an id of a DOM element or the DOM element itself
container: document.getElementById('upcontainer'), // ... or DOM Element itself
//url: 'upload.php',
url: 'uploader_plup/upload.php?wts=<?php echo $projid;?>',
chunk_size: '2mb',
max_retries: '5',
// Sort files
sortable: true,
// Specify what files to browse for
filters : {
mime_types:[
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"},
{title : "Video files", extensions : "mov,mp4,mpeg,avi,mpg,wmv,w4v,flv,ogv,divx,asf,asx,ram,m2v"},
{title : "PDF files", extensions : "pdf"},
{title : "Text files", extensions : "htm,html,doc,txt,rtf,ppt"}
],},
}
);
uploader.init();
uploader.bind('FilesAdded', function(up, files) {
var html = '';
plupload.each(files, function(file) {
html += '<li id="' + file.id + '">' + file.name + ' ('+plupload.formatSize(file.size) + ') <b></b></li>';
});
document.getElementById('filelist').innerHTML += html;
});
uploader.bind('FileUploaded', function(up, file, info) {
// Called when file has finished uploading
log('[FileUploaded] File:', file, "Info:", info);
});
uploader.bind('ChunkUploaded', function(up, file, info) {
// Called when file chunk has finished uploading
log('[ChunkUploaded] File:', file, "Info:", info);
});
uploader.bind('UploadProgress', function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
log('[UploadProgress] File:', file, "Info:", info);
});
uploader.bind('UploadComplete', function(up, files) {
// Called when file has finished uploading
// console.log("[UploadComplete]");
// backButtonState = true;
var totup = uploader.total.uploaded + 1;
var fillen = uploader.files.length;
if(totup == fillen)
{
var mypi = "<?php echo $projid; ?>";
window.location = "addimg.php?file="+files+"&blid="+mypi;
}
log('[UploadComplete]');
});
uploader.bind('Error', function(up, err) {
document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
log('[Error] File:', file, "Info:", err.message);
});
document.getElementById('start-upload').onclick = function() {
uploader.start();
};
function log() {
var str = "";
plupload.each(arguments, function(arg) {
var row = "";
if (typeof(arg) != "string") {
plupload.each(arg, function(value, key) {
// Convert items in File objects to human readable form
if (arg instanceof plupload.File) {
// Convert status to human readable
switch (value) {
case plupload.QUEUED:
value = 'QUEUED';
break;
case plupload.UPLOADING:
value = 'UPLOADING';
break;
case plupload.FAILED:
value = 'FAILED';
break;
case plupload.DONE:
value = 'DONE';
break;
}
}
if (typeof(value) != "function") {
row += (row ? ', ' : '') + key + '=' + value;
}
});
str += row + " ";
} else {
str += arg + " ";
}
});
var log = document.getElementById('console');
log.innerHTML += str + "\n";
}
</script>
Try this way:
uploader.bind('UploadComplete', function(up, files) {
// Called when all files are either uploaded or failed
var mypi = "<?php echo $projid; ?>";
window.location = "addimg.php?file="+files+"&blid="+mypi;
/* This is not necessary since UploadComplete means all is done!
var totup = uploader.total.uploaded + 1;
var fillen = uploader.files.length;
if(totup == fillen) {}
log('[UploadComplete]');*/
});
And remove this php line:
header("Location: addimg.php?file=" . $fileName . "&blid=" . $mypi);
I am using the plupload.full.js downloaded from the http://www.plupload.com for uploading images.
My issue is when I tried to display a progress bar using the upload progress event it always gives a value 100 only. Is this an issue? How can I solve this?
Thanks in advance for any help.
Try to upload large image size file see the snapshot
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles', // you can pass in id...
container: document.getElementById('container'), // ... or DOM Element itself
url : "https://github.com/moxiecode/plupload/blob/master/examples/upload",
filters : {
max_file_size : '10mb',
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
]
},
// Flash settings
flash_swf_url : 'https://cdnjs.cloudflare.com/ajax/libs/plupload/2.3.6/Moxie.swf',
// Silverlight settings
silverlight_xap_url : '/plupload/js/Moxie.xap',
init: {
PostInit: function() {
document.getElementById('filelist').innerHTML = '';
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
},
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
});
},
UploadProgress: function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
Error: function(up, err) {
document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
}
}
});
uploader.init();
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/plupload/2.3.6/plupload.full.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/plupload/2.3.6/moxie.js"></script>
<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
<br />
<div id="container">
<a id="pickfiles" href="javascript:;">[Select files]</a>
<a id="uploadfiles" href="javascript:;">[Upload files]</a>
</div>
<br />
<pre id="console"></pre>
<script type="text/javascript">
// Custom example logic
</script>
I have the simple javascript function inside $(function() { ... }); body
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight',
browse_button: 'pickfiles',
container: 'uploader',
max_file_size: '20mb',
unique_names: true,
multiple_queues: false,
//drop_element: 'dropzone',
url: '/Home/Upload',
flash_swf_url: '../../../Scripts/upload/plupload.flash.swf',
silverlight_xap_url: '../../../Scripts/upload/plupload.silverlight.xap',
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
chunk_size: '2mb',
resize: { width: 320, height: 240, quality: 90 }
});
uploader.bind("Init", function (up, params) {
$("#runtime").html("<div>Current runtime: " + params.runtime + "</div>");
});
$("#uploadfiles").bind("click", function (e) {
uploader.start();
e.preventDefault();
});
uploader.init();
uploader.bind("FilesAdded", function (up, files) {
$.each(files, function (i, file) {
$('#runtime').append(
'<div id="' + file.id + '">' +
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
'</div>');
});
up.refresh();
});
uploader.bind("UploaderProgress", function (up, file) {
$("#" + file.id + " b").html(file.percent + "%");
});
uploader.bind("Error", function (up, file) {
$('#runtime').append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>");
up.refresh();
});
uploader.bind("FileUploaded", function (up, file) {
$("#" + file.id + " b").html("100%");
});
and HTML code
<div class="container">
<div>Logo: </div>
<div style="clear"></div>
<div id="uploader">
<div id="runtime" class="right">
No runtime was found !
</div>
<div>
<a id="pickfiles" href="#">[Select files]</a>
<a id="uploadfiles" href="#">[Upload files]</a>
</div>
</div>
</div>
The error is shown in the following picture:
http://i.imgur.com/5t0sT.jpg (to view full size)
I see there that is a problem with file filters. I run PLUpload.com examples on IE8 and it works fine with Flash runtime.
On other browsers, my uploader works perfectly.
Also, I have installed the latest version of Flash for ALL browsers (IE8,FF9,Chrome 16) but the problem insists in IE8.
ISSUE FIXED:
do not insert uploader object into div which has visibility:hidden or display:none property.
For everyone who has same problem as me:
I had the following HTML code
<div class="container" style="display:none">
<div>Logo: </div>
<div style="clear"></div>
<div id="uploader">
<div id="runtime" class="right">
No runtime was found !
</div>
<div>
<a id="pickfiles" href="#">[Select files]</a>
<a id="uploadfiles" href="#">[Upload files]</a>
</div>
</div>
</div>
The class container was created as dialog
$(function()
{
$(".container").dialog({modal:true, width:400});
});
As we know that DIV is initial hidden because of dispaly:none (of course, you can set up autoOpen:false as a new option in dialog object) and remove the style.
In IE8 (probably in earlier and later version) the uploader cannot be good instantiated if the div is hidden. (Returns the above error)
In Chrome and Firefox (I don't test this issue in Opera) works fine.
So, my advice is to avoid hidden block (even if you wish to create modal dialog).
I removed the display:none style and dialog object from that div and now works very good in IE8.
Why ? I don't know why in IE, the instance of object is not created at startup of page, though in Firefox and Chrome, the instance was created normally.
after the div is showing, do this:
uploader.refresh();
I have test on my page, worked!
This solved the problem too:
#pickfiles{
display:block;
}
or this:
$('#pickfiles').on("mouseover",function(){
$(".plupload.flash").css({
left:$('#pickfiles').offset().left+'px',
top:$('#pickfiles').offset().top+'px'
});
});
Install microsoft silverlight on your system.That will solve the issue, and don't forget to give a message for your users to install silverligth.
This error solved by:
Add "html4" to properties: "runtimes"
var uploader = new plupload.Uploader({
runtimes : 'gears,html5,flash,silverlight,browserplus,**html4**',
browse_button : 'pickfiles_<? echo $tmpKey ?>',
container : 'container_<? echo $tmpKey ?>',
max_file_size : '30mb',
url : '/image/upload3',
flash_swf_url : '/plupload/js/plupload.flash.swf',
silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
filters : [
{title : "Image files", extensions : "jpg,gif,png,jpeg"},
{title : "Zip files", extensions : "zip"}
],
unique_names:false,
multipart_params : {
"tmpPath" : "<? echo $tmpPath ?>",
"minWidth" : "<? if(isset($minWidth)) echo $minWidth; else echo 0; ?>",
"minHeight" : "<? if(isset($minHeight)) echo $minHeight; else echo 0; ?>"
}
// resize : {width : 390, height : 290, quality : 90}
});
Good luck for you!!!