Compress videos when using TUnimFileUploadButton

[likemike]

Hello!

My app uses the TUnimFileUploadButton to upload videos to the server. The problem is, that videos use a lot of resources from the available data volume of a mobile phone contract and the upload is very time consuming. There are some external software (f.ex. ffmpeg) which can compress videos to nearly 25%, but I can only use them, if the video file is already on the server - so that's too late.

What I need is a possibility to compress the Files[0].Stream before it's uploaded to the server.

Thanks in advance

Mike

[Oliver Morsch]

Compressing a video means convert to a lower resolution? Since videos in normal case are so compressed that using ZIP etc. will not do a good job.

Maybe this project can:

https://github.com/ffmpegwasm/ffmpeg.wasm

[likemike]

Hello!

Yes, I mean lower resolution, lower framerate, lower size. And I used ffmpeg to do this. The problem is, that I need to compress the video files before they are uploaded to save time and data volume.

[Oliver Morsch]

With HTML5 you can get the data before uploading and you can convert with the above project...

[likemike]

That would be fine. But I don't know how to get the data with HTML5.

[Oliver Morsch]

With help from Copilot AI:

<input type="file" id="fileInput" />

 

document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0]; // Datei auswählen
  if (file) {
    const reader = new FileReader();
    reader.onload = function(e) {
      const arrayBuffer = e.target.result; // ArrayBuffer mit den Binärdaten
      const byteArray = new Uint8Array(arrayBuffer); // Uint8Array erstellen, um die Binärdaten zu verarbeiten
      console.log(byteArray); // Binärdaten in der Konsole anzeigen
      // Hier kannst du den Binärdateninhalt weiterverarbeiten
    };
    reader.readAsArrayBuffer(file); // Datei als ArrayBuffer lesen
  }
});

[likemike]

Sorry, but I don't know, how to use that. I guess, I need an ajax code snippet, to use it in the TUnimFileUploadButton-Ajax-Event.

[Oliver Morsch]

Easiest way would be to use this inside a HTMLFrame:

 

<input type="file" id="fileInput" />
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0]; // Datei auswählen
  if (file) {
    const reader = new FileReader();
    reader.onload = function(e) {
      const arrayBuffer = e.target.result; // ArrayBuffer mit den Binärdaten
      const byteArray = new Uint8Array(arrayBuffer); // Uint8Array erstellen, um die Binärdaten zu verarbeiten
      console.log(byteArray); // Binärdaten in der Konsole anzeigen
      // Hier kannst du den Binärdateninhalt weiterverarbeiten
    };
    reader.readAsArrayBuffer(file); // Datei als ArrayBuffer lesen
  }
});
</script>

 

[likemike]

How can this be used in an TUnimFileUploadButton-event?

[Norm]

On 3/5/2025 at 6:52 AM, likemike said:

How can this be used in an TUnimFileUploadButton-event?

I suggest you have a look at this thread and the sample project I posted. I think it will help you to find a solution for your issue.

It is basically a replacement for uniGui's fileupload option that you can customize to your needs.

Feel free to reach out if I can be of any help: