Wapp

Check-in [af9968656c]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Update the fileupload.tcl example so that uploaded images are shown in-line. This demonstrates how to use the TCL "binary encode" command to generate base64 from the raw image content and how to modify content-security-policy to allow "data:" sources for images.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: af9968656c9491fa88041b57e247791c5bc657e6310cc4be63e8ce9667c6e05a
User & Date: drh 2019-03-06 17:44:20.465
Context
2019-03-06
19:43
Update the documentation on wapp-subst to acknowledge that command substitution does occur outside of quoted regions. (check-in: 72cf27176a user: drh tags: trunk)
19:32
Alternative implementation of wapp-subst that does not allow command substitution within unquoted sections. (Leaf check-in: 627a5a8bbc user: drh tags: new-subst-algorithm)
17:44
Update the fileupload.tcl example so that uploaded images are shown in-line. This demonstrates how to use the TCL "binary encode" command to generate base64 from the raw image content and how to modify content-security-policy to allow "data:" sources for images. (check-in: af9968656c user: drh tags: trunk)
2019-03-04
19:18
Fix the multipart/form-data parser so that it can accept none-file uploads. Add the "fileupload.tcl" example. (check-in: cfa2467c17 user: drh tags: trunk)
Changes
Unified Diff Ignore Whitespace Patch
Changes to examples/fileupload.tcl. 
1
2
3
4
5
6
7

8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

#!/usr/bin/wapptclsh
#
# This script demonstrates a Wapp application that can accept a file
# upload using <input type="file">
#
package require wapp
proc common-header {} {

  wapp-trim {
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="%url([wapp-param SCRIPT_NAME]/style.css)" rel="stylesheet">
    <title>Wapp File-Upload Demo</title>
    </head>
    <body>
  }
}
proc common-footer {} {
  wapp-trim {
    </body>
    </html>
  }
}
proc wapp-default {} {
  wapp-cache-control max-age=3600
  common-header
  wapp-trim {
    <h1>Wapp File-Upload Demo</h1>
  }
  # NB:  You must set enctype="multipart/form-data" on your <form> in order
  # for file upload to work.
  wapp-trim {
    <p><form method="POST" enctype="multipart/form-data">
    File To Upload: <input type="file" name="file"><br>







|
>





<



<
<
<
<
<
<
<
<
<
<
<
<








1
2
3
4
5
6
7
8
9
10
11
12
13

14
15
16












17
18
19
20
21
22
23

#!/usr/bin/wapptclsh
#
# This script demonstrates a Wapp application that can accept a file
# upload using <input type="file">
#
package require wapp
proc wapp-default {} {
  wapp-content-security-policy {default-src 'self'; img-src 'self' data:}
  wapp-trim {
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <title>Wapp File-Upload Demo</title>
    </head>
    <body>












    <h1>Wapp File-Upload Demo</h1>
  }
  # NB:  You must set enctype="multipart/form-data" on your <form> in order
  # for file upload to work.
  wapp-trim {
    <p><form method="POST" enctype="multipart/form-data">
    File To Upload: <input type="file" name="file"><br>
︙︙
50
51
52
53
54
55
56








57








58
59
60
61
62
63
64
65
66
67
68
69
70
71

72
73
74
75

  set filename [wapp-param file.filename {}]
  set content [wapp-param file.content {}]
  if {$filename!=""} {
    wapp-trim {
      <h1>Uploaded File Content</h1>
      <p>Filename: %html($filename)<br>
      MIME-Type: %html($mimetype)<br>








      Content:</p>








      <blockquote><pre>
      %html($content)
      </pre></blockquote>
    }
  }
  common-footer
}
proc wapp-page-style.css {} {
  wapp-mimetype text/css
  wapp-cache-control max-age=3600
  wapp-trim {
    pre {
       border: 1px solid black;
       padding: 1ex;

    }
  }
}
wapp-start $argv








>
>
>
>
>
>
>
>
|
>
>
>
>
>
>
>
>
|
|
|
|
|
<
|
<
<
<

<
|
<
>
|
|
<


38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

67



68

69

70
71
72

73

  set filename [wapp-param file.filename {}]
  set content [wapp-param file.content {}]
  if {$filename!=""} {
    wapp-trim {
      <h1>Uploaded File Content</h1>
      <p>Filename: %html($filename)<br>
      MIME-Type: %html($mimetype)<br>
    }
    if {[string match image/* $mimetype]} {
      # If the mimetype is an image, display the image using an
      # in-line <img> mark.  Note that the content-security-policy
      # must be changed to allow "data:" for type img-src in order
      # for this to work.
      set b64 [binary encode base64 $content]
      wapp-trim {
        Content:</p>
        <blockquote>
        <img src='data:%html($mimetype);base64,%html($b64)'>
        </blockquote>
      }
    } else {
      # Anything other than image, just show it as text.
      wapp-trim {
        Content:</p>
        <blockquote><pre>
        %html($content)
        </pre></blockquote>
      }
    }

  }



  wapp-trim {

    </body>

    </html>
  }
}

wapp-start $argv