All Blog Posts  |  Next Post  |  Previous Post

Free component to handle ZIP files in a TMS WEB Core application


Wednesday, August 5, 2020

Yesterday we introduced TWebQRCode as a free component to be used with TMS WEB Core. If you would like to work with ZIP files in a web application then we have good news for you! We created another free component: TWebZip.

TWebZip is a wrapper around the open source JSZip library. JSZip makes it possible to create, read, modify and download ZIP files directly in a client application. For limitations of the library please check the Limitations page.

Features of TWebZip

The supported data types are: string, base64 encoded string (via a parameter setting), TJSArrayBuffer and TBytes.

Drop the non-visual TWebZip component onto the form and you have an empty ZIP file already! You can also open a ZIP file, for example through a TWebFilePicker:
procedure TForm1.WebFilePicker1Change(Sender: TObject);
  if WebFilePicker1.Files.Count > 0 then

procedure TForm1.WebFilePicker1GetFileAsArrayBuffer(Sender: TObject; AFileIndex: Integer; ABuffer: TJSArrayBufferRecord);

procedure TForm1.WebZip1ZipLoaded(Sender: TObject);
  //This is the implementation of the OnZipLoaded event:
  //here we know that the ZIP was successfully opened
  //and we can proceed with related calculations/tasks
To add files to the ZIP, use the Add method. The first parameter is the filename with extension and the second parameter is the data to be added to the file. Keep in mind that if your ZIP already contains a file with a given name then it will override the content.
WebZip1.Add('subfolder/sub.txt', 'I''m in a subfolder!'); //Add sub.txt in the 'subfolder' folder
WebZip1.Add('hello.txt', 'Hello World'); //Adds hello.txt to the ZIP and sets the content to 'Hello World'
WebZip1.Add('hello.txt', 'Hello ZIP'); //Overrides the content of hello.txt
To read the content of a file, use the ReadAsString, ReadAsArrayBuffer or ReadAsBytes method based on which data type you need for further processing. These methods are asynchronous. The first parameter is the filename you want to read and the second is the anonymous method for processing the data.
WebZip1.ReadAsString('hello.txt', procedure(AFileName, AData: string)
  //process AData here
To remove files, use the Remove(FileName) or RemoveAll methods.
WebZip1.Remove('hello.txt'); //removes hello.txt from ZIP
WebZip1.RemoveAll; //removes all of the files from the ZIP
Download the ZIP you created or modified with different compression levels. More information on these levels can be found here.
WebZip1.Download('', zcStore); //no compression
WebZip1.Download('', zcDeflateLevel1); //best speed
WebZip1.Download('', zcDeflateLevel9); //best compression
Follow your download progress by implementing the OnProgress event:
procedure TForm1.WebZip1Progress(Sender: TObject; APercent: Single; ACurrentFile: string);
  WebProgressBar1.Position := Round(APercent);
There are also extra properties for: file count (TWebZip.FileCount), file names (TWebZip.FileName, TWebZip.FileNames) and file comments (TWebZip.FileComment).

If you would like to see how TWebZip works in practice, then head over to our demo where you can upload images (JPEG or ZIP containing JPEGs) and download their grayscale version in a ZIP file. As we mentioned at the beginning of this article, TWebZip is available for free through our TMS WEB Core Partner program and you can download it from here.

To install, open, compile & install the package from the "Component Library Source" folder. This will install the design-time TWebZip component.
For use at runtime, make sure that the "Core Source" folder is in your TMS WEB Core specific library path that you can set via IDE Tools, Options, TMS Web, Library path.

Tunde Keller


This blog post has received 5 comments.

1. Monday, August 10, 2020 at 7:17:21 PM

Fantastic!!! I needed this!!

Price Rhett

2. Wednesday, February 17, 2021 at 2:56:39 PM

My English is very bad.
How install this jszip.js in Delphi 10.3 ??

den Braber J

3. Wednesday, February 17, 2021 at 3:57:14 PM

I have not TMSWEBCorePkgLibDXE13
I have TMSWEBCorePkgLibDXE12

What to do?


den Braber J

4. Wednesday, February 17, 2021 at 9:26:16 PM

Replace the dependency in JSZip.dproj to the version of TMSWEBCorePkgLibDX** that you are using.

Bruno Fierens

5. Thursday, February 18, 2021 at 9:36:19 AM

It works now.

den Braber J

Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.

All Blog Posts  |  Next Post  |  Previous Post