How to get the progress of tauri http upload or download file?

[wkl007]

Axios has related configuration, tauri is not found. please help me. thank you very much !!!

https://axios-http.com/docs/req_config

  // `onUploadProgress` allows handling of progress events for uploads
  // browser only
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `onDownloadProgress` allows handling of progress events for downloads
  // browser only
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

[FabianLars]

This is not implemented (yet?). Instead there's a plugin https://github.com/tauri-apps/tauri-plugin-upload. As the name suggests, this is only for uploading files, but there was interest in a download equivalent, so that should be worked on somewhat soon.

[deadlinecode]

Im just gona quickly save your ass if you want to download a file:

Little disclaimer: This solution is hella sketchy and very big files will prbbly not work so yeah
BUT it bypasses cors

Go into your src-tauri/tauri.conf.json and take a look at tauri > allowlist
Activate the http module:

"http": {
  "all": true,
  "request": true,
  "scope": ["https://**/*"] 
}

Be carfull since the scope will allow every url (https) to be called
Change if needed
Also add the fs api in the allowlist so you can access the file system

"fs": {
  "all": true,
  "scope": ["$APP/*", "$APP"]
}

And again configure the scopes like needed (for me its just the data dir of my app)

Now what you wanna do is use your Browser to request the file via the http api and use the fs api from tauri to save the contents
Just like this:

import * as fs from "@tauri-apps/api/fs";
import { getClient, ResponseType } from "@tauri-apps/api/http";

const client = await getClient();
const data = (
  await client.get(url, {
    responseType: ResponseType.Binary,
  })
).data as any;
await fs.writeBinaryFile(
  destFilePath, // Change this to where the file should be saved
  data
);

And that's basically it

This should download your file just fine.
Be carefull though like i said big files won't prbbly work since you are getting the binary data and saving all of it in the ram to write it to the disk so it will be stored in a variable directly in the frontend/browser that tauri runs.

[deadlinecode]

Oh and here a cleand up version for reuse:

download = async (url: string, dest: string, options?: RequestOptions) => {
  await fs.writeBinaryFile(
    dest,
    (
      await (
        await getClient()
      ).get(url, {
        ...(options || {}),
        responseType: ResponseType.Binary,
      })
    ).data as any
  );
};

[LetrixZ]

Oh and here a cleand up version for reuse:

download = async (url: string, dest: string, options?: RequestOptions) => {
  await fs.writeBinaryFile(
    dest,
    (
      await (
        await getClient()
      ).get(url, {
        ...(options || {}),
        responseType: ResponseType.Binary,
      })
    ).data as any
  );
};

Tried this but it fails on HTTPS sites:

Network Error: TLS is disabled, activate one of the tls- features: TLS is disabled, activate one of the tls- features

[happymingjieli]

Oh and here a cleand up version for reuse:

download = async (url: string, dest: string, options?: RequestOptions) => {
  await fs.writeBinaryFile(
    dest,
    (
      await (
        await getClient()
      ).get(url, {
        ...(options || {}),
        responseType: ResponseType.Binary,
      })
    ).data as any
  );
};

In the case of big File download，it does not work。How to solve big File download？ Please help me！Thank you very much！

[LetrixZ]

In the case of big File download，it does not work。How to solve big File download？ Please help me！Thank you very much！

Have you tried my method below? It downloads the file in the backend writing it to disk instead of RAM.

[LetrixZ]

Don't know if this is what you want but worked for my case:
https://gist.github.com/giuliano-oliveira/4d11d6b3bb003dba3a1b53f43d81b30d

I adapted it to accept an AppHandle and used it to emit a progress events to the front.

[Vang-z]

Hello, I am not familiar with the writing of rust. I tried to use this code in my project, but it kept reporting errors, so could you please give me a complete call? Including dependent files, thank you!

This implemantion is tailored for my project.

You can check the original source: https://gist.github.com/giuliano-oliveira/4d11d6b3bb003dba3a1b53f43d81b30d. Just skip the progress bar stuff (pb), and use Tauri events to send the progress to the frontend.

