Develop Reference

How to load javascript source from the working directory of the current source file?

I have a CGI application that had been working correctly for a long time, but recently broke, apparently because of a change in rules for where js scripts get loaded from. I'm using the solution from this answer to load js code conditionally from an external source. My version of the code looks like this:
function load_external_js(s) {
// usage: load_external_js({src:"http://foo.com/bar.js",
// element:"head",type:"text/javascript"});
// ... defaults (the values shown above) are provided for element and type
// http://stackoverflow.com/a/15521523/1142217
// src can be a url or a filename
var js = document.createElement("script");
js.src = s.src;
js.type = (typeof s.type === 'undefined') ? 'text/javascript' : s.type;
var element = (typeof s.element === 'undefined') ? 'head' : s.element;
var e = document.getElementsByTagName(element)[0];
e.appendChild(js);
// BUG -- no error handling if src doesn't exist
}
The issue I'm running into seems to be related to how either the browser or the server resolves relative file paths in this context. What I was doing was this:
load_external_js({src:"foo.js"});
This used to load foo.js from the same directory where the calling js script lived, which was something like /var/www/html/js/3.0.4. But recently this behavior has changed, and the file is searched for in the directory /usr/lib/cgi-bin/myapp, presumably because the html is generated by a CGI script. I can hardcode the directory like this:
load_external_js({src:"/js/3.0.4/mathjax_config.js"});
But this is ugly, and I would have to have some mechanism for setting the version number. Is there some way in pure js to do this so that the script is loaded from the same directory as the one in which the calling script lives? Googling has turned up lots of answers involving node.js or jquery, but I'm not using those.

It's difficult to test this without replicating the setup you're working with, but in my experience this should work well:
var load_external_js = (function () {
var base = document.currentScript.src;
var a = document.createElement('a');
a.href = base.split('/').slice(0, -1).join('/') + '/';
var resolve = function (src) {
var a = this.cloneNode();
a.href += src;
return a.href;
}.bind(a);
return function (s) {
// usage: load_external_js({src:'http://foo.com/bar.js',
// element:'head',type:'text/javascript'});
// ... defaults (the values shown above) are provided for element and type
// http://stackoverflow.com/a/15521523/1142217
// src can be a url or a filename
var js = document.createElement('script');
js.src = resolve(s.src); // relative to <script> this is closure is in
js.type = (typeof s.type === 'undefined') ? 'text/javascript' : s.type;
var element = (typeof s.element === 'undefined') ? 'head' : s.element;
var e = document.getElementsByTagName(element)[0];
e.appendChild(js);
};
})();

If you have access to html markup too, try to use <base> element or simply use document.baseURI and construct full path yourself.

Google Scripts: XML parsing errors

I have a google script that locates a specific .zip folder on a server, extracts the files, and takes a specific .xml file to be processed. My problem is getting this file into the proper format.
The applicable snippet of code:
var dir = UrlFetchApp.fetch(url);
var b = dir.getBlob();
var files = Utilities.unzip(b);
var vesselDataBlob;
for (var i = 0; i < files.length; i++) {
if (files[i].getName().equals("dat/vesselDataMod.xml")) { //finds file with appropriate name
vesselDataBlob = files[i];
break;
}
}
var vesselData = vesselDataBlob.getDataAsString(); // Returns FULL document as a string.
var data = XmlService.parse(vesselData); // Throws error.
vesselData is in xml format, and vesselData.getContentType() returns "text/xml".
However, I'm struggling to find a way to parse the data. XmlService.parse(vesselData) throws an error: "Content is not allowed in prolog." I tried using DOMParser, which also throws an error. Is there something wrong with how I've set up my code? Is the data not actually in xml format?
The obvious difference between what most people probably do and my situation is that I'm pulling a file from a zipped folder, instead of just straight from a website. That's not the problem, I've tried just using a xml file uploaded to Drive, and the same problem occurs.
I can set up string manipulation to get the data I need, but I'd rather not go through the effort if someone can help out. Thanks!
I've been using this snippet of xml for debugging:
<?xml version="1.0" encoding="UTF-8"?>
<vessel_data version="2.1">
<hullRace ID="0" name="TNS" keys="player">
<taunt immunity="Yadayada" text="More yadayada"/>
</hullRace>
</vessel_data>

The following function works for me with a very simple zip file. I recommend that you try getDataAsString("UTF-8") and see if that resolves the issue.
function test() {
var f = DriveApp.getFilesByName("ingest.zip").next();
var files = Utilities.unzip(f.getBlob());
for(var i=0; i<files.length; i++) {
var ff = files[i];
if (/\.xml$/.test(ff.getName())){
var s = XmlService.parse(ff.getDataAsString());
Logger.log(s);
s = XmlService.parse(ff.getDataAsString("UTF-8"));
Logger.log(s);
break;
}
}
}

I put your XML file into a gist (as XML, not zip) and it parses.
function test2() {
var f = UrlFetchApp.fetch("...gisturl.../test.xml").getBlob(
);
var s = XmlService.parse(f.getDataAsString());
Logger.log(s.getDescendants().length);
}
Unfortunately, I am now having trouble getting Utilities.unzip() to run on a zip file uploaded to Google Drive. Hopefully another user will give you a better solution.

Extract Url of Hosted Javascript File [duplicate]

Is there a simple and reliable way to determine the URL of the currently-executing JavaScript file (inside a web page)?
My only thought on this is to scan the DOM for all the script src attributes to find how the current file was referenced and then figure out the absolute URL by applying it to document.location. Anyone have other ideas, is there some super-easy method I completely overlooked?
UPDATE: Script elements accessed via the DOM already have a src property which contains the full URL. I don't know how ubiquitous/standard that is, but alternatively you can use getAttribute("src") which will return whatever raw attribute value is in the [X]HTML.

