Javascript Create HTML File in Specified Directory - javascript

I know that since the creation of HTML5 there has been many additions that make programming websites more easy than ever. It seems they may have failed to add a File system that actually creates a file in a specified directory (not to my knowledge anyway). I have been searching the web and have found nothing about doing such a thing without using a 3rd party i.e JQuery, php, Javascript Libraries. I assume that since there is pure js libraries that can accomplish this that it is possible, but I do not know for sure. What I would like to do is output an html file from the outerHtml generated in my JavaScript minus the script source itself. Note that I do not want the client to have to download.

Try this:
<head>
<script type="text/javascript">
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("C:\test.txt", True);
s.writeline("HI");
s.writeline("Bye");
s.writeline("-----------------------------");
s.Close();
}
</script>
</head>
<body>
<p>Fill out the form below:
</p>
<form onSubmit="WriteToFile(this)">
Type your first name:
<input type="text" name="FirstName" size="20">
<br>Type your last name:
<input type="text" name="LastName" size="20">
<br>
<input type="submit" value="submit">
</form>
This will work only on IE.
Also see: create a file using javascript in chrome on client side

Preventing webpage scripts from creating files on local filesystem is done for your own security. You don't want website you visit create an executable file on your local disk with virus.
There is a File System API in HTML5, but it's kind of internal filesystem intended as a local storage for user data.
You can force user to save file by returning HTTP header Content-Disposition with value attachment; filename=example.csv. This will force browser to save file locally.

Related

How to save form uploaded files in a form in a specific folder in javascript?

So, I have trying to save uploaded files in a specific folder. Say, I have an html file as shown:
<form>
<input type="file" id="image_file" />
<input type="file" id="text_file" />
<input type="submit" />
</form>
Now, I want to write a js onsubmit function for the above form such that it saves the given file in a unique folder inside a base folder.
I had been researching various ways of doing this, and the only solution I found is using a server by making ajax calls, which I dont want to do.
Is there any native way in javascript that allows me to do this?
You can not store upload files to the server only using client-side Javascript. You need any backend language/technology. Javascript is the client-side language which runs only in the client's browser, so you need to send the selected file to the server and then save it on the server using any backend language (for example, php or 'node.js`)
Check out these links:
https://www.w3schools.com/php/php_file_upload.asp
https://www.w3schools.com/nodejs/nodejs_uploadfiles.asp

JavaScript Open Dialog to get path and file name

Okay,
I've looked EVERYWHERE and everyone keeps answering this question like we're going to actually "download" a file actively.
I am not downloading a file. I am not Uploading a file. I just want a dialog that allows the user to easily provide the path and filename for entry into a textbox so they don't have to type the whole damn thing manually.
don't ask why, or what I'm using it for, I just want to know how to open a simple filesystem dialog. The user browses, types a file name, clicks save, and the text input on the form is populated with the fully qualified path.
This is definitely possible (maybe not with javascript, but I've seen countless pages that open up a file browse dialog) so how do I do this?
Thanks
Jaeden "Sifo Dyas" al'Raec Ruiner
Not too long ago browsers disabled showing the full path to the file on your local machine due to security reasons.
Otherwise you could write ajax script to submit client's paths to the server without the person knowing.
Check the sample script:
$('#fileSelector').on('change', function( e ) {
$('#value').text( e.target.value );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fileSelector" type="file" />
<div id="value"></div>
You can do this with jQuery:
$(":file").change(function(){
alert($(":file").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="file">
</form>

Can javascript modify on-the-fly the contents of files uploaded as multipart/form-data?

Scenario: a simple HTML form allows users to upload one or more files on their computer to a remote server (as multipart/form-data).
<form action="upload-page.php" enctype="multipart/form-data" method="post">
<input type="file" multiple name="filesToUpload[]" id="filesToUpload">
<input type="submit" name="mybutton" id="mybutton" value="Upload" />
</form>
<script>
function latin2utf8(s){ return unescape(encodeURIComponent(s)); }
</script>
Can javascript modify on the fly the contents of the files before they hit the wire? (ie. the remote server only sees the modified data)
I 'm trying to do (transparent) character encoding conversion of the uploaded text files (ie. Latin-X to Unicode UTF-8). Is what I 'm after even possible? I' m basically looking for a javascript hook (callback?), that will let me apply latin2utf8() on the file contents before the browser POSTs them.
I have already tried Mini Multiple File Upload and JQuery File Uploader, but they don't seem to allow any processing of the file contents.
Any javascript code doing something similar, or pointers to such would be really appreciated.

Android javascript interaction - trying to upload file to CGI

Alright, so let me preface this by saying that I'm really unsure as to what I'm doing here and if it is at all possible.
I'm trying to build an android app that will interact with a pre-existing website. The site has a field to browse for a file, and a button upload it. Hitting upload opens a /upload.cgi which seems to do the uploading itself before redirecting to a results page.
Is it possible to use the underlying javascript to upload a file without having to use the pre-existing GUI that the website presents? I would like to just use my own interface, but have it interact with what the website has.
Thanks, and apologies for the vagueness.
You maybe able to get it working using the Java/JavaScript bridge to submit the form for you (using a WebView). But my guess is it would be more trouble than it's worth. And you should be able to do it directly in Java using a post.
Files in HTML forms are normally uploaded using a multipart form encoded post body. Something like this:
<form enctype="multipart/form-data" action="upload.cgi" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
All you need to do is create the same post request that the form would generate. Here are a few links to get you started with creating multipart post request on Android.
How use multipart/form-data upload picture/image on Android
http://w3mentor.com/learn/java/android-development/android-http-services/example-of-multipart-post-using-android/
http://www.17od.com/2010/02/18/multipart-form-upload-on-android/
http://evgenyg.wordpress.com/2010/05/01/uploading-files-multipart-post-apache/
Here's a debugging tip if you get stuck: You can installed fiddler as a reverse proxy on the CGI server, then you can watch both requests (HTML and Java) as they happen to compare them for differences. http://www.fiddler2.com/fiddler/help/reverseproxy.asp just remove it for production.

How to upload an image from a remote website, by using javascript?

Is there any way I can do that? For example, I have an
<input type="file" id="upload_file" />
Obviously I can't just
$('#upload_file').val('http://www.site.com/path/to/image.jpg').parent().submit();
You can't do it.
Javascript won't let you read from other domains (for security reasons).
File inputs don't accept URL inputs (or for that matter paths) AFAIK.
I can't see how you will get this to work. What server side language are you using? Would it not be better to just make a direct request for the remote file from the server?
IF that site supports what are you trying to do it should work.
Most of file uploads are very strict, as you can't just upload a file wherever you want even if you know the upload script.
If host supports sending a link to the picture and he knows what to do with it ... I don't see why your script should not work.
<form method="post" action="http://www.example.org/">
<input type="text" name="upload_file" id="upload_file" value="" />
<input type="submit" onclick="$('#upload_file').val('http://www.example.org/example.jpg');">
</form>
Te begin with, you cannot do file uploads without a server-side tool. Sending a file to the server is pointless if there isn't anything on the side other to receive it.
Said that, if you already have a server-side language available and a file that's publicly reachable at a URL, the server-side language is perfectly capable of fetching the file by its own means. There's no need to use the browser as intermediary. You just need to send the URL in a regular <input type="text"> element.
If the file is not publicly reachable, e.g., it belongs to an intranet or is password-protected, it's probably simpler to instruct the user to type the URL in the browser's "Open file" dialoque. In many cases, the browser will download the file and fill the <input type="file"> control with the temporary downloaded file.

Categories