I also don't know much about Rust. I spawned an async thread so it doesn't block the main thread when I start a download: tokio::spawn(async move...

Okay thanks a lot, I will be test it as soon.

[Vang-z]

Hello, I am not familiar with the writing of rust. I tried to use this code in my project, but it kept reporting errors, so could you please give me a complete call? Including dependent files, thank you!

This implemantion is tailored for my project. You can check the original source: https://gist.github.com/giuliano-oliveira/4d11d6b3bb003dba3a1b53f43d81b30d. Just skip the progress bar stuff (pb), and use Tauri events to send the progress to the frontend.

I also don't know much about Rust. I spawned an async thread so it doesn't block the main thread when I start a download: tokio::spawn(async move...

After one day's hard work, I have successfully downloaded the file asynchronously from the target server. However, I cannot report the download progress and download speed to the front-end for use at present, so could you please help me again? My rust and react codes are as follows:

#[tauri::command]
pub async fn download(url: String, path: String) -> Result<(), String> {
    fs::create_dir_all("./download/").expect("创建 download 文件夹失败");
    let start_time = Instant::now();
    let client = Client::new();
    let res = client
        .get(&url)
        .header(
            USER_AGENT,
            "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101 Firefox/91.0",
        )
        .header(ACCEPT, "application/octet-stream")
        .send()
        .await
        .or(Err(format!("解析 `{}` 文件失败", &url)))?;
    let total_size = res
        .content_length()
        .ok_or(format!("获取 `{}` 文件大小失败", &url))?;

    let mut file = File::create(&path).or(Err(format!("创建 `{}` 文件失败", &path)))?;
    let mut downloaded: u64 = 0;
    let mut stream = res.bytes_stream();
    while let Some(item) = stream.next().await {
        let chunk = item.or(Err(format!("下载 `{}` 文件失败", &path)))?;
        file.write(&chunk).or(Err(format!("写入 `{}` 文件失败", &path)))?;
        downloaded = min(downloaded + (chunk.len() as u64), total_size);
        let duration = start_time.elapsed().as_secs_f64();
        let speed = if duration > 0.0 {
            Some(downloaded as f64 / duration / 1024.0 / 1024.0)
        } else {
            None
        };
        println!("downloaded => {}", downloaded);
        println!("total_size => {}", total_size);
        println!("speed => {:?}", speed);
    }

    return Ok(());
}

  const handleDownload = async () => {
    const ret = await invoke("download", {
        url: `http://example.com/HeidiSQL_12.2.0.6576_Setup.exe`,
        path: `./download/1.exe`
      });
    console.log(ret)
  }

[LetrixZ]

Your code is not sending events to the frontend, so it doesn't know the progress.

I made a Progress struct to hold the progress of the download:

#[derive(Serialize, Deserialize, Debug, Clone)]
pub struct Progress {
    pub download_id: i64,
    pub filesize: u64,
    pub transfered: u64,
    pub transfer_rate: f64,
    pub percentage: f64,
}

impl Progress {
    pub fn emit_progress(&self, handle: &AppHandle) {
        handle.emit_all("DOWNLOAD_PROGRESS", &self).ok();
    }

    pub fn emit_finished(&self, handle: &AppHandle) {
        handle.emit_all("DOWNLOAD_FINISHED", &self).ok();
    }
}

To actually emit the progress of the download, first I create an instance:

let mut progress = Progress {
        download_id: download.id,
        filesize: download.filesize,
        transfered: 0,
        transfer_rate: 0.0,
        percentage: 0.0,
    };

And inside the while loop:

progress.transfered = downloaded_bytes;
progress.percentage = (progress.transfered * 100 / download.filesize) as f64;
progress.transfer_rate = (downloaded_bytes as f64) / (start.elapsed().as_secs() as f64)
    + (start.elapsed().subsec_nanos() as f64 / 1_000_000_000.0).trunc();

// This is so I don't emit the event everytime. I do it every 50ms (UPDATE_SPEED).
if last_update.elapsed().as_millis() >= UPDATE_SPEED {
    progress.emit_progress(&handle);
    last_update = std::time::Instant::now();
}

Then, in the frontend, I listen for the download progress event:

listen("DOWNLOAD_PROGRESS", (e) => {
  let data = e.payload as Progress;
  // handle progress
});

[Vang-z]

Your code is not sending events to the frontend, so it doesn't know the progress.

I made a Progress struct to hold the progress of the download:

#[derive(Serialize, Deserialize, Debug, Clone)]
pub struct Progress {
    pub download_id: i64,
    pub filesize: u64,
    pub transfered: u64,
    pub transfer_rate: f64,
    pub percentage: f64,
}

impl Progress {
    pub fn emit_progress(&self, handle: &AppHandle) {
        handle.emit_all("DOWNLOAD_PROGRESS", &self).ok();
    }

    pub fn emit_finished(&self, handle: &AppHandle) {
        handle.emit_all("DOWNLOAD_FINISHED", &self).ok();
    }
}

To actually emit the progress of the download, first I create an instance:

let mut progress = Progress {
        download_id: download.id,
        filesize: download.filesize,
        transfered: 0,
        transfer_rate: 0.0,
        percentage: 0.0,
    };

And inside the while loop:

progress.transfered = downloaded_bytes;
progress.percentage = (progress.transfered * 100 / download.filesize) as f64;
progress.transfer_rate = (downloaded_bytes as f64) / (start.elapsed().as_secs() as f64)
    + (start.elapsed().subsec_nanos() as f64 / 1_000_000_000.0).trunc();

// This is so I don't emit the event everytime. I do it every 50ms (UPDATE_SPEED).
if last_update.elapsed().as_millis() >= UPDATE_SPEED {
    progress.emit_progress(&handle);
    last_update = std::time::Instant::now();
}

Then, in the frontend, I listen for the download progress event:

listen("DOWNLOAD_PROGRESS", (e) => {
  let data = e.payload as Progress;
  // handle progress
});

thx a lot! now the code is worked very well :)

[DogFoxX]

Your code is not sending events to the frontend, so it doesn't know the progress.
I made a Progress struct to hold the progress of the download:

#[derive(Serialize, Deserialize, Debug, Clone)]
pub struct Progress {
    pub download_id: i64,
    pub filesize: u64,
    pub transfered: u64,
    pub transfer_rate: f64,
    pub percentage: f64,
}

impl Progress {
    pub fn emit_progress(&self, handle: &AppHandle) {
        handle.emit_all("DOWNLOAD_PROGRESS", &self).ok();
    }

    pub fn emit_finished(&self, handle: &AppHandle) {
        handle.emit_all("DOWNLOAD_FINISHED", &self).ok();
    }
}

To actually emit the progress of the download, first I create an instance:

let mut progress = Progress {
        download_id: download.id,
        filesize: download.filesize,
        transfered: 0,
        transfer_rate: 0.0,
        percentage: 0.0,
    };

And inside the while loop:

progress.transfered = downloaded_bytes;
progress.percentage = (progress.transfered * 100 / download.filesize) as f64;
progress.transfer_rate = (downloaded_bytes as f64) / (start.elapsed().as_secs() as f64)
    + (start.elapsed().subsec_nanos() as f64 / 1_000_000_000.0).trunc();

// This is so I don't emit the event everytime. I do it every 50ms (UPDATE_SPEED).
if last_update.elapsed().as_millis() >= UPDATE_SPEED {
    progress.emit_progress(&handle);
    last_update = std::time::Instant::now();
}

Then, in the frontend, I listen for the download progress event:

listen("DOWNLOAD_PROGRESS", (e) => {
  let data = e.payload as Progress;
  // handle progress
});

thx a lot! now the code is worked very well :)

