Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Create a Text File Locally at client side using JavaScript/JQuery

I wish to create a text file locally on my system using javascript/jquery.

I am trying this code, but not working on my system.

Machine : Ubuntu 10.4 Chrome : 14.0.835.126

window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
        fs.root.getFile('~/Desktop/test.txt', {create: true}, function(fileEntry) {
            alert(fileEntry.fullPath);   //getting filepath
        }, function() {});
    }, function() {});
like image 235
Saurabh Saxena Avatar asked Oct 07 '11 08:10

Saurabh Saxena


People also ask

Can JavaScript create a text file?

Here, we will learn about creating a text file using JavaScript. As we all know that JavaScript is a client-side language, but when it comes to file manipulation, we all go with C#, PHP or Node. js whatever we prefer. So, today we can see how it's easy to generate the text file for the user from the JavaScript code.

Does jQuery run on client-side?

Remember that jQuery is client-side scripting. This means the browser must execute the code you create on your site.

Can JavaScript read and write local files?

To read local file (files that stored in machine where browser is installed), you need to use FileAPI, which is not used in current code. To write file to local, it's impossible to write it directly using JavaScript.


1 Answers

This is a little tricky but working

chrome.browserAction.onClicked.addListener(createFile);
createFile();

function createFile()
{
    chrome.tabs.getSelected(null, function(tab) {
        window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
            fs.root.getFile('test', {create: true}, function(fileEntry) {
                fileEntry.createWriter(function(fileWriter) {
                    var builder = new WebKitBlobBuilder();
                    builder.append("Saurabh");
                    builder.append("\n");
                    builder.append("Saxena");

                    var blob = builder.getBlob('text/plain');

                    fileWriter.onwriteend = function() {
                        chrome.tabs.create({"url":fileEntry.toURL(),"selected":true},function(tab){});
                    };
                    fileWriter.write(blob);
                }, errorHandler);
            }, errorHandler);
        }, errorHandler);
    });
}
function errorHandler(e) {
  var msg = '';

  switch (e.code) {
    case FileError.QUOTA_EXCEEDED_ERR:
      msg = 'QUOTA_EXCEEDED_ERR';
      break;
    case FileError.NOT_FOUND_ERR:
      msg = 'NOT_FOUND_ERR';
      break;
    case FileError.SECURITY_ERR:
      msg = 'SECURITY_ERR';
      break;
    case FileError.INVALID_MODIFICATION_ERR:
      msg = 'INVALID_MODIFICATION_ERR';
      break;
    case FileError.INVALID_STATE_ERR:
      msg = 'INVALID_STATE_ERR';
      break;
    default:
      msg = 'Unknown Error';
      break;
  };

  Console.Log('Error: ' + msg);
}

Because of the Security Exceptions, i cannot create/modify a file on Local System. But in this code, I am actually creating a file in a directory which is allocated for Google Chrome Temporary Files and then downloading that file into my Downloads Folder.

This is the code of the popup page of a Chrome Extension.

:)

like image 169
Saurabh Saxena Avatar answered Oct 17 '22 21:10

Saurabh Saxena