[SOLVED] [HTTPServer] Show an image with fpweb
lazarus / 38-Networking and Web Programming

----------------------------------------------------------------------
Focus77 · 2019-05-29 19:57

Hi everybody!

I tried to show am image using the following codes but it failed:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><HTML>  <head>   
<title>MainPage</title>    <meta http-equiv="content-type"
content="text/html; charset=UTF-8">  </head>  <body>    <h1> MainPage
</h1>    Hello!          <IMG src="E:\web\Images\Pie.png" alt="Graphe"
width="600" height="400" hspace="20" vspace="40" /IMG > 
</body></html>   
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TFPWebModule1.MainPageRequest(Sender: TObject; ARequest: TRequest; 
AResponse: TResponse; var Handled: Boolean);begin 
AResponse.Contents.LoadFromFile('E:\web\index1.html'); 
Handled:=Trueend;

----------------------------------------------------------------------
lucamar · 2019-05-29 20:33

You need to reference an URL in the <img src="...">, not a file.

IIRC, there are functions on fcl-web to convert a file ref. to a
"file://..." URL and viceversa. Look in the help for it.

----------------------------------------------------------------------
Focus77 · 2019-05-30 03:42

Hi everybody

@Lucamar
thanks a lot for your reply.

Although i tried all possibilities, the image could not be opened   

But when I click on index.html the image is opened correctly.   

any explanations?

----------------------------------------------------------------------
lucamar · 2019-05-30 09:43

What is the URL you use to access index.html through the web module?

----------------------------------------------------------------------
john horst · 2019-05-30 17:09

1 ) Your image tag is wrong, you don't close it like that.

html4 = <img src="" />
html5 = <img src="">

2) I use python for this... pre-production. python3 -m http.server in
an assets folder.
3) Who cares about my way... See the section on serving static files.
http://wiki.lazarus.freepascal.org/fpWeb_Tutorial#Serving_Static_Files
_.28Embedded_Web_Server.29

----------------------------------------------------------------------
Focus77 · 2019-05-30 17:53

@lucamar

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
file:///E:/web/Images/Pie.png
but i don't think it is the cause!

@john horse

1 ) Your image tag is wrong, you don't close it like that.

html4 = <img src="" />
html5 = <img src="">

it is because the image is inserted with HTML EDITOR
any way even with this change the image will not open.

as for the wiki it is the one i used to learn fpweb and i managed to
list a table connected Firebird 4.0 Alpha

and the other examples as well, but this wiki didn't talk about the
images.

-I managed to open a image before using CGI/Apache like this.

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
Localhost/cgi-bin/ext.exe?webmodule=session&ActionVar1=page1

ActionVar:ActionVar1.

page1:action name.

but not with fpweb.

thanks a lot.

----------------------------------------------------------------------
lucamar · 2019-05-30 20:17

Try add your image just as this:
Code: [Select]<img src="Images/Pie.png" />
and see if the image appears. If it doesn't something is interfering
with the retrieval of the image, probably in your own web module.

Does the module has code to allow the retrieval of any document or
only index.html?

----------------------------------------------------------------------
Focus77 · 2019-05-30 20:34

hi there

It is not about the path because i tried all combination.

i said that i tried almost all the codes of fbweb wiki (edited by
Leledumbo)
without any problems.
the page index.html is also shown except the image wich is reduced to
icon. 

but if i click on the page is it  opened and the image is shown too!

----------------------------------------------------------------------
john horst · 2019-05-30 21:28

Once again RegisterFileLocation('myStaticFiles',
'C:\Path\to\folder\with\images'); Unit fpwebfile

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
webtest; {$MODE OBJFPC}{$H+} uses  {$ifdef unix}cthreads,
cmem,{$endif} Classes, httpdefs, fphttp, fpweb, fphttpapp,
fpwebfile; type  THelloWorldModule = class(TFPWebModule)   
constructor CreateNew(AOwner: TComponent; Crea]"]>Blockedde: Integer);
override;    procedure Request(Sender: TObject; ARequest: TRequest;  
  AResponse: TResponse; var Handled: Boolean);  end; constructor