Hi, how did you implement the progress listener from the code @LetrixZ shared?
Could you share the code from your main.rs... thanx

[ymscora]

For rust, I am new and have not played it. Can you provide a complete demo example?

[Dylan-Gresham]

I had a slightly different use case, I needed to display a progress bar for copying a file. Here's how I did it:

In main.rs:

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

// Standard library imports
use std::io::Write;
use std::path::PathBuf;
use std::time::Instant;
use std::fs::{self, File};

// Crate imports
use bytes::BytesMut;
use tauri::{AppHandle, Manager};
use serde::{Serialize, Deserialize};
use tokio_util::codec::{BytesCodec, FramedRead};
use futures_util::{StreamExt, TryFutureExt, TryStreamExt};

// Define Progress struct for progress bar
#[derive(Serialize, Deserialize, Debug, Clone)]
struct Progress {
    filesize: u64,
    percentage: f64,
    download_id: i64,
    transferred: u64,
    transfer_rate: f64,
}

// Implement emitters to send information to front-end
impl Progress {
    pub fn emit_progress(&self, handle: &AppHandle) {
        handle.emit_all("DOWNLOAD_PROGRESS", &self).ok();
    }

    pub fn emit_finished(&self, handle: &AppHandle) {
        handle.emit_all("DOWNLOAD_FINISHED", &self).ok();
    }
}

