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>
Related
I'm testing Prebid on mobile devices. In my AdUnit, I have defined dimensions as follows:
Prebid parameters
But, I get ads with different dimensions:
Prebid sizes
It seems to me that advertisers don't understand that the ad is displayed on a mobile device, maybe that's the problem. Maybe there is a parameter I forgot.
I played my auctions in an iFrame, maybe that's the problem.
I use 4.25 version.
Please tell me if my post is incorrect or incomplete, it's my first post on stackoverflow.
Thank a lot for your help.
The problem is solved. You can see details here: https://github.com/prebid/Prebid.js/issues/6307.
If you use ImproveDigital adapter just add improvedigital: {usePrebidSizes: true} in pbjs.setConfig
pbjs.setConfig({ improvedigital: {usePrebidSizes: true} });
My full sample here :
The HTML page :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="testmobile.js"></script>
</head>
<body>
<div id="b48fef10-6f72-4f83-9a91-77c42069bd87">
</div>
</body>
</html>
The javascript code :
/** add your prebid dll here or in html file **/
let adUnits = [];
let adUnit =
{
code: "b48fef10-6f72-4f83-9a91-77c42069bd87",
mediaTypes: {
banner: {
sizes: [[300,100],[320,100],[320,50],[300,50]]
}
},
bids: [
{
bidder:"onetag",
params:{
pubId:"xxxxxxxxxxxxxxxxx"
}
},
{
bidder:"appnexus",
params:
{
placementId:"xxxxxxxxxxxxxxxxx"
}
},
{
bidder:"improvedigital",
params:
{
placementId:"xxxxxxxxxxxxxxxxx"
}
}]
};
adUnits.push(adUnit);
pbjs.que.push(function () {
pbjs.setConfig({
debug: true,
improvedigital: {usePrebidSizes: true}
});
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: function (bidResponses) {
var winningBids = [];
let ad = pbjs.getHighestCpmBids("b48fef10-6f72-4f83-9a91-77c42069bd87");
if (ad && ad.length > 0) {
let idIFrame = "b48fef10-6f72-4f83-9a91-77c42069bd87frame";
let iFrame = "<iframe id='" + idIFrame + "'"
+ " FRAMEBORDER=\"0\""
+ " SCROLLING=\"no\""
+ " MARGINHEIGHT=\"0\""
+ " MARGINWIDTH=\"0\""
+ " TOPMARGIN=\"0\""
+ " LEFTMARGIN=\"0\""
+ " ALLOWTRANSPARENCY=\"true\""
+ " WIDTH=\"0\""
+ " HEIGHT=\"0\">."
+ " </iframe>"
document.body.innerHTML += '<div id=b48fef10-6f72-4f83-9a91-77c42069bd87>' + iFrame + '</div>';
var iframe = document.getElementById(idIFrame);
var iframeDoc = iframe.contentWindow.document;
try {
pbjs.renderAd(iframeDoc, ad[0]['adId']);
} catch (e) {
console.log(e);
}
winningBids = pbjs.getAllWinningBids();
console.log(winningBids);
}
else
{
console.log("No bids");
};
},
timeout: 2000
});
});
I have a file called index.html that is supposedly display a map by executing this line : Controller.startup(notauth);. I have made sure that the logic comes to this line.
Somehow the map wont appear and i find out in the Chrome debugger that there are some calls to a wrong JS scripts path.
Here I include some lines from my index.html :
<script type="text/javascript">
var dojoConfig = {
async: true,
packages: [{
name: 'viewer',
location: location.pathname.replace(/[^\/]+$/, '') + 'js/viewer'
},{
name: 'config',
location: location.pathname.replace(/[^\/]+$/, '') + 'js/config'
},{
name: 'gis',
location: location.pathname.replace(/[^\/]+$/, '') + 'js/gis'
}]
};
</script>
<script type="text/javascript" src="http://10.255.1.77/sonar/arcgis_js_api/library/3.15/3.15/init.js"></script>
<script type="text/javascript">
//Get app ID from url
var file = 'config/viewer', s = window.location.search, q = s.match(/config=([^&]*)/i);
//alert ('var file ORI (config/viewer) : ' + file);
//alert ('nilainya Q : ' + q);
if (q && q.length > 0) {
file = q[1];
//alert ('Q1 : ' + file);
//alert ('S : ' + s);
if(file.indexOf('/') < 0) {
configfile = 'config/' + file;
}
//alert ('CONFIG-FILE : ' + configfile);
}
if (configfile == 'config/all')
{
//alert ('config == ALL');
//alert ('configfile is ' + configfile + ' -- strpathfile : ' + strpathfile);
if (ImgStatus && checkfileimg_js(strpathfile)) {
require(['viewer/Controller', configfile + '_imagery'], function(Controller, config){
Controller.startup(config);
});
}
else
{
alert ('controller.startup(notauth) Hellow NOAUTH ');
require(['viewer/Controller', 'config/all'], function(Controller, notauth)
{
Controller.startup(notauth);
});
}
}
else //IF configfile <> ALL (env,pims,clear dll)
{
Controller.startup(auth);
}
When i debug it in Chrome, I have the following results :
- result 1 : https://snag.gy/g37joA.jpg
- result 1 : https://snag.gy/aBMren.jpg
The correct path should be "http://10.255.1.77/sonar/arcgis_js_api/library/3.15/3.15/dijit/TitlePane.js"
NOT http://10.255.1.77/sonar/arcgis_js_api/library/3.15/dijit/TitlePane.js
Where are those JS coming from ? I cant find them being called in my index.html. Where and how can i find lines that calls these JS scripts ?
Please help
You can find this information in Chrome DevTools, tab Network, column Initiator:
You have to configure correctly the HOSTNAME_AND_PATH_TO_JSAPI in your init.js and dojo.js (inside esri js api),
should look like in both init.js and :
http://10.255.1.77/sonar/arcgis_js_api/library/3.15/3.15/
Where are those JS coming from ?
The scripts are laoded asynchronously ( see Modern dojo AMD )
require(['viewer/Controller'], function(controller)) ...
this will search for viewer (depends on config dojo created on top)your_app_url/js/viewer/Controller.js and load it in script and register it ,
also every require inside your controller will load scripts asynchronously , this modern AMD will prevent import unused modules (modular loading) .
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 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!!!