Put this in the js file that needs to know it's own url.
Fully Qualified (eg http://www.example.com/js/main.js):
var scriptSource = (function(scripts) {
var scripts = document.getElementsByTagName('script'),
script = scripts[scripts.length - 1];
if (script.getAttribute.length !== undefined) {
return script.src
}
return script.getAttribute('src', -1)
}());
Or
As it appears in source (eg /js/main.js):
var scriptSource = (function() {
var scripts = document.getElementsByTagName('script'),
script = scripts[scripts.length - 1];
if (script.getAttribute.length !== undefined) {
return script.getAttribute('src')
}
return script.getAttribute('src', 2)
}());
See http://www.glennjones.net/Post/809/getAttributehrefbug.htm for explanation of the getAttribute parameter being used (it's an IE bug).

For recent browsers, you can use document.currentScript to get this information.
var mySource = document.currentScript.src;
The upside is that it's more reliable for scripts that are loaded asynchronously. The downside is that it's not, as best I know, universally supported. It should work on Chrome >= 29, FireFox >= 4, Opera >= 16. Like many useful things, it doesn't seem to work in IE.
When I need to get a script path, I check to see if document.currentScript is defined, and, if not, use the method described in the accepted answer.
if (document.currentScript) {
mySource = document.currentScript.src;
} else {
// code omitted for brevity
}
https://developer.mozilla.org/en-US/docs/Web/API/document.currentScript

As it appears in source (e.g. /js/main.js), this is cross-browser:
var scriptSource = (function()
{
var scripts = document.getElementsByTagName('script'),
script = scripts[scripts.length - 1];
//No need to perform the same test we do for the Fully Qualified
return script.getAttribute('src', 2); //this works in all browser even in FF/Chrome/Safari
}());
Fully Qualified (e.g. http://www.example.com/js/main.js):
After some tests it seems hard to get the fully qualified one in a cross-browser way. The solution suggested by Crescent Fresh does not work in IE8 to get the fully qualified, even if it works in IE7

This method work with defer, async and lazy loading
Since you know the filename of your script, and if it will be unique
/* see
* http://stackoverflow.com/questions/984510/what-is-my-script-src-url/984656#984656
* http://www.glennjones.net/Post/809/getAttributehrefbug.htm
*
* iterate all script to find script with right filename
* this work with async and defer (but your script MUST have a unique filemane)
* mozilla support document.currentScript and we use it, if is set
*
* this will not work with local script loaded by jQuery.getScript(),
* since there is no script tag added into the dom. the script is only evaluated in global space.
* http://api.jquery.com/jQuery.getScript/
*
* to fix this odd, you can add a reference in meta ( meta[name=srcipt][content=url] )
* when you load the script
*/
var scriptFilename = 'jquery.plugins.template.js'; // don't forget to set the filename
var scriptUrl = (function() {
if (document.currentScript) { // support defer & async (mozilla only)
return document.currentScript.src;
} else {
var ls,s;
var getSrc = function (ls, attr) {
var i, l = ls.length, nf, s;
for (i = 0; i < l; i++) {
s = null;
if (ls[i].getAttribute.length !== undefined) {
s = ls[i].getAttribute(attr, 2);
}
if (!s) continue; // tag with no src
nf = s;
nf = nf.split('?')[0].split('/').pop(); // get script filename
if (nf === scriptFilename) {
return s;
}
}
};
ls = document.getElementsByTagName('script');
s = getSrc(ls, 'src');
if ( !s ) { // search reference of script loaded by jQuery.getScript() in meta[name=srcipt][content=url]
ls = document.getElementsByTagName('meta');
s = getSrc(ls, 'content');
}
if ( s ) return s;
}
return '';
})();
var scriptPath = scriptUrl.substring(0, scriptUrl.lastIndexOf('/'))+"/";
a jquery plugin template with it:
https://github.com/mkdgs/mkdgs-snippet/blob/master/javascript/jquery.plugins.template.js
note: this will not work with local script loaded by jQuery.getScript(), since there is no script tag added into the dom. the script is only evaluated in global space.
http://api.jquery.com/jQuery.getScript/
to fix it you can do something like:
function loadScript(url,callback) {
if ( $('[src="'+url+'"]').length ) return true; // is already loaded
// make a reference of the loaded script
if ( $('meta[content="'+url+'"]', $("head")).length ) return true; // is already loaded
var meta = document.createElement('meta');
meta.content = url;
meta.name = 'script';
$("head").append(meta);
return $.ajax({
cache: true,
url: u,
dataType: 'script',
async: false,
success : function (script) {
try {
if ( typeof callback == 'function' ) callback();
} catch (error) {
//console.log(error);
}
}
});
}

If this is a strictly client solution, yours sounds pretty good.
If you are writing code on the server, you could probably just populate a div/hidden field/(insert your fave HTML element here) with the fully resolved URL to the script, and pick that up with your javascript on the clientside.

You may want to have a look at https://addons.mozilla.org/en-US/firefox/addon/10345 if you're interested in learning which functions (and thus which file) are executing on a page you don't control.
If you're interested in figuring out which of your scripts is executing, then there are a number of ways. With Firebug you could console.log() the information. Even just putting alert statements in your code (while annoying) can help debug in a low-tech way. You could also raise errors and catch them, then process using properties of the error (see: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Error)
However, why would this be important? If the script is causing errors already then it's easy enough to determine where the error is occurring. If it's not about errors at all, then what's the advantage in knowing which file it comes from?

JavaScript: Read files in folder

EDIT: I'm trying to read all the files in a specific folder and list the files in there, not read the content of a specific file. I just tried to simply create an FileSystemObject and it doesn't do anything either. I show an alert (which pops up) beforfe making the FileSystemObject, and one after it (which isn't shown). So the problem is in simply creating the object.
Original:
I am trying to read all the files in a folder by using JavaScript.
It is a local HTML file, and it will not be on a server, so I can't use PHP I guess.
Now I'm trying to read all the files in a specific given folder, but it doesn't do anything on the point I make a FileSystemObject
Here is the code I use, The alert shows until 2, then it stops.
alert('1');
var myObject, afolder, date;
alert('2');
myObject = new ActiveXObject("Scripting.FileSystemObject");
alert('3');
afolder = myObject.GetFolder("c:\\tmp");
alert('4');
date = afolder.DateLastAccessed;
alert("The folder"+name+" is a temporary folder.");
Am I doing this the right way?
Thanks!

The method I found with a Google search uses HTML5 so if you are using a modern browser you should be good. Also the tutorial page seems to check if the browser you are using supports the features. If so you should be good to follow the tutorial which seems pretty thorough.
http://www.html5rocks.com/en/tutorials/file/dndfiles/

This solution only works on IE11 or older since it is MS based
<script type="text/javascript">
var fso = new ActiveXObject("Scripting.FileSystemObject");
function showFolderFileList(folderspec) {
var s = "";
var f = fso.GetFolder(folderspec);
// recurse subfolders
var subfolders = new Enumerator(f.SubFolders);
for(; !subfolders.atEnd(); subfolders.moveNext()) {
s += ShowFolderFileList((subfolders.item()).path);
}
// display all file path names.
var fc = new Enumerator(f.files);
for (; !fc.atEnd(); fc.moveNext()) {
s += fc.item() + "<br>";
}
return s;
}
function listFiles() {
document.getElementById('files').innerHTML = showFolderFileList('C:');
}
</script>
<input type='button' onclick='listFiles()' value='List Files' />
<div id="files" />

How to resolve the C:\fakepath?

<input type="file" id="file-id" name="file_name" onchange="theimage();">
This is my upload button.
<input type="text" name="file_path" id="file-path">
This is the text field where I have to show the full path of the file.
function theimage(){
var filename = document.getElementById('file-id').value;
document.getElementById('file-path').value = filename;
alert(filename);
}
This is the JavaScript which solve my problem. But in the alert value gives me
C:\fakepath\test.csv
and Mozilla gives me:
test.csv
But I want the local fully qualified file path. How to resolve this issue?
If this is due to browser security issue then what should be the alternate way to do this?

Some browsers have a security feature that prevents JavaScript from knowing your file's local full path. It makes sense - as a client, you don't want the server to know your local machine's filesystem. It would be nice if all browsers did this.

Use
document.getElementById("file-id").files[0].name;
instead of
document.getElementById('file-id').value

I use the object FileReader on the input onchange event for your input file type! This example uses the readAsDataURL function and for that reason you should have an tag. The FileReader object also has readAsBinaryString to get the binary data, which can later be used to create the same file on your server
Example:
var input = document.getElementById("inputFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
var img = document.getElementById("yourImgTag");
img.src = event.target.result;
}

If you go to Internet Explorer, Tools, Internet Option, Security, Custom, find the "Include local directory path When uploading files to a server" (it is quite a ways down) and click on "Enable" . This will work

I am happy that browsers care to save us from intrusive scripts and the like. I am not happy with IE putting something into the browser that makes a simple style-fix look like a hack-attack!
I've used a < span > to represent the file-input so that I could apply appropriate styling to the < div > instead of the < input > (once again, because of IE). Now due to this IE want's to show the User a path with a value that's just guaranteed to put them on guard and in the very least apprehensive (if not totally scare them off?!)... MORE IE-CRAP!
Anyhow, thanks to to those who posted the explanation here: IE Browser Security: Appending "fakepath" to file path in input[type="file"], I've put together a minor fixer-upper...
The code below does two things - it fixes a lte IE8 bug where the onChange event doesn't fire until the upload field's onBlur and it updates an element with a cleaned filepath that won't scare the User.
// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
// document onReady wrapper
$().ready(function(){
// check for the nefarious IE
if($.browser.msie) {
// capture the file input fields
var fileInput = $('input[type="file"]');
// add presentational <span> tags "underneath" all file input fields for styling
fileInput.after(
$(document.createElement('span')).addClass('file-underlay')
);
// bind onClick to get the file-path and update the style <div>
fileInput.click(function(){
// need to capture $(this) because setTimeout() is on the
// Window keyword 'this' changes context in it
var fileContext = $(this);
// capture the timer as well as set setTimeout()
// we use setTimeout() because IE pauses timers when a file dialog opens
// in this manner we give ourselves a "pseudo-onChange" handler
var ieBugTimeout = setTimeout(function(){
// set vars
var filePath = fileContext.val(),
fileUnderlay = fileContext.siblings('.file-underlay');
// check for IE's lovely security speil
if(filePath.match(/fakepath/)) {
// update the file-path text using case-insensitive regex
filePath = filePath.replace(/C:\\fakepath\\/i, '');
}
// update the text in the file-underlay <span>
fileUnderlay.text(filePath);
// clear the timer var
clearTimeout(ieBugTimeout);
}, 10);
});
}
});
})(jQuery);

On Chrome/Chromium based apps like electron you can just use the target.files:
(I'm using React JS on this example)
const onChange = (event) => {
const value = event.target.value;
// this will return C:\fakepath\somefile.ext
console.log(value);
const files = event.target.files;
//this will return an ARRAY of File object
console.log(files);
}
return (
<input type="file" onChange={onChange} />
)
The File object I'm talking above looks like this:
{
fullName: "C:\Users\myname\Downloads\somefile.ext"
lastModified: 1593086858659
lastModifiedDate: (the date)
name: "somefile.ext"
size: 10235546
type: ""
webkitRelativePath: ""
}
So then you can just get the fullName if you wanna get the path.
Note that this would only work on chrome/chromium browsers, so if you don't have to support other browsers (like if you're building an electron project) you can use this.

I came accross the same problem. In IE8 it could be worked-around by creating a hidden input after the file input control. The fill this with the value of it's previous sibling. In IE9 this has been fixed aswell.
My reason in wanting to get to know the full path was to create an javascript image preview before uploading. Now I have to upload the file to create a preview of the selected image.

If you really need to send the full path of the uploded file, then you'd probably have to use something like a signed java applet as there isn't any way to get this information if the browser doesn't send it.

Use file readers:
$(document).ready(function() {
$("#input-file").change(function() {
var length = this.files.length;
if (!length) {
return false;
}
useImage(this);
});
});
// Creating the function
function useImage(img) {
var file = img.files[0];
var imagefile = file.type;
var match = ["image/jpeg", "image/png", "image/jpg"];
if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile == match[2]))) {
alert("Invalid File Extension");
} else {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(img.files[0]);
}
function imageIsLoaded(e) {
$('div.withBckImage').css({ 'background-image': "url(" + e.target.result + ")" });
}
}