THelloWorldModule.CreateNew(AOwner: TComponent; Crea]"]>Blockedde:
Integer);begin  inherited CreateNew(AOwner,Crea]"]>Blockedde);   
ActionVar := '';    Actions.Add;    (Actions[0] as TFPWebAction).Name
:= '';    (Actions[0] as TFPWebAction).Default := true;    (Actions[0]
as TFPWebAction).OnRequest := @Request;end; procedure
THelloWorldModule.Request(Sender: TObject; ARequest:
TRequest; AResponse: TResponse; var Handled: Boolean);var HTML :
String;begin   HTML := '<!DOCTYPE html>'+          '  <html>'+       
 '   <head>'+          '    <title>Hello World</title>'+          '  
</head>'+          '   <body>'+          '    <img
src="myStaticFiles/laz_logo.png">'+          '   </body>'+          '
 </html>';  AResponse.Content := HTML;  Handled := true;end; begin 
RegisterFileLocation('myStaticFiles','/home/john/myfiles/'); 
RegisterHTTPModule('', THelloWorldModule, true);  
Application.DefaultModuleName := '*';  Application.PreferModuleName :=
true;  Application.AllowDefaultModule := true;   Application.Port :=
8000;  Application.Threaded := true;  Application.Initialize; 
Application.Run;end.

----------------------------------------------------------------------
john horst · 2019-05-30 22:01

Normally you let NGINX or Apache serve static content. Maybe that's
why you could do it before without RegisterFileLocation(). Something
has to serve these files one way or another.

Like I said, I usually just open a simple server in python before
letting NGINX serve static files.

Make sure your handlers are in order as well. If you switch.

RegisterFileLocation('myStaticFiles','/home/john/myfiles/');
RegisterHTTPModule('', THelloWorldModule, true);

It will cause '' to serve myStaticFiles/ because it will answer ANY
request first.

----------------------------------------------------------------------
bylaardt · 2019-05-30 22:21

you can use src with base64 content, you don't need the actual
location of the file.

----------------------------------------------------------------------
Focus77 · 2019-05-30 22:24

@ john horst

Now the image is displayed   

i will seek for the mistakes i did

thanks a lot john

----------------------------------------------------------------------
Focus77 · 2019-06-01 02:42

Hi everybody

@bylaardt

you can use src with base64 content, you don't need the actual
location of the file.

how to apply this?

@john horst

Although the image is displayed, i think it should existe better
method more

practical because in this one i could't add another Action[1],
Action[2]..

it's why i try to display it in a separete module.

is it possible?



thanks.



ps.i'm really convinced that 'images display' deserve more: topics,
uploads.

----------------------------------------------------------------------
sash · 2019-06-01 09:04

Quote from: Focus77 on June 01, 2019, 04:42:10 ami'm really convinced
that 'images display' deserve more: topics, uploads.
In fact web programming (no matter if this Pascal or other
framework/language) deserves better knowledge of underlying protocol
stack like html and http.

----------------------------------------------------------------------
bylaardt · 2019-06-02 15:06

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i function
File2Base64(const FileName: TFilename): String;var  FileStream:
TFileStream;  Str: String;begin  Result := '';  if
FileExists(FileName) then begin    FileStream :=
TFileStream.Create(FileName,fmOpenRead);    if FileStream.Size > 0
then      begin        SetLength(Str, FileStream.Size div
SizeOf(Char));        FileStream.ReadBuffer(Str[1], FileStream.Size
div SizeOf(Char));        Result := EncodeStringBase64(Str);     
end;    FileStream.Free;  end;end; procedure
THelloWorldModule.Request(Sender: TObject; ARequest:
TRequest; AResponse: TResponse; var Handled: Boolean);  Const 
MyImagePathAndName='~/images/avatar.png';begin  AResponse.Content := 
     '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">'#10+    '<HTML>'#10+    '
 <head>'#10+    '    <title>MainPage</title>'#10+    '    <meta http-
