Seite 1 von 1

Native File System API

Verfasst: 24.10.2019 16:01
von Kiffi
ollɐH,

seit Version 78 bietet Google Chrome ein Native File System API an, mit dem es möglich ist, Dateien auf dem Gerät des Benutzers zu lesen und zu speichern.

Siehe auch: https://web.dev/native-file-system/

Hier eine einfache Demo in Form eines simplen Text-Editors. Die Besonderheit ist, dass man Dateien laden, verändern und speichern kann:

Code: Alles auswählen

EnableExplicit

Define myToken.s = "[YourToken]"

Define MetaTag.s = ~"<meta http-equiv=\"origin-trial\" content=\"" + myToken + ~"\">"

! $("head").append(v_metatag);

Global FileHandle

Enumeration
  #Window
  #LoadButton
  #SaveButton
  #SaveAsButton
  #Editor
EndEnumeration

Procedure WriteFile(e, t.s)
  ! (async() => {
  !   // Create a writer (request permission if necessary).
  !   const i = await v_e.createWriter();
  !   // Make sure we start with an empty file
  !   await i.truncate(0),
  !   // Write the full length of the contents
  !   await i.write(0, v_t),
  !   // Close the file and write the contents to disk
  !   await i.close()
  ! })();  
EndProcedure

Procedure LoadButtonEvent()
  
  Protected FileContent.s
  
  ! (async() => {
  
  !   const opts = {
  !     type: 'openFile',
  !     accepts: [{
  !       description: 'Text file',
  !       extensions: ['txt'],
  !       mimeTypes: ['text/plain'],
  !     }],
  !   };  
  
  !   v_filehandle  = await window.chooseFileSystemEntries(opts);
  !   var file      = await v_filehandle.getFile();
  !   v_filecontent = await file.text();
  
  SetGadgetText(#Editor, FileContent)
  SetActiveGadget(#Editor)
  
  ! })();
  
EndProcedure

Procedure SaveAsButtonEvent()
  
  Protected FileContent.s = GetGadgetText(#Editor)
  
  ! (async() => {
  !   const opts = {
  !     type: 'saveFile',
  !     accepts: [{
  !       description: 'Text file',
  !       extensions: ['txt'],
  !       mimeTypes: ['text/plain'],
  !     }],
  !   };
  
  !   v_filehandle = await window.chooseFileSystemEntries(opts);
  
  !   if (typeof v_filehandle != "undefined") {
  WriteFile(FileHandle, FileContent)
  !   }
  
  ! })();  
  
EndProcedure

Procedure SaveButtonEvent()
  
  ! if (typeof v_filehandle === "undefined") {
  SaveAsButtonEvent()
  ProcedureReturn
  ! }
  
  Protected FileContent.s = GetGadgetText(#Editor)
  
  ! (async() => {
  WriteFile(FileHandle, FileContent)
  ! })();  
  
EndProcedure

Procedure AddClickEventListener(Gadget, Callback)
  Protected GID = GadgetID(Gadget)
  ! v_gid.div.addEventListener('click', async (e) => { v_callback(e) });
EndProcedure

OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 800, 600, "Native FileSystem - Demo", #PB_Window_ScreenCentered)

ButtonGadget(#LoadButton,    10, 10, 80, 30, "Load")
ButtonGadget(#SaveButton,   100, 10, 80, 30, "Save")
ButtonGadget(#SaveAsButton, 190, 10, 80, 30, "Save as...")

EditorGadget(#Editor, 10, 50, WindowWidth(#Window) - 20, WindowHeight(#Window) - 60)

AddClickEventListener(#LoadButton,   @LoadButtonEvent())
AddClickEventListener(#SaveButton,   @SaveButtonEvent())
AddClickEventListener(#SaveAsButton, @SaveAsButtonEvent())
Grüße ... Peter

Re: Native File System API

Verfasst: 25.10.2019 09:07
von dige
Danke für den Tipp. Hab es mit Chrome Version 78.0.3904.70 getestet,
bekomme aber den Fehler:

Uncaught (in promise) TypeError: spider_GetGadgetText(...) is not a function
bei (async() => {

Code: Alles auswählen

v_filecontent=spider_GetGadgetText(4)
 (async() => {
f_writefile(v_filehandle,v_filecontent);
 })(); 
return 0;
}


Re: Native File System API

Verfasst: 25.10.2019 09:56
von Kiffi
dige hat geschrieben:bekomme aber den Fehler:
das ist seltsam...

Um erst einmal andere Fehler auszuschließen: Die Schritte, die ich hier beschrieben habe, hast Du durchgeführt?

Grüße ... Peter

Re: Native File System API

Verfasst: 25.10.2019 13:51
von dige
:oops:

Re: Native File System API

Verfasst: 25.10.2019 15:42
von Kiffi
dige hat geschrieben: :oops:
ich werte das mal als ein "hat geklappt".