We Keep Coding

Get the name of the uploaded file

I am new to AngularJS1 and Js. Here i am uploading a file which will be saved on my drive as well as in mongodb. What I am trying to do is to get the uploaded file name which can easily be seen here in attached picture. Kindly help me out with this.
$scope.uploadedFileList.push(p);
$('#addproFile').ajaxfileupload({
action: 'http://' + window.location.hostname + ':' + window.location.port + '/api/upload',
valid_extensions : ['md','csv','css', 'txt'],
params: {
dummy_name: p
},
onComplete: function(response) {
console.log('custom handler for file:');
alert(JSON.stringify(response));
/* $scope.nameString = uploadedFileList.join(',');
$scope.$apply();*/
},
onCancel: function() {
console.log('no file selected');
}
});
This is my controller
(function($) {
$.fn.ajaxfileupload = function(options) {
var settings = {
params: {},
action: '',
onStart: function() { },
onComplete: function(response) { },
onCancel: function() { },
validate_extensions : true,
valid_extensions : ['gif','png','jpg','jpeg'],
submit_button : null
};
var uploading_file = false;
if ( options ) {
$.extend( settings, options );
}
// 'this' is a jQuery collection of one or more (hopefully)
// file elements, but doesn't check for this yet
return this.each(function() {
var $element = $(this);
// Skip elements that are already setup. May replace this
// with uninit() later, to allow updating that settings
if($element.data('ajaxUploader-setup') === true) return;
$element.change(function()
{
// since a new image was selected, reset the marker
uploading_file = false;
// only update the file from here if we haven't assigned a submit button
if (settings.submit_button == null)
{
upload_file();
}
});
if (settings.submit_button == null)
{
// do nothing
} else
{
settings.submit_button.click(function(e)
{
// Prevent non-AJAXy submit
e.preventDefault();
// only attempt to upload file if we're not uploading
if (!uploading_file)
{
upload_file();
}
});
}
var upload_file = function()
{
if($element.val() == '') return settings.onCancel.apply($element, [settings.params]);
// make sure extension is valid
var ext = $element.val().split('.').pop().toLowerCase();
if(true == settings.validate_extensions && $.inArray(ext, settings.valid_extensions) == -1)
{
// Pass back to the user
settings.onComplete.apply($element, [{status: false, message: 'The select file type is invalid. File must be ' + settings.valid_extensions.join(', ') + '.'}, settings.params]);
} else
{
uploading_file = true;
// Creates the form, extra inputs and iframe used to
// submit / upload the file
wrapElement($element);
// Call user-supplied (or default) onStart(), setting
// it's this context to the file DOM element
var ret = settings.onStart.apply($element, [settings.params]);
// let onStart have the option to cancel the upload
if(ret !== false)
{
$element.parent('form').submit(function(e) { e.stopPropagation(); }).submit();
} else {
uploading_file = false;
}
}
};
// Mark this element as setup
$element.data('ajaxUploader-setup', true);
/*
// Internal handler that tries to parse the response
// and clean up after ourselves.
*/
var handleResponse = function(loadedFrame, element) {
var response, responseStr = $(loadedFrame).contents().text();
try {
//response = $.parseJSON($.trim(responseStr));
response = JSON.parse(responseStr);
} catch(e) {
response = responseStr;
}
// Tear-down the wrapper form
element.siblings().remove();
element.unwrap();
uploading_file = false;
// Pass back to the user
settings.onComplete.apply(element, [response, settings.params]);
};
/*
// Wraps element in a <form> tag, and inserts hidden inputs for each
// key:value pair in settings.params so they can be sent along with
// the upload. Then, creates an iframe that the whole thing is
// uploaded through.
*/
var wrapElement = function(element) {
// Create an iframe to submit through, using a semi-unique ID
var frame_id = 'ajaxUploader-iframe-' + Math.round(new Date().getTime() / 1000)
$('body').after('<iframe width="0" height="0" style="display:none;" name="'+frame_id+'" id="'+frame_id+'"/>');
$('#'+frame_id).get(0).onload = function() {
handleResponse(this, element);
};
// Wrap it in a form
element.wrap(function() {
return '<form action="' + settings.action + '" method="POST" enctype="multipart/form-data" target="'+frame_id+'" />'
})
// Insert <input type='hidden'>'s for each param
.before(function() {
var key, html = '';
for(key in settings.params) {
var paramVal = settings.params[key];
if (typeof paramVal === 'function') {
paramVal = paramVal();
}
html += '<input type="hidden" name="' + key + '" value="' + paramVal + '" />';
}
return html;
});
}
});
}
})( jQuery )
this is my ajax file upload function

