We Keep Coding

How to get/print file name after successful upload in plupload ui

I do not have much knowledge in javascript. I am trying to get and print file name in a input box after a successful upload event. I'm using plupload ui widget. the below script works fine, I can upload files but I cant get file name after the upload finishes. I have googled a lot but couldn't get it working.
here is the code I'm using..
// Initialize the widget when the DOM is ready
$(function() {
$("#uploader").plupload({
// General settings
runtimes : 'html5,flash,silverlight,html4',
url : 'upload.php',
// User can upload no more then 20 files in one go (sets multiple_queues to false)
max_file_count: 20,
chunk_size: '1mb',
filters : {
// Maximum file size
max_file_size : '10mb',
// Specify what files to browse for
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
]
},
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
prevent_duplicates: true,
// Views to activate
views: {
list: true,
thumbs: true, // Show thumbs
active: 'thumbs'
},
// Flash settings
flash_swf_url : 'js/Moxie.swf',
// Silverlight settings
silverlight_xap_url : 'js/Moxie.xap'
});
uploader.bind('FileUploaded' , function(up, file, response ) {
if ( (Uploader.total.uploaded + 1) == Uploader.files.length)
{
alert(File.name);
};
})
// Handle the case when form was submitted before uploading has finished
$('form').submit(function(e) {
var uploader = $('#uploader').plupload('getUploader');
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('StateChanged', function() {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].getlink();
}
});
uploader.start();
} else {
alert("You must have at least one file in the queue.");
}
return false; // Keep the form from submitting
});
});

You have a faulty conditional in your FileUploaded handler:
if ( (Uploader.total.uploaded + 1) == Uploader.files.length)
Why Uploader.total.uploaded + 1? It will never get fulfilled.
Also Plupload UI widget has it's own syntax for attaching handlers to the events.
// Subscribing to the events...
// ... on initialization:
$('#uploader').plupload({
...
viewchanged: function(event, args) {
// stuff ...
}
});
// ... or after initialization
$('#uploader').on("viewchanged", function(event, args) {
// stuff ...
});
Consider the following playground sample.

Fine Uploader loader or Spinner not showing

I'm using 'fine upload' with 'uber' script now uploading is happening but spinner or upload progress bar is not working.
$(function() {
$('#UploadImagesBusiness').uberuploadcropper({
//---------------------------------------------------
// fineuploader options..
//---------------------------------------------------
fineuploader: {
//debug : true,
request : {
// params: {}
endpoint: 'image_upload_business_logo/uploadbusinessEdit.php'
},
validation: {
sizeLimit : 512000,
allowedExtensions: ['jpg','jpeg','png','gif']
}
},
//---------------------------------------------------
//now the cropper options..
//---------------------------------------------------
jcrop: {
aspectRatio : 1,
allowSelect : true, //can reselect
allowResize : true, //can resize selection
minSize : [ 150, 150 ], //if you want to be able to resize, use these
maxSize : [ 200, 200 ],
setSelect : [ 0, 0, 250, 250 ] //these are the dimensions of the crop box x1,y1,x2,y2
},
//---------------------------------------------------
//now the uber options..
//---------------------------------------------------
folder : '../business/uploads/business-images/thumbmails/', // only used in uber, not passed to server
cropAction : 'image_upload_business_logo/cropbusinessEdit.php', // server side request to crop image
onComplete : function(e,imgs,data) {
$('.business-logo').remove();
$('#businessLogo').val(imgs[0].filename);
$('#PhotoPrevsBusiness').html('');
var $PhotoPrevs = $('#PhotoPrevsBusiness');
for(var i=0,l=imgs.length; i<l; i++){
$PhotoPrevs.append('<img src="../business/uploads/business-images/thumbmails/'+ imgs[i].filename +'?d='+ (new Date()).getTime() +'" />');
}
}
});
});
this is my script.
here where I can add spinner script I got some thing from this website
I have pasted this script in my HTML file but even after that it is not working
http://docs.fineuploader.com/quickstart/02-setting_options.html

Google Places Auto-complete in extjs4

