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!!!
Related
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.
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 try to use Brower can upload a file, but if I use Titanium upload, it doesn't work,
the brower code is
Brower upload file:
<form action="upload.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Submit">
</form>
Upload.php file:
$tmp_file=$_FILES['file']['tmp_name'];
$target_file=basename($_FILES['file']['name']);
move_uploaded_file($tmp_file, "files/".$target_file);
my titanium code is:
var webaddress = 'http://' + address.value + ':' + port1.value + '/scanbatch/index.php';
xhr.open('POST',webaddress);
xhr.send({files : Titanium.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,'scanbatch.txt')});
it can work but the webservice didn't received anything, just received a header.
and by the way , I can send out the short xml through the httpclient ,but if the xml be longer sometime it can't send out, more longer more fail，I mean not always, if the xml longer than 512KB, It always fail.
my code is
var webaddress = 'http://' + address.value + ':' + port1.value + '/liveho/scanbatch';
xhr.open('POST',webaddress);
xhr.send(xmlscript);
my onload function is
onload : function(e) {
alert(this.responseText);
},
please help me thank you
I will give you some advice, to narrow down the problem (Titanium side).
Have you tested if the path to the file is correct?
var file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory +
Ti.Filesystem.getSeparator() + 'scanbatch.txt');
if(file.size)
xhr.send({files : file});
else
Ti.API.info("File " + file.nativePath + " doesn't exist or is empty");
If it isn't the correct path, try to find it in the resourcesDirectory:
var file = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory +
Ti.Filesystem.getSeparator() + 'scanbatch.txt');
Your problem with disconnections might be diminish setting the timeout property. A onerror function could also help you find the problem. The onsendstream property will let you know the progression of the upload.
Ti.Network.createHTTPClient({
...
onload : function(e) {
alert(this.responseText);
},
onerror : function(e) {
Ti.API.debug(e.error);
alert(e.error);
},
onsendstream : function(e) {
var progress = parseFloat(e.progress)*100;
Ti.API.info("Upload progress:" + progress + "%");
//e.progress will contain a value from 0.0-1.0 with the progress of the upload
alert("Upload progress:" + progress + "%");
},
timeout : 5000 // in milliseconds
...
});
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 implemented an iPhone application in Phone Gap using jQuery Mobile.
As the part of my app i need to send an email by click on a Button 'MAIL'
For that i added EmailComposer plug in.
added EmailComposer.js in www folder and
added EmailComposer.H and .M file in Resources folder of application.
I implemented the code as follows
<script type="text/javascript" src="EmailComposer.js"></script>
<script type="text/javascript" charset="utf-8">
function SendEmail() {
alert('XXXXX');
window.plugins.emailComposer.showEmailComposer("SubjectXXX","PlainTextBody---",
"recipientName,recipientName", "ccRecipient", "bccRecipient",false);
}
</script>
<a href="#" onclick="SendEmail(); return false;" data-icon="arrow-r" data-iconpos="left" class="ui-btn-left" >Send</a>
Mail composer view displays all is well.
Now I need to Atach a file to this email how to attach a file
Can any one guide me the way
tahnks in advance.
I did it this way:
var attachPath;
var attachFile= new Array();
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
fileSystem.root.getDirectory("MyAppFolder", {
create: true
},
function(directory) {
console.log("Final 63" + directory.fullPath);
attachPaths = directory.fullPath;
var attachPath=attachPaths.slice(7,attachPaths.length);
var directoryReader = directory.createReader();
directoryReader.readEntries(function(entries) {
var i;
for (i=0; i<entries.length; i++) {
console.log(entries[i].name);
attachFile[i] =attachPath + "/" + entries[i].name;
}
console.log(attachFile);
},
function (error) {
alert(error.code);
});
});
}, function(error) {
alert("can't even get the file system: " + error.code);
});
Now pass attachFile to mailcomposer
window.plugins.emailComposer.showEmailComposerWithCallback(null,
"Get an Estimate",
"Body",
["mail_id"],
[],
[],
true,
attachFile
);
Hope this helps you!!!!!