ng-mouseenter fires first time, string is not a function next

I have this code on my html page:
<span data-miid="{{ orden._id }}"
data-fetxa="{{orden.fetxa}}"
data-linea="1"
ng-mouseenter="arraton(orden.ref);"
ng-click="grafikoa(orden.ref);"
ng-if="isadmin"
ng-bind-html="orden.ref"
>{{orden.ref}}</span>
And this is the angular part:
$scope.arraton = function(val) {
if ( ( val === "" ) || ( val === undefined ) ) { return false; }
var of="";
val = val.replace("<BR>", "<br>");
val = val.replace("<BR />", "<br>");
val = val.replace("<br />", "<br>");
if (val === undefined) {
return false
}
var n = val.indexOf("<br>");
if (n > 0) {
var miarray = val.split('<br>');
of = miarray[1];
}
var url = "SOMEURL/delaoferta?of="+of;
$http.get(url)
.success(function (data) {
$scope.arraton = "A Frabricar: " + parseInt(data.QFabricar)
+ "<br />Iniciada: " + parseInt(data.QIniciada)
+ "<br />Fabricada: " + parseInt(data.QFabricada);
})
.error(function () {
console.log("error al obtener datos");
return;
});
}
The fact is that when I mouse over the span, the first time works fine, but then, I´m getting
TypeError: string is not a function
all the time a mouse over the span.
Any help or clue?
thx

The problem is the success of yout $http request, your setting an string when your ng-mouseenter need a function. Change a variable name and you are done.

why my textbox doesnot return any proper value in jquery?

I have created this controller for for getting existing value by searching id. this is my controller for searching data by id. this code is running well but result is not acceptable. i am new in jquery that's why i am explaining this very helpfully..
public string Search(string id=null)
{
string[] ci = new string[9];
//return "Artistry";
string cn = null;
cn = Request.QueryString["id"];
if (cn != null)
{
ClientInfo c = db.SingleOrDefault<ClientInfo>("where CId='" + cn + "'");
if (c != null)
{
// ci[0] = c.CId.ToString();
ci[1] = c.CName;
ci[2] = c.CCName;
ci[3] = c.PhoneNo.ToString();
ci[4] = c.Fax;
ci[5] = c.Email;
ci[6] = c.Address;
ci[7] = c.PostalCode.ToString();
ci[8] = c.Country;
return ci[5];
}
else
return null;
}
else
return null;
//*/
}
My view page script for showing my data..
<script type="text/javascript">
$(document).ready(function () {
$('#CId').blur(function () {
var v = $('#CId').val();
var url = "/Clients/Search/" + v;
// alert("Test : " + url);
$.get(url, function (data, status) {
$("#CName").val(1);
$("#CCName").val(2);
$("#PhoneNo").val(3);
$("#Fax").val(4);
$("#Email").val(5);
$("#Address").val(6);
$("#PostalCode").val(7);
$("#Country").val(8);
alert("Test : " + data + " Status :" + status);
});
});
});
</script>
And finally my sql server database for showing data in views are..
SELECT TOP 1000 [CId]
,[CName]
,[CCName]
,[PhoneNo]
,[Fax]
,[Email]
,[Address]
,[PostalCode]
,[Country]
FROM [test].[dbo].[ClientInfo]

I think you should return json type data like so:
public JsonResult Search(string id=null)
{
// view code
return Json(new {info=ci[5]});
}
And client code:
$.get(url, function (data, status) {
alert("Test : " + data.info + " Status :" + status);
});

phantomjs render_multi_url.js modify output filenames

