fix picture upload example

Author: lovasoa

examples/official-site/examples/handle_picture_upload.sql

@@ -1,5 +1,16 @@
-select 'card' as component;
-select 'Your picture' as title;
+select 'shell' as component, 'SQLPage' as title, '/' as link;
 
-select 'debug' as component;
-select :my_file as file;
+select 'title' as component, 'SQLPage Upload Demo' as contents;
+
+select 'card' as component, 1 as columns;
+select 'Your picture' as title,
+    sqlpage.read_file_as_data_url(
+        sqlpage.uploaded_file_path('my_file')
+    ) as top_image;
+
+select 'debug' as component,
+    sqlpage.uploaded_file_path('my_file') as uploaded_file_path,
+    sqlpage.uploaded_file_mime_type('my_file') as uploaded_file_mime_type;
+
+select 'form' as component;
+select 'my_file' as name, 'file' as type, 'Picture' as label;

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -396,7 +396,7 @@ INSERT INTO uploaded_file(name, data) VALUES(:filename, sqlpage.uploaded_file_da
 ```
 ',
     json('[{"component":"form", "title": "Upload a picture", "validate": "Upload", "action": "examples/handle_picture_upload.sql"}, 
-    {"name": "my_file", "type": "file", "accept": "image/png, image/jpeg",  "label": "Picture", "description": "Upload a nice picture", "required": true}
+    {"name": "my_file", "type": "file", "accept": "image/png, image/jpeg",  "label": "Picture", "description": "Upload a small picture", "required": true}
     ]')),
     ('form', '
 ## Bulk data insertion