Brook 5, Multi-File Upload
lazarus / 38-Networking and Web Programming

----------------------------------------------------------------------
RedOctober · 2021-10-18 15:58

Platform:  

   Lazarus 2.0.10, FPC 3.2, Windows Server 2016, Brook 5 Framework
5.5.0.0

Goal:

In a medical clinic setting, we have Medical Office Assistants (MOA)
taking photos of patient wounds.  They usually take about 6 photos
using a tablet that is connected to our server via secure WiFi.  I
want the MOAs to be able to use the browser on their tablet, to
connect to a Brook 5F based web app running on our server, and upload
all the photo files using a single button to select the folder on the
tablet where the photos are stored, then click a "Upload"
(type=submit) button.  I don't want the MOAs to have to use a "Select
File" button for each individual photo they want to upload.

What I have done so far:

The Brook 5 Framework comes with a file upload example.  The browser
page includes two buttons to select two files.  I am trying to modify
the example to upload multiple files.  I am posting here, in the hopes
that someone can point out a simple, well-known FPC tweak in my code
that wd make this possible, as opposed to me having to get a Brook 5F
specialist (which are rare) to do a deep dive into modifying the Brook
component. 

Problem:  My mods don't work.  No files are uploaded.

I modified the example page, so that the "select file" button selects
a directory, instead of a single file, 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 const 
PAGE_FORM = Concat(    '<html>',    '<body>',    '<form action=""
method="post" enctype="multipart/form-data">',    '<fieldset>',   
'<legend>Choose the files:</legend>',    'File Folder: <input
type="file" name="files[]" id="files" multiple="" directory=""
webkitdirectory="" mozdirectory=""/><br>',    'Device: <input
type="text" name="device1"/><br>',    '<input type="submit"
value="Upload"/>',    '</fieldset>',    '</form>',    '</body>',   
'</html>'  );               
The above page works.

Here is the code that processes the incoming files, when the user
clicks "Submit": (See the comment line)

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
TfrmMainUpFiler.brk_svrRequest(ASender: TObject; ARequest:
TBrookHTTPRequest; AResponse: TBrookHTTPResponse);var  VUpload:
TBrookHTTPUpload;  VField: TBrookStringPair;  VFile, VFileList,
VUsersList, VError: string;begin  if ARequest.IsUploading then   
begin      VFileList := '<ol>';  // This variable is to build a list
of links of the uploaded files.                                     //
 You can ignore all lines with VFileList and VUsersList.       for
VUpload in ARequest.Uploads do        begin          // I suspect
there is a problem with VUpLoad.Field. In the original example, it
contains "file1" and "file2" etc.          // But in my modified
example, it always contains "file[]".           if VUpload.Save(False,
VError) then            VFileList := Concat(VFileList, '<li><a
href="?file=', VUpload.Name, '">',              VUpload.Name,
'</a></li>')          else            VFileList := Concat(VFileList,
'<li><font color="red">', VUpload.Name,              ' - failed - ',
VError, '</font></li>');        end;       VFileList :=
Concat(VFileList, '</ol>');      VUsersList := '<ol>';      for VField
in ARequest.Fields do        VUsersList := Concat(VUsersList, '<li>',
VField.Value, '</li>');      VUsersList := Concat(VUsersList,
'</ol>');      AResponse.SendFmt(PAGE_DONE, [VFileList, VUsersList],
CONTENT_TYPE, 200);    end;  end;  
My example does not copy any files to the destination folder.

For your convenience I have included the pertinent unit as an
attachment.

Thank you for any help you can provide.  I will submit more info if
needed.

----------------------------------------------------------------------
RedOctober · 2021-10-19 18:08

Problem solved.   My code was overwriting the same file 11 times.


The solution turned out to be very simple.  I just had to replace the
function shown as:
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 if
VUpload.Save(False, VError) then(Line 18 in the second code window in
the question)
with the function:
VUpload.SaveAs(...)
Then just give each iteration a different file name.  I just used i:
Integer, and called them 'file' + IntToStr(i)
My multi-file uploader works now.  I hope this helps anyone using
Brook.  I will post in the Brook Telegram group as well.

----------------------------------------------------------------------
lainz · 2021-10-19 20:40

Interesting, didn't know that mutiple file upload was possible from a
browser with a single click. Nice to know.