Forum > Pas2JS

Load and Save file

<< < (2/4) > >>

lainz:
I don't have any links for Pas2JS. Really I don't like Pas2JS I prefer typescript or plain JS... So I don't have an example on that.

lainz:
But if you want to try it (as I did before getting that it was not for me) here is a small demo game you can try
https://github.com/lainz/AllegroPas2JS-Demo-Game

https://github.com/lainz/AllegroPas2JS-Demo-Game/blob/master/game.lpr

Edit: here is the game published
https://lainz.github.io/AllegroPas2JS-Demo-Game/index.html

Leledumbo:

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---uses  Web; var  GInput: TJSHTMLInputElement;  GOutput: TJSHTMLDivElement;  LFile: TJSHTMLFile;  LReader: TJSFileReader;  LFileContent: String;begin  GInput := TJSHTMLInputElement(Document.GetElementByID('input'));  GOutput := TJSHTMLDivElement(Document.GetElementByID('output'));   GInput.OnChange := function (AFileInputChangeEvent: TEventListenerEvent): Boolean  begin    LFile := GInput.Files[0];     LReader := TJSFileReader.New;    LReader.OnLoad := function (AFileLoadEvent: TEventListenerEvent): Boolean    begin      LFileContent := String(TJSFileReader(AFileLoadEvent.Target).Result);      // begin edit      LFileContent := '<pre>' + LFileContent + '</pre>';      // end edit      GOutput.InnerHTML := LFileContent;    end;    LReader.ReadAsText(LFile);  end;end. 
--- Code: HTML5  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---<!DOCTYPE html><html>  <head id="head">    <meta charset="utf-8"/>    <title>Read file input</title>     <script type="application/javascript" src="demoreadfileinput.js"></script>  </head>  <body>    <input type="file" id="input">    <div id="output"></div>     <script type="application/javascript">      rtl.run();    </script>  </body></html> You cannot save, it's the client side (browser), there's no write access to filesystems. To make it downloadable, however, is still possible. The trick lainz showed above can be done, see TJSURL and TJSBlob from weborworker unit, basically copying what's inside that link.

Okoba:
Thank you! This is half of what I wanted and great start. For past two hours I am trying to make download work, but I can not find any sample of how blob works, and there are missing attributes and other issues.

Leledumbo:

--- Quote from: Okoba on August 27, 2023, 12:18:09 pm ---Thank you! This is half of what I wanted and great start. For past two hours I am trying to make download work, but I can not find any sample of how blob works, and there are missing attributes and other issues.

--- End quote ---
You're right, the TJSHTMLFile / TJSBlob is missing a constructor that accepts the content. I can make the download, but the file remains as is, no modification possible. Perhaps this is worth reporting as missing features. After all, reading the Web API standards, indeed web(orworker) unit is missing quite a lot. Even HTMLParagraphElement is missing.

For reference, here's the download after upload version:

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---uses  Web; var  GInput: TJSHTMLInputElement;  Goutput: TJSHTMLAnchorElement;  LReader: TJSFileReader;  LFile: TJSHTMLFile;  LFileContent: String;begin  GInput := TJSHTMLInputElement(Document.GetElementByID('input'));  Goutput := TJSHTMLAnchorElement(Document.GetElementByID('output'));   GInput.OnChange := function (AFileInputChangeEvent: TEventListenerEvent): Boolean  begin    LFile := GInput.Files[0];     LReader := TJSFileReader.New;    LReader.OnLoad := function (AFileLoadEvent: TEventListenerEvent): Boolean    begin      LFileContent := String(TJSFileReader(AFileLoadEvent.Target).Result);      // begin edit      LFileContent := '<pre>' + LFileContent + '</pre>';      // end edit       // need a way to assign back modified LFileContent to LFile or create a new TJS(HTMLFile|Blob) with LFileContent as its content      // the Web API standard provides the way as a constructor parameter, but is missing from the declaration       Goutput.HRef := TJSURL.createObjectURL(LFile);      Goutput.Download := 'result.txt';      Goutput.Click;      TJSURL.revokeObjectURL(Goutput.HRef);    end;    LReader.ReadAsText(LFile);  end;end. 
--- Code: HTML5  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---<!DOCTYPE html><html>  <head id="head">    <meta charset="utf-8"/>    <title>Read file input</title>     <script type="application/javascript" src="demoreadfileinput.js"></script>  </head>  <body>    <input type="file" id="input">    <a id="output" style="visibility:none"></div>     <script type="application/javascript">      rtl.run();    </script>  </body></html> 

Navigation

[0] Message Index

[#] Next page

[*] Previous page

Go to full version