I am using extjs4 and Spring at server side. I need to integrate Google Places Auto-complete inside one of the extjs4 form. Is there any way this can be done. I am not sure weather we can integrate Google Auto-complete with extjs I have searched but not find anything more specific to my requirement. Please guide me ..... look at my code ...
Ext.define('abce.view.ReportMissing', {
extend : 'Ext.panel.Panel',
alias : 'widget.report_missing',
bodyPadding : 10,
autoScroll : true,
frame : true,
items : [{
id : 'report_form',
xtype : 'form',
frame : true,
defaultType : 'textfield',
items : [{
xtype : 'combobox',
store : new Ext.data.Store({
autoLoad : true,
//fields : ['memberName', 'email'],
proxy : {
type : 'ajax',
headers : {
'Content-Type' : 'application/json',
'Accept' : 'application/json'
},
url : 'http://maps.googleapis.com/maps/api/geocode/json?address=hyd+&sensor=false',
remoteSort : true,
method : 'GET',
reader : {
type : 'json',
successProperty : 'status'
}
}
})
}]
});
https://developers.google.com/places/documentation/autocomplete

Why not instead of use the sencha combobox, use a simple text input as suggest the google api autocomplete documentation.
(I first try with a just common textfield but it didn't work)
Then declare a panel or component with html as the following example, and then assign the render:
xtype: 'component',
html: '<div> <input id="searchTextField" type="text" size="50"> </div>',
listeners: {
render: function () {
var input = document.getElementById('searchTextField');
autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
autocomplete.addListener('place_changed', this.fillInAddress);
},
And result in this:

The proxy cannot be used to retrieve data from a URL on a different origin. See the limitations section of Ext.data.proxy.ajax for more information.
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.proxy.Ajax
You will probably need to set up an endpoint on your server to proxy the request to Google if you want to use that API.

I was looking for a way to do the same, and I came up writing a custom proxy against the google map javascript library
Then I used this custom proxy in a regular combo box
ComboBox:
Ext.create('Ext.form.field.ComboBox', {
store: {
fields: [
{name: 'id'},
{name: 'description'}
],
proxy: 'google-places'
},
queryMode: 'remote',
displayField: 'description',
valueField: 'id',
hideTrigger: true,
forceSelection: true
});
Custom proxy: (inspired from Ext.data.proxy.Ajax)
Ext.define('com.custom.PlacesProxy', {
extend: 'Ext.data.proxy.Server',
alias: 'proxy.google-places',
constructor: function() {
this.callSuper();
this.autocompletePlaceService = new google.maps.places.AutocompleteService();
},
buildUrl: function() {
return 'dummyUrl';
},
doRequest: function(operation) {
var me = this,
request = me.buildRequest(operation),
params;
request.setConfig({
scope : me,
callback : me.createRequestCallback(request, operation),
disableCaching : false // explicitly set it to false, ServerProxy handles caching
});
return me.sendRequest(request);
},
sendRequest: function(request) {
var input = request.getOperation().getParams().query;
if(input) {
this.autocompletePlaceService.getPlacePredictions({
input: input
}, request.getCallback());
} else {
// don't query Google with null/empty input
request.getCallback().apply(this, [new Array()]);
}
this.lastRequest = request;
return request;
},
abort: function(request) {
// not supported by Google API
},
createRequestCallback: function(request, operation) {
var me = this;
return function(places) {
// handle result from google API
if (request === me.lastRequest) {
me.lastRequest = null;
}
// turn into a "response" ExtJs understands
var response = {
status: 200,
responseText: places ? Ext.encode(places) : []
};
me.processResponse(true, operation, request, response);
};
},
destroy: function() {
this.lastRequest = null;
this.callParent();
}
});
Note: I wrote this against ExtJs6 but it should basically work alike for ExtJs4.

plupload statechange even plupload.STARTED not working

I am trying to make plupload work from the jsfiddle sample jsfiddle-plupload
but that is not working on my side, the statechange events if block is getting skipped below is code
function validClasses()
{
datas=[];
$('#uids li').each(function() {
var data = {
className: $(this).attr("id")
};
datas.push(data);
});
if(datas.length>0)
{
return true;
}else{
alert('error');
return false;
}
}
var uploadInitialized = false;
function plupload(){
var uploader = $("#uploader").pluploadQueue({
// General settings
runtimes: 'html5,html4',
url: 'fileUpload.htm',
max_file_size: '200mb',
chunk_size: '1mb',
unique_names: true,
multiple_queues: true,
multipart_params: {
"name": $("#name").val()
},
// Specify what files to browse for
filters: [
{
title: "Image files",
extensions: "jpg,gif,png,eps,jpeg,pdf,tiff,tif"},
{
title: "Zip files",
extensions: "zip"}
],
init: {
StateChanged: function(up) {
if (!uploadInitialized && up.state == plupload.STARTED) {
if (!validClasses()) {
up.stop();
} else {
uploadInitialized = true;
}
}
},
BeforeUpload: function(up, file) {
up.settings.multipart_params = {'name': $('#name').val()}
}
}
});
}
please note that in jsfiddle sample, the upload is just stopped, that is i can upload without adding files again. Where as on my side, the start upload button is getting disappeard, the file is in list but buttons disappear. and i am getting the upload status in place of buttons, i want the buttons to be there if upload is stopped also. I means in StateChanged i directly wrote up.stop() and that is also not working. Anyone please help. Thanks.

Why does 'add files' button in Plupload not fire in latest Chrome or FF on OS X?

This is the code that is used to trigger Plupload in my Rails App:
<% content_for :deferred_js do %>
$("#uploader").pluploadQueue({
runtimes : 'gears,html5,flash,browserplus,silverlight,html4',
url : '/uploads.js',
//browse_button : 'pickfiles',
max_file_size : '10mb',
chunk_size : '2mb',
unique_names : false,
container: 'uploader',
autostart: true,
//RoR - make sure form is multipart
//multipart: true,
// Specify what files to browse for
filters : [
{title : "Image files", extensions : "jpg,gif,png,bmp"}
],
// PreInit events, bound before any internal events
preinit : {
UploadFile: function(up, file) {
up.settings.multipart_params = {"upload[stage_id]" : compv.steps.selectedStage.getID(), "authenticity_token" : compv.tools.csrf_token()};
}
},
// Post init events, bound after the internal events
init : {
FilesAdded: function(up, files) {
// Called when files are added to queue
up.start();
},
FileUploaded: function(up, file, info) {
// Called when a file has finished uploading
console.log('[FileUploaded] File:', file, "Info:", info);
info.responseText = info.response;
compv.updateStepView('upload', info);
$('tr[data-upload] td.selectable-step').each(function(index){
compv.steps.selectedUpload.primeUploadDisplay($(this));
});
},
Error: function(up, args) {
// Called when an error has occured
up.stop();
compv.tools.clientError();
}
},
// Flash settings
flash_swf_url : '/plupload/js/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url : '/plupload/js/plupload.silverlight.xap'
});
compv.steps.selectedUpload.uploader = $('div#uploader').pluploadQueue();
//compv.steps.selectedUpload.uploader.init();
// Client side form validation
$('form#new_upload').submit(function(e) {
var uploader = $('#uploader').pluploadQueue();
// Validate number of uploaded files
if (uploader.total.uploaded == 0) {
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('UploadProgress', function() {
if (uploader.total.uploaded == uploader.files.length)
$('form').submit();
});
uploader.start();
} else
$('div#upload-empty-dialog').dialog("open");
e.preventDefault();
}
});
$('div#upload-empty-dialog').dialog({modal:true, autoOpen: false, minWidth: 325, buttons: { "Ok": function() { $(this).dialog("close"); } }});
$('div#upload-cancel-dialog').dialog({modal:true, autoOpen: false, minWidth: 325});
<% end %>
<div class="dialog" id="upload-empty-dialog" title="No Files">
<p>You must select files to upload first.</p>
</div>
<div class="dialog" id="upload-cancel-dialog" title="Cancel Uploading?">
<p>Do you want to stop uploading these images? Any images which have not been uploaded will be lost.</p>
</div>
Is there anything obvious that jumps out that could be causing this ?
Edit1: Btw, when I try this upload form - http://jsfiddle.net/Atpgu/1/ - the add files button fires for me on both Chrome & FF - so I suspect it has something to do with my JS, I just don't know what.
Edit2: This is what the definition of compv is. I know it's a bit verbose, and I was going to reduce it - but decided not to at the risk of removing something important.
var compv = {
exists: true,
tools: { exists: true,
csrf_param : null,
csrf_token : null},
comments: { exists: true,
updateView: null,
selectImage: null,
upvote:null,
downvote:null,
showVotes:null,
getUploadID: function(element){
return $(element).parents("li").attr("data-upload-id");
}},
steps: { exists: true,
selectFn:{},
selectedClass: "selected-step",
selectableClass: "selectable-step",
selectedClient: { element: null,
id: null,
stepType: "client",
ajaxSuccess: null },
selectedProject: { element: null,
id: null,
stepType: "project",
ajaxSuccess: null },
selectedStage: { element: null,
id: null,
stepType: "stage",
ajaxSuccess: null,
getID: function(){
return compv.steps.selectedStage.id;
},
displayCompare: function(){
window.open($(this).attr('data-url'), "_blank");
}},
selectedUpload: { element: null,
id: null,
stepType: "image",
primeUploadDisplay: null,
ajaxSuccess: null,
uploader: null,
noCloseDialog: false} }
};

Plupload is not rendering correctly for hidden elements, that is why it should be refreshed after shown.
In given example, after DIALOG is opened, there should be added few lines of code:
var uploader = $('#uploader').pluploadQueue();
uploader.refresh();
I noticed, that in chrome, it has problems to set z-index correctly for input container. To workaround that, just add another line after previous two:
$('#uploader > div.plupload').css('z-index','99999');

You can solve this problem with Chrome easier by setting the css of your browse_button (= Select Files Button) to a higher z-index (z-index:99999) !
Lucian

I know this is an old question but it seems that the z-index issue is still around in the later versions of plupload (1.5.2).
The problem is caused by code in plupload.html5.js which changes the z-index of the "Add Files" button specifically for Webkit browsers and in doing so breaks things:
zIndex = parseInt(plupload.getStyle(browseButton, 'z-index'), 10);
if (isNaN(zIndex)) {
zIndex = 0;
}
plupload.extend(browseButton.style, {
zIndex : zIndex
});
plupload.extend(inputContainer.style, {
zIndex : zIndex - 1
});
If you view the DOM you will see that style="z-index: 0;" is added to the #uploader_browser anchor element, and the div containing the "Add Files" button gets a z-index of -1 which effectively hides it behind the page (depending on your pages z-index of course).
To fix this I set the zIndex value in the file mentioned above to something higher than the page that the plupload div was being displayed on.

Deele's solution with css is good but little better is to do it this way:
$('#uploader > div.plupload input').css('z-index','99999');
That way hover of button will be not broken...