I would like to retrieve data from specific cells in a local Excel sheet using Javascript and then output it on an HTML page. My function would be something like readData(row, col).
For example:
Cell 1A = "hello"
<h4><script>readData(1, A)</script></h4> will show as "hello" on my page.
Every solution I have seen has involved uploading the file first (example below from the read-excel-file package), but my Excel file is already a local file within my project.
<script>
var input = document.getElementById('input')
input.addEventListener('change', function() {
readXlsxFile(input.files[0]).then(function(rows) {
// `rows` is an array of rows
// each row being an array of cells.
})
})
</script>
My guess is you are referring to this project?
https://gitlab.com/catamphetamine/read-excel-file
I tried using the Node.js example. It works out of the box. The examples for a direct website integration are broken. The project seems still alive, but I would scan the code to decide if to trust the author with your data.
Here how to fix the example (I have no idea for what cases it works!):
Go into the "website" folder. The index.html is a example how to use it. Unfortunately the "read-excel-file.min.js" is missing in the repo. You can download it here (view-source:https://catamphetamine.gitlab.io/read-excel-file/read-excel-file.min.js). Put it in the folder and it works.
Maybe someone has a better code for this?
EDIT (Above answer not technically wrong but does not answer the post):
What you want is not possible to security reasons! Just imagine your javascript (client!) code:
inputfile="test.xlsx"
I could edit this in my browser to
inputfile="super_secret_files_on_server.xlsx"
Solution: You could run node.js code on your server and solve it this way, or the user has manually upload a file from his computer. Or use a server side programming languages like php.
Related
I am creating browser based video editing tool. I want a user to first download a ~70mb javascript file and store it somewhere on his computer. I want to link that file when my website is opened. How can I achieve that.
EDIT
What i meant is that there are various files like js1.js,js2.js... all sums upto 70mb . So i will offer a zip folder to download and only link js1 or js2 file etc depending on the effects user wish to apply
i am sorry to inform you but i think there is something really wrong with what you are trying to do.
A "solution" would be to just cache the javascript on the user's browser so any subsequent requests parse the cache instead of requesting the resource again from the server.
You should know however that if you are in need to download ~70mb of a javascript file you are doing something wrong. I have a whole web app project that when published the total size is around 60mb, all files required to properly run included, and its a damn big codebase in there.
I find it very hard to believe there is ever a need for a single javascript file to be that big, in any case maybe a simple caching should do the trick
That is actually done automatically. Once you add a <script> tag with a link to a local js file (also stored on the server) the file is loaded automatically.
See HTML <script> src Attribute for more information on that.
You can only reference to js files on the server. Files on the server could look like this:
index.html
somefancyjsfile.js
You can then reference from inside your html file to the js file via the <script> tag.
I'm not sure though if the size is not a bit too much...
I am referencing two JS files in my map.HTML header. Chrome console gives
Uncaught SyntaxError: Unexpected token <
Here is why I'm confused. When I click on the Chrome Console error message, it takes me to the Sources tab. Under Sources, it puts me on the relative JS tab, and shows code starting with < !DOCTYPE html> then continues with a ton of code that is not in my map.html file or JS file. Presumably this is generated when the JS is read?
The two JS files are:
https://github.com/socib/Leaflet.TimeDimension/tree/master/dist
https://github.com/calvinmetcalf/leaflet-ajax/tree/gh-pages/dist
I am opening map.HTML locally with Chrome using a simple python server using a batch file (python.exe -m http.server).
I am sure this is very basic, but it's confusing me because I reference plenty of other JS files both online and locally and I don't get this error.
Thanks
If you try https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js in your browser, you will get an HTML page.
If you try https://raw.githubusercontent.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js you will get what seams a source javascript file. But your browser may also consider it text/html, because that's what github sends in content-type header.
You can use third party sites which will serve files with appropriate content-type header, (example: https://rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js ).
In the future, try to do more research before posting here, otherwise a lot of people are going to downvote your questions, and even insult you.
A simple Google search for the differences between html and javascript may be a good start. The first step would be to remove those doctype lines. They mean nothing in Javascript. Just like the word granola has no meaning in Japanese. Different languages.
However, looking at your code, I don't see any DOCTYPE text in your javascript. In order to really debug this, you're going to want to open your webpage (html) in a browser (I recommend Chrome) and press F12 to open the developer tools. Go to the console and trace the error back through all of the files to find the origin.
In order to check and make sure that you're trying to pull javascript files and not html, take all the src urls you're using and paste them in a browser. If you land on a webpage, that url will serve up html, not javascript like you want. If you get a wall of text, you're probably referencing it correctly.
Correct: https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js
Incorrect: https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js
Hopefully this helps before this question gets deleted or put on hold. Also notice that people are going to downvote me for actually answering and trying to help.
You can't directly reference code stored in a github repo like you're trying to.
The URLs you're listing aren't javascript files; they're github webpages. That's why they contain HTML doctypes and code you don't recognize -- it's the github website code.
You can get the URL for the actual javascript files by clicking the "raw" button at the top of any of those pages (after selecting a specific individual file -- the urls you gave were for directories, not individual files.) For example:
This is an HTML file: https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js
This is the raw javascript:
https://raw.githubusercontent.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js
(That said, I don't believe it's a good idea to treat github like a CDN; usually you would use that purely as a repository and host the actual files in use elsewhere.)
I am trying to make a compiler in which users make code at abc.com/newProject and their output is in an iframe, that iframe need to be served files that are made at the abc.com/newProject. So I will be doing a POST of JSON obj at abc.com/compile-project that will create files and those will be used by the iframe, after being used those should get deleted. Files are basically JS files that iframe will fetch using script in header.
So a pseudo-code will look something like this:-
app.post('/compile-project', function(req, res){
//Directory created using node tmp
//files created in the directory
//These files are accessible using <script src="/js/file1.js"></script>
//when the current connection requests the files they get deleted
});
Any help will be appreciated thanks.....
I am trying to make a compiler [...] Any help will be appreciated thanks.....
I would strongly discourage you from doing that if you don't know what you're doing (and considering the fact that you're asking how to save a file then apparently you don't).
The requirements that you described are extremely simple but you need to have much deeper understanding of everything that's going on to avoid serious security problems that you will encounter with no doubt along the way.
What you describes can be done without even using a file system, since all your files are served only once so it doesn't make much sense to store them in actual files. But even if you insist on the file system then all you need is to use fs.mkdtemp to create a temporary directory, use something like the uuid module for unique IDs to use in the filenames, then use fs.writeFile to write a file. This is all you need for the file upload endpoint. Now in the download endpoint all you need is to use fs.readFile to read the file and fs.unlink to remove it. That's it.
Now, it will surely get you into trouble of failures on browser reloads, back button not working, and finally security issues of people being able to serve any random code from your servers leading to vulnerabilities too numerous to even list here.
Take a look at the source code of repl.it and JS Bin on GitHub:
https://github.com/replit/repl.it
https://github.com/jsbin/jsbin
to appreciate the scope of the project that you are willing to undertake.
I'm using the Session.getEffectiveUser () command to return the results of the active user in the worksheet, but if another user enters the same sheet the results will conflict.
That is, only one can enter at a time. What can I do to keep this conflict from appearing?
Crazy solution that I thought: Is there any way that this worksheet doubles if I have 2 active users at the same time, and delete if that second user leaves?
Thx a lot!
And sorry for my bad english!
Here are the steps to deploy your code as a web app so that conflicts won't happen.
For this, you will need a front end where you will take inputs or whatever from the current user who will be accessing the web app.
Now, in your appscript screen only, you can go to File -> new -> html file, and name it as index.html or whatever you like. Code it in simple html format. Apply javascript also if you have to. For adding javascript externally, you can create another .html file and write your tag there. These all is simple html and javascript only.
Now, we have to link it with our appscript somehow. So for that, write this function in your appscipt:
function doGet(e)
{
var template = HtmlService.createTemplateFromFile('Index');
return template.evaluate()
.setTitle('YOUR_TITLE')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
And also write this line in your Index.html page(You can write it outside of <html> tags):
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
Now your code is ready to be deployed as web app. Go to Publish -> Deploy as web app...See that you have kept the option 'me' in Execute app as. Also, you can specify who can access your web app in the next option 'who has access to this app'.
Click update and run the latest code by clicking 'latest code' written in blue. You can also note it's URL so that you can include your web app in google sites etc.
Note that, every time you make new changes to the code, you should always choose project version 'new' and then click update.
Few tips:
To call functions of appscript from javascript, you can write like this:
google.script.run.withSuccessHandler(FUNCTION_NAME).APPSCRIPT_FUNCTION();
What it will do is, it will asynchronously call appscript function and when it is successfully executed, will execute the next javascript function named 'FUNCTION_NAME'.
How this will solve your problem?
Well, as you have deplyed the web app as 'me', whoever will run the web app will execute the code as if you yourself has executed the code, but at the same time, all featuers like Session.getActiveUser() will work individually. Hence, conflicts won't happen.
Try this yourself and you will have your doubts solved. If any queries please ask, community is always happy to help. :)
I hope the following isn't too tricky.
I have a simple html button. Now I want to open a filechooser as soon as a user clicks on this button.
I do this like the following:
$('.button').click(function()
{
$('<input type="file"/>').attr('value');
});
This opens a filechooser, but I want this file-chooser to only show files on the server, not on the client. I've searched the net but couldn't find an adequate solution so far.
Any proposals are welcome :)
Impossible, sorry. You'd need to use server side code to make a tool that allows the end user to browse the server's files.
The file input is used for the end user to choose file(s) on their machine. It has no knowledge of the server's files.
It's not tricky, but you can't use Input tag for it. The steps are:
Create a module to traverse the directory on your server and output is a JSON format in whatever server implementation that you choose
Create a REST endpoint to give the browser the JSON output from step #1
Use AJAX to call this REST webservice and get the directory listings
Use Tree Widget to basically build the file structure based on JSON (I am sure if you look, one is probably there already for you to use)
There's no simple way to do it. If you use jQuery UI you can use a plugin like this:
http://gusc.lv/jquery/gcmedia.html
With a server-side scripts that outputs a list of the files you want to make browseable.