Multiple File Upload

[Fatih_Dagdeviren]

Greetings,

I want to upload multiple files, e.g. images, to a server.

Using the following example, I can send a single image without any problem: File Upload and capture response - #6 by wlandgraf

However, when adjusting the code to be able to send multiple files at once, I run into a problem:

for i := 0 to BtnAddMedia.Files.Count - 1 do
begin
        asm
          formData = new FormData();
          formData.append('fileUpload', document.getElementById('BtnAddMedia').files[i]);
        end;

        xhr := TJSXMLHttpRequest.new;
        xhr.open('POST', GetFileUploadAddr);
        xhr.addEventListener('loadend', @_final);
        xhr.send(formData);
end;

This way, the files are being sent to the server one by one, where they are being processed. After this process, the server returns a value according to the file which was sent by the client.

Lets say the '@_final' procedure displays the return value in a memo.

Assuming that the user sends 3 images; in the browser console, 3 requests show up. All of these 3 requests show the right return value. However, the memo shows 3 times the same return value of the first image that was being processed, which is obviously not what I want.

If there is no easier way than this, how can I adjust this code block in such a way that the memo shows the right values?

As a side note, the Web unit in the Component Library Source folder, where the class TJSXMLHttpRequest is declared, contains a weird value. On line 2136, the constant value HEADERS_RECEIVED equals 3 there. But in the Core Source unit, this value equals 2.

Kind regards.

[brunofierens]

You are effectively doing 3 HTTP requests here.
If you want to put 3 images in the form data and send one request, it would be rather something like:

for i := 0 to BtnAddMedia.Files.Count - 1 do
begin
        asm
          formData = new FormData();
          formData.append('fileUpload', document.getElementById('BtnAddMedia').files[i]);
        end;
end;

    xhr := TJSXMLHttpRequest.new;
    xhr.open('POST', GetFileUploadAddr);
    xhr.addEventListener('loadend', @_final);
    xhr.send(formData);

We fixed the HEADERS_RECEIVED in Component Library Source\web.pas