equiv="content-type" content="text/html; charset=UTF-8">'#10+    '
 </head>'#10+    '  <body>'#10+    '    <h1> MainPage </h1>'#10+    '
  Hello!'#10+    '          <IMG
src="data:image/png;base64,'+File2Base64(MyImagePathAndName)+'"
alt="Graphe" width="600" height="400" hspace="20" vspace="40" /IMG
>'+    '  </body>'#10+    '</html>';end;  I prefer the base64 image
when I need better compatibility in applications with web viewer
components.

----------------------------------------------------------------------
Focus77 · 2019-06-02 18:30

hi
thanks bylaardt for you reply

but at execution the following message occurs.

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i The
application encountered the following error:Error: Error reading
DMW.Actions: Error reading TFPWebAction.OnRequest: Invalid value for
propertyStack trace:$00422D94$0042241B$0041D5AB$0047C504
INITCOMPONENT, line 3156 of lresources.pp$0047C369
INITLAZRESOURCECOMPONENT, line 3183 of lresources.pp$0047B968
INITRESOURCECOMPONENT, line 804 of lresources.pp$0041FF79$00512B4B$005
129C2$0051314E$00511E1C$00516267$00515C9A$00516132$00514253$0051623E$0
0402CE7 main, line 14 of hp.lpr

----------------------------------------------------------------------
john horst · 2019-06-02 21:09

Base64 is only going to increase size and you should gzip if going
that route.

Here is a sample. Also if you are using a trunk compiler, you  need to
Add Legacy True in the Main block.