I'm trying to modify this script: https://github.com/ariya/phantomjs/blob/master/examples/render_multi_url.js so that instead of "rendermulti-1.png (and so on)" the output files will be named for the web pages they are caps of.
Here's what I tried.
// Render Multiple URLs to file
var RenderUrlsToFile, arrayOfUrls, system;
system = require("system");
/*
Render given urls
#param array of URLs to render
#param callbackPerUrl Function called after finishing each URL, including the last URL
#param callbackFinal Function called after finishing everything
*/
RenderUrlsToFile = function(urls, callbackPerUrl, callbackFinal) {
var getFilename, next, page, retrieve, urlIndex, webpage, pagename ; //<--
urlIndex = 0;
webpage = require("webpage");
page = null;
// replace forward slashes with underscores //<--
pagename = arrayOfUrls[urlIndex].replace(/\//g,'_'); //<--
getFilename = function() {
// return "rendermulti-" + urlIndex + ".png"; //<--
return pagename + ".png"; //<--
};
next = function(status, url, file) {
page.close();
callbackPerUrl(status, url, file);
return retrieve();
};
retrieve = function() {
var url;
if (urls.length > 0) {
url = urls.shift();
urlIndex++;
page = webpage.create();
page.viewportSize = {
width: 800,
height: 600
};
page.settings.userAgent = "Phantom.js bot";
return page.open("http://" + url, function(status) {
var file;
file = getFilename();
if (status === "success") {
return window.setTimeout((function() {
page.render(file);
return next(status, url, file);
}), 200);
} else {
return next(status, url, file);
}
});
} else {
return callbackFinal();
}
};
return retrieve();
};
arrayOfUrls = null;
if (system.args.length > 1) {
arrayOfUrls = Array.prototype.slice.call(system.args, 1);
} else {
console.log("Usage: phantomjs render_multi_url.js [domain.name1, domain.name2, ...]");
arrayOfUrls = ["www.google.com", "www.bbc.co.uk", "www.phantomjs.org"];
}
RenderUrlsToFile(arrayOfUrls, (function(status, url, file) {
if (status !== "success") {
return console.log("Unable to render '" + url + "'");
} else {
return console.log("Rendered '" + url + "' at '" + file + "'");
}
}), function() {
return phantom.exit();
});
The script runs, but names all files after the first supplied URL and ignores anything after the '/'.
I suspect I'm making some basic error, possibly something to do with scope, but when I move the new variable into the getFileName function things break.
Any help at all will be appreciated.
Thanks!

There are calls to urls.shift() so it's not a good approach to compute filname with arrayOfUrls.
You're true : '/' is an invalid character so you have to replace it with a generic token (as ?, ...).
Alos, because page.open already contains url, it's better to use it to compute filename.
A solution could be :
// Render Multiple URLs to file
var RenderUrlsToFile, arrayOfUrls, system;
system = require("system");
/*
Render given urls
#param array of URLs to render
#param callbackPerUrl Function called after finishing each URL, including the last URL
#param callbackFinal Function called after finishing everything
*/
RenderUrlsToFile = function(urls, callbackPerUrl, callbackFinal) {
var getFilename, next, page, retrieve, urlIndex, webpage, pagename ; //<--
urlIndex = 0;
webpage = require("webpage");
page = null;
getFilename = function(url) {
return url.replace(/\//g,'_')+ ".png"; //<--
};
next = function(status, url, file) {
page.close();
callbackPerUrl(status, url, file);
return retrieve();
};
retrieve = function() {
var url;
if (urls.length > 0) {
url = urls.shift();
urlIndex++;
page = webpage.create();
page.viewportSize = {
width: 800,
height: 600
};
page.settings.userAgent = "Phantom.js bot";
return page.open("http://" + url, function(status) {
var file;
file = getFilename(url);
if (status === "success") {
return window.setTimeout((function() {
page.render(file);
return next(status, url, file);
}), 200);
} else {
return next(status, url, file);
}
});
} else {
return callbackFinal();
}
};
return retrieve();
};
arrayOfUrls = null;
if (system.args.length > 1) {
arrayOfUrls = Array.prototype.slice.call(system.args, 1);
} else {
console.log("Usage: phantomjs render_multi_url.js [domain.name1, domain.name2, ...]");
arrayOfUrls = ["www.google.com", "www.bbc.co.uk", "www.phantomjs.org"];
}
RenderUrlsToFile(arrayOfUrls, (function(status, url, file) {
if (status !== "success") {
return console.log("Unable to render '" + url + "'");
} else {
return console.log("Rendered '" + url + "' at '" + file + "'");
}
}), function() {
return phantom.exit();
});

yes, I think you could just modify this method
getFilename = function() {
return "rendermulti-" + urlIndex + ".png"; //<--
return pagename + ".png"; //<--
};
to customer your output file names.
PS. I want to ask some ones, do you get this issue:
if you give this js to render 90 html files, but most time it couldn't render them all, I need execute many times to finished all those 90 files.
and I try to split my html files into small array, then to call this js to render, but in this js file, there is a exit method, it would exit my process. so I couldn't loop all these small html file url array to finish them one time.

Ajax Json problems with Jquery in Firefox

I am experiencing some troubles using ajax in my jQuery call in order to produce a json response. Basically I am trying to get all the images in a specific directory. Below is my jQuery code, and this works fine for directories with less than about 50 images, but once the number of images is greater than that, Firefox will just abort the request. This works fine in Safari, Chrome, IE. Either they are doing something wrong and Firefox is doing it right, and I am making an error, or this is one of the rare times when Firefox is the culprit. I have tried $.getJSON and disabling caching of the ajax requests, but that does not seem to work either. Any help will be greatly appreciated and thanks in advance.
var activeRequest = false;
var error = "The system could not read the directory at this time.";
var current = this.location['href'];
var filesCache = {};
function addFile(list, varToAdd, path, id){
if (typeof varToAdd != 'undefined' && varToAdd != null ){
var imagePath = path;
var srcPath = path+"/"+varToAdd['file'];
imagePath = "/cms/images/thumbs/"+imagePath+varToAdd['file'];
var filename = varToAdd['file'];
if(filename.length >18){
filename = filename.substr(0, 15)+"...";
}
var fileInfo = '<li id ="'+varToAdd['file'].replace('.', '')+'">';
fileInfo += '<a class = "thumb" href="'+srcPath+'" target="_blank"><img src="'+srcPath+'" width="'+varToAdd['width']+'" height="'+varToAdd['height']+'" alt="'+varToAdd['file']+'" /></a>';
fileInfo += '<ul class="fileInfo"><li title="'+varToAdd['file']+'">'+filename+'</li><li>'+varToAdd['dims']+'px</li><li>'+varToAdd['size']+'kb</li></ul>';
fileInfo += '</li>';
list.append(fileInfo);
delete fileInfo;
}
else
return false;
}
function lookupFiles(path){
var cleanPath = decodeURIComponent(path);
cleanPath += "/";
var urlLookUp = '/cms/images/lookup/file/?path='+encodeURIComponent(cleanPath);
var loader = $(".folder-contents .header");
$.ajaxSetup({
cache: false
});
var ajaxRequest = $.ajax({
type: 'GET',
url: urlLookUp,
data: path,
dataType: 'json',
beforeSend: function (request) {
if(!activeRequest)
loader.addClass('loading');
else
return false;
},
error: function(XMLHttpRequest, textStatus, errorThrown){
loader.addClass('error').removeClass('loading');
alert(error);
},
success: function(response, status, XMLHttpRequest) {
list = $(".folder-contents > ul.files");
if(typeof response != 'undefined' && response != null){
if(status == 'success' && (typeof response.files != 'undefined' && response.count > 0)){
list.empty();
$.each((response.files), function(index, value) {
addFile(list, value, path, response.searchTerm);
});
//list.append('</ul>');
}
else if (status == 'success' && (typeof response.files != 'undefined' && response.count == 0)){
list.empty();
list.append('<li class = "noresults">There are no images in this folder</li>');
}
else{
formLabel.addClass('error').removeClass('loading');
alert('Error');
}
}
loader.removeClass('loading');
}
});
/*
var json = $.getJSON( urlLookUp+"format=json&jsoncallback=?", function ( data ) {
console.log( data );
} );
*/
}
$(document).ready(function() {
$("a.directory").live('click',function(ev){
ev.preventDefault();
if($(this).hasClass('open')){
$(this).addClass('empty').removeClass('open').html('-');
lookup($(this).attr("title"));
}
else if($(this).hasClass('close')){
$(this).addClass('open').removeClass('close').html('+');
$(this).parent().find('ul').remove();
}
});
$("a.folder").live('click',function(ev){
ev.preventDefault();
lookupFiles($(this).attr("title"));
});
$(".files li").live('click', function(ev){
ev.preventDefault();
// send ckeditor back what image was selected - url from jquery selector & callBack from the view
var fileUrl = $(this).find('a').attr("href");
var callBack = window.CKEditorFuncName;
window.opener.CKEDITOR.tools.callFunction(callBack, fileUrl);
window.close();
});
});