seems you can't find the full path in you localhost by js, but you can hide the fakepath to just show the file name. Use jQuery to get the file input's selected filename without the path

The best solution for this, I've found, is to use a middleware like Multer. Here's a quick rundown:
npm i multer
Add enctype="multipart/form-data" to your html form.
In your backend dock where you're making your post request, require multer (const multer = require('multer'))
In the same dock, set your upload destination: const upload = multer({dest:'uploas/'}). This will automatically create a local folder called 'uploads' where your files will be added. The code I've included shows you how to upload to your local disk storage. If you're using cloud storage (e.g. AWS, Azure, Cloudinary etc.) you can check out the Multer docs to see how to manage that. There aren't too many extra steps though.
in your post request, add 'upload.single' (for one file) or 'upload.array' (for multiple files), like this:
router.post('/new', upload.single('image'), async function(req, res) { //'image' should be the name of the input you're sending in the req.body
console.log(req.file) //note, if you're using 'upload.array', this should be 'req.files'
});
the req.file will have a full path name that you can use in your post request. For more information, check out the Multer docs:
https://www.npmjs.com/package/multer
I hope this helps!

You would be able to get at least temporary created copy of the file path on your machine. The only condition here is your input element should be within a form
What you have to do else is putting in the form an attribute enctype, e.g.:
<form id="formid" enctype="multipart/form-data" method="post" action="{{url('/add_a_note' )}}">...</form>
you can find the path string at the bottom.
It opens stream to file and then deletes it.

Hy there , in my case i am using asp.net development environment, so i was want to upload those data in asynchronus ajax request , in [webMethod] you can not catch the file uploader since it is not static element ,
so i had to make a turnover for such solution by fixing the path , than convert the wanted image into bytes to save it in DB .
Here is my javascript function ,
hope it helps you:
function FixPath(Path)
{
var HiddenPath = Path.toString();
alert(HiddenPath.indexOf("FakePath"));
if (HiddenPath.indexOf("FakePath") > 1)
{
var UnwantedLength = HiddenPath.indexOf("FakePath") + 7;
MainStringLength = HiddenPath.length - UnwantedLength;
var thisArray =[];
var i = 0;
var FinalString= "";
while (i < MainStringLength)
{
thisArray[i] = HiddenPath[UnwantedLength + i + 1];
i++;
}
var j = 0;
while (j < MainStringLength-1)
{
if (thisArray[j] != ",")
{
FinalString += thisArray[j];
}
j++;
}
FinalString = "~" + FinalString;
alert(FinalString);
return FinalString;
}
else
{
return HiddenPath;
}
}
here only for testing :
$(document).ready(function () {
FixPath("hakounaMatata:/7ekmaTa3mahaLaziz/FakePath/EnsaLmadiLiYghiz");
});
// this will give you : ~/EnsaLmadiLiYghiz