How to link javascript in html - javascript

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...

Related

NodeJs temporary file creation, serve and deletion using tmp or something else

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.

How to create a popup window to select a file in a local directory?

I want to create a popup window that shows me all the files in a certain directory like ex a /functions directory. I want to be able to click a file in that directory, click ok, and store it's info in variables (not upload it), How would I do this?
I've tried using a form as:
<form action="" method="post" enctype="multipart/form-data">
But with that I can't specify a directory to open specificlly, I have to manually navigate to that directory.
I've tried using window.open()
window.open("file:///" + "home/user/Desktop/demo/functions");
I've tried using an onclick link mechanism:
<a onclick="file:///+ "home/user/Desktop/demo/functions"">Open folder</a>
None of these seem to work, any ways I could approach this problem?
In JavaScript, file handling gets a bit messy. The only way to grab the contents of a folder from JavaScript would be to connect to a server and have a serverside code in a different language relay the folder information back to JavaScript.
The only way I can think that we could be able to fake this result is by placing an index.html file inside of the target directory. This index.html file would then have the names of all the files in the folder within it. However, they would have to be manually plugged into the HTML file. (if you know how to use PHP, it can scan a directory and push the contents to the HTML file)
When a web browser has to navigate to a folder, it asks the server for an index file (usually this will be an HTML or PHP file). This index would then have the contents of the folder inside of it.
If the folder is indeed on the local computer, however, there is one final way we can do this...
If the page navigates to a folder using a window.location of something akin to file:///C://Users/USERNAME/Desktop/My%20Folder/, chrome (or whatever browser you are using) will navigate to the directory and display the contents of the directory. However, since you can't put JavaScript into this browser-generated index page, you won't be able to manipulate it.
The <input type="file"> is probably your best bet, but you can't set a default directory with it (at least not without some JavaScript voodoo, and even then there are security issues between the web and the local user).
I don't know why you would want to do that, anyway, since directory structures are going to be different between different users, and the specification of paths is different between different OS's.
Instead of doing this I will suggest you copy that picture in project/image folder after clicking the upload button.

Render different asciidoc files on same webpage

I have a lot of .asciidoc files (~50). Basically, I want to create a website that can show the content of all these files on the webpage.
Till now, everything that I found basically converts the .asciidoc file into an individual .html file. This means I'll have ~50 .html files which I don't really want to do.
Is there anyway so that I can have a single webpage and somehow insert the contents of the .asciidoc file in the backend? Like PHP?
Sure, this can be done, but not by asciidoctor itself. Take a look at the OpenDevise landing page. You can see they're loading the files through the Asciidoctor API. You could do the same thing with shelling out or using the JavaScript port (asciidoctorjs). The main idea is to have something else generating a scaffold or template and then calling out to asciidoctor somehow to get the content.

Rechecking a file for updated content

I'm trying to recheck a file on a timed interval. I'm not sure if this can be accomplished, but any help would be greatly appreciated. I understand that as PHP is server-sided, it cannot accomplish my task, so anything with JavaScript is fine.
By rechecking a file, I mean getting a file's contents, but only if it's updated. Somewhat like "if file gets new contents, output them."
If you are checking on a remote file, then the PHP solution would be best: simply send the file and its checksum, then when the checksum changes, the file has been updated.
If you're working with a local file, then (if I'm seeing things right) you'll need a browser with the HTML5 File API. May be a duplicate of this: Check if file has changed using HTML5 File API

Trying to limit access to SWF files with FlexPaper

I'm trying to prevent users from downloading or accessing SWF files on my server. Using FlexPaper, the embed code looks something like this:
$('#documentViewer').FlexPaperViewer({ config : {
SwfFile : 'swf/File.swf',
// etc.
}});
The problem is, obviously, that people can view the source and go directly to the swf file, which I'm trying to prevent. Is there any way around this?
Rule #1 of the internet - of you don't want people "stealing" it, don't put it online.
That being said, you can set up a file proxy, where the file is outside of the web root. A request is make to a server-side file with the filename which then spits out a MIME header and streams your file. How you do this depends on your server-side language preferences.
It would look something like this:
SwfFile : 'serveFile.php?File.swf',
There are many plug-ins that will allow people to save the file to their local systems from the page, regardless of what you do so you need to balance your efforts against the forces of futility.

Categories

Resources