watch local directory for new files in javascript/html5

Question

as title says, is it possible to monitor a local dir in the real filesystem (not html5 sandbox)? I'd like to write an automatic photo uploader that looks for new photos and uploads them.

Answer 1

Potential repeat of Local file access with Javascript.

My understanding is that you can't access the local filesystem directly through a web browser, you have to use an intermediary like the form input tag or drag and drop.

You may be able to get away with accessing the filesystem if you were to use the operating system's javascript interpreter or something like V8. There may also be experimental javascript api's in Chrome that you could look for on the Chrome flags page if thats your browser of choice. That all depends on whether or not you were doing a personal project or something for the web.

Otherwise another scripting language such as PHP, Ruby, or Python would better suit your needs.

Answer 2

You can set a Javascript Timing event. ie: use the setInterval() method.

On the other hand, you can make a button to trigger an onClick event, or any other event, to execute the following code.

NOTE:

If you set an interval, make sure the request was received before sending it again.

For achieving this, you need to check that the readyState of your XML HTTP Request equals 4, as follows:

xmlhttp.readyState == 4

NOTE:

This is for sending the request, parsing the response and putting it in a Javascript array:

xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "check_dirs.php", true);
xmlhttp.send();

fileArray = new Array();

xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        xmlDoc = xmlhttp.responseXML;

        fileList = xmlDoc.getElementsByTagName("filesChanged");

        while (fileArray.length > 0)

        // clean the whole array.
        // we want to store the newly generated file list
        {
                    fileArray.pop();
        }

        for (i = 0; i < fileList.length; i++)
        {
            fileArray[fileArray.length] = fileList[i].childNodes[0].nodeValue;
        }
    }
} 

Moreover, you will need to write a little PHP script to check your custom directory for files newer than a given date, that could be sent in the request by the way, and send an XML response back, like this:

<?php

(...) // check dir. output $files contain the xml nodes for the files to send

      // mockup below


  // Get our XML. You can declare it here or even load a file.
  $xml_builder = '<?xml version="1.0" encoding="utf-8"?>';

  $xml_builder .= $files;

  // We send XML via CURL using POST with a http header of text/xml.
  $ch = curl_init('http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']);
  curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: text/xml'));
  curl_setopt($ch, CURLOPT_HEADER, 0);
  curl_setopt($ch, CURLOPT_POST, 1);
  curl_setopt($ch, CURLOPT_POSTFIELDS, $xml_builder);
  curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 0);
  curl_setopt($ch, CURLOPT_REFERER, 'http://www.hello..co.uk');
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  $ch_result = curl_exec($ch);
  curl_close($ch);

  /*
  echo $ch_result;
  */
?>

Here are some mockup functions to check the directory and build the XML response:

<?php

function analizeDir($dir)
{
    if (is_dir($dir))
    {
        $dir_resource = opendir($dir);
        while (false !== ($res = readdir($dir_resource)))
        {
            if ($res != "." && $res != ".." && $res != "old")
            {
                if (is_dir($dir . "\\" . $res)) // this is a subforder
                {
                    analizeDir($dir . "\\" . $res);

                } else { // this is a file

                    checkFile($dir . "\\" . $res);
                }
            }
        }
    }
}

function checkFile($file)
{
    $today = date("Y-m-d H:i:s");

    // if the difference in days between today
    // and the date of the file is more than 10 days,
    // print it in the response

    if (date_diff(datemtime($file), $today) > 10)
    {
         $files .= "<filesChanged>" . $file . "</filesChanged>";
    }
}

?>