Recent

Author Topic: Brook 5, Multi-File Upload  (Read 2409 times)

RedOctober

  • Sr. Member
  • ****
  • Posts: 450
Brook 5, Multi-File Upload
« on: October 18, 2021, 05:58:39 pm »
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][+][-]
  1. const
  2.   PAGE_FORM = Concat(
  3.     '<html>',
  4.     '<body>',
  5.     '<form action="" method="post" enctype="multipart/form-data">',
  6.     '<fieldset>',
  7.     '<legend>Choose the files:</legend>',
  8.     'File Folder: <input type="file" name="files[]" id="files" multiple="" directory="" webkitdirectory="" mozdirectory=""/><br>',
  9.     'Device: <input type="text" name="device1"/><br>',
  10.     '<input type="submit" value="Upload"/>',
  11.     '</fieldset>',
  12.     '</form>',
  13.     '</body>',
  14.     '</html>'
  15.   );                
  16.  

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][+][-]
  1.  
  2. procedure TfrmMainUpFiler.brk_svrRequest(ASender: TObject; ARequest: TBrookHTTPRequest; AResponse: TBrookHTTPResponse);
  3. var
  4.   VUpload: TBrookHTTPUpload;
  5.   VField: TBrookStringPair;
  6.   VFile, VFileList, VUsersList, VError: string;
  7. begin
  8.   if ARequest.IsUploading then
  9.     begin
  10.       VFileList := '<ol>';  // This variable is to build a list of links of the uploaded files.  
  11.                                    //  You can ignore all lines with VFileList and VUsersList.
  12.  
  13.       for VUpload in ARequest.Uploads do
  14.         begin
  15.           // I suspect there is a problem with VUpLoad.Field. In the original example, it contains "file1" and "file2" etc.
  16.           // But in my modified example, it always contains "file[]".
  17.  
  18.           if VUpload.Save(False, VError) then
  19.             VFileList := Concat(VFileList, '<li><a href="?file=', VUpload.Name, '">',
  20.               VUpload.Name, '</a></li>')
  21.           else
  22.             VFileList := Concat(VFileList, '<li><font color="red">', VUpload.Name,
  23.               ' - failed - ', VError, '</font></li>');
  24.         end;
  25.  
  26.       VFileList := Concat(VFileList, '</ol>');
  27.       VUsersList := '<ol>';
  28.       for VField in ARequest.Fields do
  29.         VUsersList := Concat(VUsersList, '<li>', VField.Value, '</li>');
  30.       VUsersList := Concat(VUsersList, '</ol>');
  31.       AResponse.SendFmt(PAGE_DONE, [VFileList, VUsersList], CONTENT_TYPE, 200);
  32.     end;
  33.   end;
  34.  
  35.  

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

  • Sr. Member
  • ****
  • Posts: 450
Re: Brook 5, Multi-File Upload
« Reply #1 on: October 19, 2021, 08:08:40 pm »
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][+][-]
  1. 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

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Brook 5, Multi-File Upload
« Reply #2 on: October 19, 2021, 10:40:30 pm »
Interesting, didn't know that mutiple file upload was possible from a browser with a single click. Nice to know.

 

TinyPortal © 2005-2018