Check if file has changed using HTML5 File API

后端 未结 3 1998
生来不讨喜
生来不讨喜 2020-11-30 03:46

Okay, so I have a program which outputs some specific data to a tab separated variable file.

I had been using Excel to open and view the file contents, however I fou

3条回答
  •  天命终不由人
    2020-11-30 04:09

    There is two solutions to this problem, and is not one of them. according to the spec, it creates a "snapshot" of the file.


    Native File System

    This api is experimental and requires flags to be enabled in blink (aka chromium browsers). The idea is that you get a file handle and when you need the file then you call the async "getFile" function to retrieve the actual file.

    this feature is a "power feature" and require your site to be secure, and it can't work in sandboxed iframes

    So without testing here is some "code in the dark":

    // triggerd on click
    async function pickFile () {
      // const handle = showOpenFilePicker() // chrome 85
      const handle = await chooseFileSystemEntries() // deprecated (split up to 3 fns)
        let lastModificationTime = new Date(0)
      
      async function compare (meta) {
        const file = await handle.getFile()
        if (file.lastModifiedDate > lastModificationTime) {
          lastModificationTime = file.lastModifiedDate
          console.log(await file.text())
        }
      }
      
      setInterval(compare, 1000)
    }
    

    Get Entry from Drag and drop

    Similar to the native file system you can also retrieve a file handle and do the same thing, but this feature works in browsers today. but this code snippet don't work in stackoverflow since it use some sandboxing do making it inkompatible, so here is a fiddle with few comments

    function drop(event) {
      event.stopPropagation();
      event.preventDefault();
        
      // get the file as an fileEntry (aka file handle)
      const fileEntry = event.dataTransfer.items[0].webkitGetAsEntry()
      let lastModificationTime = new Date(0)
      
      async function read (file) {
        // use the new async read method on blobs.
        console.log(await file.text())
      }
      
      function compare (meta) {
        if (meta.modificationTime > lastModificationTime) {
          lastModificationTime = meta.modificationTime
          fileEntry.file(read)
        }
      }
      
      setInterval(fileEntry.getMetadata.bind(fileEntry, compare), 1000)
    }
    

提交回复
热议问题