Notice how I add the image source in the HTML for hello world ../ vs
none in Index. Index is at the root 'localhost/' already,
localhost/helloworld/uno is not, therefore your image is trying to be
served from /localhost/helloworld/*/myStaticFiles.

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
webtestdos; {$MODE OBJFPC}{$H+}{$J-} uses  {$ifdef unix}cthreads,
cmem,{$endif} Classes, HTTPDefs, fpHTTP, fpWeb, fpHTTPApp,
fpwebfile; type  // Index  TIndexModule = class(TFPWebModule)   
constructor CreateNew(AOwner: TComponent; Crea]"]>Blockedde: integer);
override;    procedure IndexModuleReq(Sender: TObject; ARequest:
TRequest;                             AResponse: TResponse; var
Handled: boolean);  end;   // Another  THelloWorldModule =
class(TFPWebModule)    constructor CreateNew(AOwner: TComponent;
Crea]"]>Blockedde: integer); override;    procedure ReqUno(Sender:
TObject; ARequest: TRequest;                              AResponse:
TResponse; var Handled: boolean);    procedure ReqDos(Sender: TObject;
ARequest: TRequest;                              AResponse: TResponse;
var Handled: boolean);  end;   constructor
TIndexModule.CreateNew(AOwner: TComponent; Crea]"]>Blockedde:
integer);  begin    inherited CreateNew(AOwner, Crea]"]>Blockedde);  
OnRequest := @IndexModuleReq;    DefActionWhenUnknown := true;  end;  
// Index  procedure TIndexModule.IndexModuleReq(Sender: TObject;
ARequest: TRequest; AResponse: TResponse; var Handled: Boolean);     
 var    HTML : String;  begin    HTML := '<!DOCTYPE html>'+          '
 <html>'+          '   <head>'+          '    <title>Hello
World</title>'+          '   </head>'+          '   <body>'+         
'    <img src="myStaticFiles/file1.png">'+          '   </body>'+    
    '  </html>';    AResponse.Content := HTML;    Handled := true; 
end;   constructor THelloWorldModule.CreateNew(AOwner: TComponent;
Crea]"]>Blockedde: integer);  begin    inherited CreateNew(AOwner,
Crea]"]>Blockedde);    ActionVar := 'action'; // Do whatever with
-->     Actions.Add;    (Actions[0] as TFPWebAction).Name := 'uno';  
(Actions[0] as TFPWebAction).Default := true; // <--    (Actions[0] as
TFPWebAction).OnRequest := @ReqUno;     Actions.Add;    (Actions[1] as
TFPWebAction).Name := '*';    (Actions[1] as TFPWebAction).OnRequest
:= @ReqDos;  end;   // Hello 1  procedure
THelloWorldModule.ReqUno(Sender: TObject; ARequest: TRequest;        
                             AResponse: TResponse; var Handled:
Boolean);        var    HTML : String;  begin    HTML := '<!DOCTYPE
html>'+          '  <html>'+          '   <head>'+          '  
 <title>Hello World</title>'+          '   </head>'+          '  
<body>'+          '    <img src="../myStaticFiles/file2.png">'+      
  '   </body>'+          '  </html>';    AResponse.Content := HTML;  
Handled := true;  end;   // Hello 2  procedure
THelloWorldModule.ReqDos(Sender: TObject; ARequest: TRequest;        
                             AResponse: TResponse; var Handled:
Boolean);        var    HTML : String;  begin    HTML := '<!DOCTYPE
html>'+          '  <html>'+          '   <head>'+          '  
 <title>Hello World</title>'+          '   </head>'+          '  
<body>'+          '    <img src="../myStaticFiles/file3.png">'+      
  '   </body>'+          '  </html>';    AResponse.Content := HTML;  
Handled := true;  end;   begin   
RegisterFileLocation('myStaticFiles','/home/john/myfiles/');   
RegisterHTTPModule('helloworld', THelloWorldModule, true);   
RegisterHTTPModule('', TIndexModule, true);     Application.Title :=
'helloworld';    Application.PreferModuleName := true;   
Application.AllowDefaultModule := true;     Application.Port := 8000; 
  Application.Threaded := true;    Application.Initialize;   
Application.Run;  end.

----------------------------------------------------------------------
bylaardt · 2019-06-02 23:17

Quote from: john horst on June 02, 2019, 11:09:04 pmBase64 is only
going to increase size and you should gzip if going that route.
I agree, but sometimes I can't make the image available through an
external link.
sometimes I also need to dynamically generate images as graphics and
it doesn't make sense to keep multiple images dynamically created.
the base64 solution isn't the best option when the image is static and
there are no security issues to access it without encryption.

@Focus77
i forgot
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
handled:=true;maybe other things too, but the general idea is this.
john horst has a good solution case your image is not dynamically
generated.

----------------------------------------------------------------------
Focus77 · 2019-06-03 17:10

hi everyone

finally i succeed to display a lot of images with the methode of
bylaardt  after adding:

1.Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i  base64 to
use
2.Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i begin 
Application.Title:='httpproject1';  Application.Port:=8080; 
Application.Initialize;  Application.LegacyRouting:=True; // line to
add  Application.Run;end.          
3.Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i   '
 <body>'#10+    '    <h1> MainPage </h1>'#10+    '    Hello!'#10+    '
         <IMG
src="data:image/png;base64,'+File2Base64(MyImagePathAndName1)+'"
alt="Graphe" width="600" height="400" hspace="20" vspace="40" /IMG
>'+    '          <IMG
src="data:image/png;base64,'+File2Base64(MyImagePathAndName2)+'"
alt="Graphe" width="600" height="400" hspace="20" vspace="40" /IMG
>'+    '          <IMG
src="data:image/png;base64,'+File2Base64(MyImagePathAndName3)+'"
alt="Graphe" width="600" height="400" hspace="20" vspace="40" /IMG
>'+    '  </body>'#10+  4.by default httpproject1.exe is sorted in
/lib/i386-win32 must be open to see images with:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
localhost:8080/img.

you should set this upload at "C:/"root if you want to see the demo.

thanks a lot bylaardt, john horst for you help.