async fn stream_file(resource_path: PathBuf, download_path: String, start_time: Instant, handle: AppHandle) -> Result<(), String> {
    // Not entirely sure what is happening here but what I do know is this:
    // 1. Opening the <video_name>.mp4 resource as a Tokio file
    // 2. Mapping the file into a stream of static bytes
    // 3. "Flattening" the stream so it can be used immediately instead of having to
    //    do an await on it. From my understanding, this basically just allows us to
    //    work with it like it's not a wrapped future. I believe this would cause it
    //    to pause momentarily at the first `stream.next()` call.
    // 4. The flattened stream is then boxed and pinned on the heap. Not sure what
    //    it means to pin a Box, I'd imagine it just means that it won't move from
    //    where it is first placed on the heap. Not sure.
    let mut stream = Box::pin(tokio::fs::File::open(&resource_path)
        .map_ok(|file| FramedRead::new(file, BytesCodec::new()).map_ok(BytesMut::freeze))
        .try_flatten_stream());

    // Create an instance of the Progress struct
    let mut progress = Progress {
        download_id: 0,
        filesize: 18332543,
        transferred: 0,
        transfer_rate: 0.0,
        percentage: 0.0,
    };

    let mut file = match File::create(&download_path) {
        Ok(f) => f,
        Err(e) => {
            eprintln!("Unable to create destination file at path '{}'", &download_path);
            return Err(format!("Unable to create destination file at path '{}'.\nError: {}", download_path, e));
        }
    };

    // Start the clock for sending updates to the frontend
    let mut last_update = Instant::now();

    while let Some(item) = stream.next().await {
        // Get the next chunk of bytes being downloaded
        let chunk = match item {
            Ok(bytes) => bytes,
            Err(e) => return Err(format!("Error while downloading the file.\nError: {}", e)),
        };

        // Write the chunk to the file
        match file.write(&chunk) {
            Ok(num_bytes) => println!("Wrote {} to {}", num_bytes, &download_path),
            Err(e) => return Err(format!("Error while writing to file.\nError: {}", e)),
        }

        // Update the total downloaded bytes
        progress.transferred = std::cmp::min(
            progress.transferred + (chunk.len() as u64),
            progress.filesize
        );

        // Current time duration since start of download
        let duration = start_time.elapsed().as_secs_f64();

        // Update the download speed in MBs
        progress.transfer_rate = if duration > 0.0 {
            (progress.transferred as f64) / duration / 1024.0 / 1024.0
        } else {
            0.0
        };

        // Update the download percentage
        progress.percentage = (progress.transferred * 100 / progress.filesize) as f64;

        // Print status messages to console
        println!("Downloaded => {}", progress.transferred);
        println!("Total size of download => {}", progress.filesize);
        println!("Speed => {:?}", progress.transfer_rate);

        // If it's been more than 25 milliseconds...
        if last_update.elapsed().as_millis() >= 25 {
            // Emit the progress to the frontend
            progress.emit_progress(&handle);

            // Refresh the last_update variable
            last_update = Instant::now();
        }

        // If the transfer is complete...
        if progress.transferred >= progress.filesize {
            // Print msg to console
            println!("Download finished, emitting finished and returning!");

            // Emit the finish message to the frontend
            progress.emit_finished(&handle);

            // Return from the function
            break;
        }
    }

    Ok(())
}

#[tauri::command]
async fn download_video(video_name: String, download_path: String, handle: AppHandle) -> Result<(), String> {
    // Create parent directories if they don't exist
    let download_path_parents = match std::path::Path::new(&download_path).parent() {
        Some(path) => path,
        None => return Err(format!("Unable to get parent path of download path: '{}'", download_path)),
    };

    let create_dir_err_msg = format!("Unable to create the path '{:?}'", download_path_parents);
    fs::create_dir_all(&download_path_parents).expect(&create_dir_err_msg);
    println!("Parent directories created!");

    let start_time = Instant::now();
    match video_name.as_str() {
        "<video_name>.mp4" => {
            // Get resource path for the video
            let resource_path = handle
                .path_resolver()
                .resolve_resource("resources/videos/<video_name>.mp4")
                .expect("Failed to resolve the '<video_name>.mp4' resource.");

            stream_file(resource_path, download_path, start_time, handle).await
        }
        _ => Err(format!("Support for downloading '{}' isn't available yet.", video_name)),
    }
}

fn main() {
    // Tauri build stuff
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![
            download_video
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

In tauri.conf.json I added:

{
  ...
  "tauri": {
    "allowlist": {
      "all": false,
      "fs": {
        "scope": ["$RESOURCE/videos/*"]
      },
      "path": {
        "all": true
      },
      "dialog": {
        "save": true
      }
    },
    "bundle": {
      ...
      "resources": [
        "resources/*"
      ],
      ...
    },
    ...
  }  
}

I added the video file I wanted to be copied to the resources/videos/ directory such that the path was project_name/src-tauri/resources/videos/<video_name>.mp4

And then in my app.tsx file I put:

'use client';

import { invoke } from "@tauri-apps/api/tauri";
import ProgressBar from "./components/ProgressBar";
import { listen } from "@tauri-apps/api/event";
import { useState } from "react";
import { save } from "@tauri-apps/api/dialog";
import { downloadDir } from "@tauri-apps/api/path";

interface Progress {
    downloadId: number;
    filesize: number;
    transferred: number;
    transferRate: number;
    percentage: number;
}

async function downloadVideo(e: any) {
    e.preventDefault();
    e.stopPropagation();

    const pathToDownloads = await downloadDir();

    const downloadPath = await save({
        defaultPath: pathToDownloads+"/<video_name>.mp4",
        filters: [{
            name: 'mp4',
            extensions: ['mp4']
        }],
        title: "Save <video_name>.mp4 to..."
    });

    invoke('download_video', {
        videoName: '<video_name>.mp4',
        downloadPath: downloadPath
    })
    .then( (msg) => console.log(msg) )
    .catch( (errMsg) => console.error(errMsg) );
}

export default function Home() {
    const [details, setDetails] = useState({ inProgress: false, progress: 0.0 });

    listen('DOWNLOAD_PROGRESS', (e) => {
        let data = e.payload as Progress;

        // Update state
        setDetails({ ...details, inProgress: true, progress: data.percentage });
    });

    listen('DOWNLOAD_FINISHED', (_) => {
        // Update state
        setDetails({ ...details, inProgress: false, progress: 0.0 });
    });

    return (
        <main>
            <h4>Click the button below to download the <video_name> Video</h4>
            <button type="button" onClick={ async (e: any) => {
                await downloadVideo(e);
            }}>Download</button>
            {details.inProgress &&
                <>
                    <h6>Downloading <video_name>.mp4...</h6>
                    <ProgressBar completed={details.progress} />
                </>
            }
            </main>
    );
}

Hope this helps you/someone get started on this. There's definitely some improvements that could be made here. I.e., dynamically finding values for the Progress::filesize member instead of finding it manually using stat.

If you're wondering where I got the information for this stuff, most of it was from the Tauri docs but the file streaming was a mix of stuff from @LetrixZ and @Vang-z earlier in here and this thread from 2019/2020.

[jfahrenkrug]

Hello! The original question was posted about 2.5 years ago. I just wanted to check whether there's now an "official" way to download a binary file and track the download progress? Thank you!

[FabianLars]

https://v2.tauri.app/plugin/upload/ - edit: unlucky plugin name, it can download too

[jfahrenkrug]

@FabianLars Great, thank you!