Archive

fill textarea from a file

vikas_gopal
Builder

Hello Everyone,
Please suggest how I can fill textarea box from a file located in local drive .

Thanks

Tags (1)
0 Karma
1 Solution

gauldridge
Path Finder

If you are using Splunk 6 or the Web Framework, you can convert a dashboard to HTML and read a local file using HTML5/JavaScript.

To select the file, put <input type="file" id="localFileInput"> in the HTML wherever you want the file selection box to be. Then, add some JavaScript just before the closing script tag in your dashboard that handles the contents of the file. You'll need to include something like:

var control = document.getElementById("localFileInput")

add an event listener:

control.addEventListener("change", function(event){...

and inside that function you can use FileReader() to read the contents of the local file.

EDITED RESPONSE BELOW:

Assuming the user will be selecting the file, try the following:

Select the local file:

 <input type="file" id="inputfile"/>

A blank textarea that will be populated by the contents of your text file:

  <textarea rows="4" cols="50" id="putcontentshere"></textarea>

The javascript needed to put the contents of the file in the textarea (this goes just above the closing script tag in the body of the html):

//External data file handling starts here
var control = document.getElementById("inputfile"); 
    control.addEventListener("change", function(event){ 
        var reader = new FileReader();      
        reader.onload = function(event){
            var contents = event.target.result;     
            document.getElementById('putcontentshere').value = contents;            
        };      
        reader.onerror = function(event){
            console.error("File could not be read! Code " + event.target.error.code);
        };      
        console.log("Filename: " + control.files[0].name);
        reader.readAsText(control.files[0]);        
    }, false);

Simple as that. If you want to do it without the user selecting the file, I think you might be out of luck. Allowing the browser/DOM to access the local file system without user interaction would be a big no-no and isn't allowed (that I know of) without hacking something.

View solution in original post

gauldridge
Path Finder

If you are using Splunk 6 or the Web Framework, you can convert a dashboard to HTML and read a local file using HTML5/JavaScript.

To select the file, put <input type="file" id="localFileInput"> in the HTML wherever you want the file selection box to be. Then, add some JavaScript just before the closing script tag in your dashboard that handles the contents of the file. You'll need to include something like:

var control = document.getElementById("localFileInput")

add an event listener:

control.addEventListener("change", function(event){...

and inside that function you can use FileReader() to read the contents of the local file.

EDITED RESPONSE BELOW:

Assuming the user will be selecting the file, try the following:

Select the local file:

 <input type="file" id="inputfile"/>

A blank textarea that will be populated by the contents of your text file:

  <textarea rows="4" cols="50" id="putcontentshere"></textarea>

The javascript needed to put the contents of the file in the textarea (this goes just above the closing script tag in the body of the html):

//External data file handling starts here
var control = document.getElementById("inputfile"); 
    control.addEventListener("change", function(event){ 
        var reader = new FileReader();      
        reader.onload = function(event){
            var contents = event.target.result;     
            document.getElementById('putcontentshere').value = contents;            
        };      
        reader.onerror = function(event){
            console.error("File could not be read! Code " + event.target.error.code);
        };      
        console.log("Filename: " + control.files[0].name);
        reader.readAsText(control.files[0]);        
    }, false);

Simple as that. If you want to do it without the user selecting the file, I think you might be out of luck. Allowing the browser/DOM to access the local file system without user interaction would be a big no-no and isn't allowed (that I know of) without hacking something.

View solution in original post

vikas_gopal
Builder

@gauldridge Thanks it works , thanks allot..
But as you suggest it is not possible without user interaction actually I don't want to show choose file button .
Anyways because of you I achieved this for that thanks again you are awesome...:)

0 Karma

gauldridge
Path Finder

@vikas_gopal Please see my updated/edited response above.

0 Karma

aelliott
Motivator

I think your whole issue is that you are attempting to point to a file that is on the filesystem. it must be able to be retrieved via web for this to work.. such as a URL to the text file.

0 Karma

vikas_gopal
Builder

@aelliott I did it but no luck yet.I have added the function after the code.Here is my js code.
require(['jquery','underscore','splunkjs/mvc','splunkjs/mvc/simplexml/ready!'], function($, _, mvc, SimpleSplunkView){
var content ;
function loadXMLDoc();
{

var textfile;
if (window.XMLHttpRequest);
{
textfile = new XMLHttpRequest();
}
textfile.onreadystatechange = function ();
{

if (textfile.readyState == 4 && textfile.status == 200) {
content = textfile.responseText;
}
} textfile.open("GET", "D:\vikas\vikas.txt", true);
textfile.send();
}
});
loadXMLDoc();

0 Karma

aelliott
Motivator

you could just add it within your script after it is defined. Just add loadXMLDoc() after the code

0 Karma

vikas_gopal
Builder

@aelliott thanks for the reply.
I tried it as it mentioned in the link.I copied it and paste it in my javascript file .I changd the path accordingly .Now in splunk where I can call this function?so that it picks up the value and shows it to textarea.

0 Karma

aelliott
Motivator
0 Karma

vikas_gopal
Builder

@gauldridge Thanks for the reply ,
Unfortunately I am new to javascript and splunk.I found one solution on the following site but it did not work for me.
http://www.sitepoint.com/forums/showthread.php?456093-Read-from-file-then-populate-textarea-with-con....

0 Karma

Leo
Splunk Employee
Splunk Employee

One way to do this is to create a custom splunkd endpoint that would retrieve the file data and return it's contents by request. Then have your Mako template or Javascript call it and populate the textbox with returned data.

Take the 2021 Splunk Career Survey

Help us learn about how Splunk has
impacted your career by taking the 2021 Splunk Career Survey.

Earn $50 in Amazon cash!