Cancel Download function not working

[TirumalReddy]

Description: The cancel() method in react-native-blob-util is not functioning as expected. When attempting to cancel an ongoing download, the download continues instead of being halted.

Steps to Reproduce:

Start a download using react-native-blob-util. Attempt to cancel the download using the cancel() method. Observe that the download continues despite the cancellation attempt.

Expected Behavior: The download should be halted immediately upon calling the cancel() method.

Actual Behavior: The download continues even after calling the cancel() method.

Environment:

Library Version: 0.18.6 React Native Version: 0.71.7 Platform: Android & IOS

Code Example:

       let DownloadDir = "Storage/to/Path"
        let fileName = Name + extension;
        let filePath = DownloadDir + fileName;
        let folderName = DownloadDir + Name;

        let options = {
            fileCache: true,
            addAndroidDownloads: {
                useDownloadManager: true,
                notification: false,
                path: filePath,
                description: "downloading...",
            },
            path: filePath,
        };

       const task = config(options)
            .fetch("GET", FILE_URL)
            .progress((received, total) => {
                const progress = Math.floor((received / total) * 100);
            })
            .then((res) => {
                console.log("res)
            })
            .catch((error) => {
                if (fs.exists(folderName)) {
                    fs.unlink(folderName);
                }
            });

        task.cancel((err) => {
          if (err) {
            console.error('Failed to cancel download:', err);
          } else {
            console.log('Download cancelled successfully');
          }
      });

[TirumalReddy]

@RonRadtke @pcardon Can you please check it once

[anilunni]

Even I also facing the same issue. Kindly give the solutions for the same @pcardon / @RonRadtke

[KSNMURTHY08]

Hi,

I am also wanted to cancel the ongoing download. I have tried abortController and tried to abort/cancel the download but is also not working. I am also using react-native-blob-util. Please find the below code snippet I have tried.

import React, { useState } from 'react'; import { View, Button, Text, StyleSheet, PermissionsAndroid, Platform } from 'react-native'; import RNFetchBlob from 'react-native-blob-util';

const DownloadComponent = () => { const [isDownloading, setIsDownloading] = useState(false); const [downloaded, setDownloaded] = useState(false); const [error, setError] = useState(null); const [controller, setController] = useState(null);

const requestStoragePermission = async () => { try { if (Platform.OS === 'android') { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, { title: 'Storage Permission Required', message: 'App needs access to your storage to download files', } ); return granted === PermissionsAndroid.RESULTS.GRANTED; } return true; } catch (err) { console.warn(err); return false; } };

const startDownload = async () => { const hasPermission = await requestStoragePermission(); if (!hasPermission) { setError('Permission denied'); return; } const abortController = new AbortController(); setController(abortController); setIsDownloading(true); setDownloaded(false); setError(null); RNFetchBlob.config({ fileCache: true, path: RNFetchBlob.fs.dirs.DownloadDir + '/test-download.pdf', }) .fetch('GET', 'https://example.com/test-download.pdf', null, abortController.signal) .progress((received, total) => { console.log('progress', received / total); }) .then((res) => { console.log('The file saved to ', res.path()); setDownloaded(true); setIsDownloading(false); setController(null); }) .catch((err) => { if (err.name === 'AbortError') { console.log('Download cancelled'); } else { console.error(err); setError(err.message); } setIsDownloading(false); setController(null); }); };

const cancelDownload = () => { if (controller) { controller.abort(); } };

return (

{isDownloading && Downloading...} {downloaded && Download Complete!} {error && Error: {error}}

); };

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });

export default DownloadComponent;

[Shivakumaramm]

Facing the same . Please provide the solution for the same

[shubhamjadon]

@TirumalReddy The confusion seems to stem from the fact that the cancel method exists on the fetch function in the react-native-blob-utils library, but you're trying to chain it to a promise result, which won't work.

Here is code snippet from docs:

let task = ReactNativeBlobUtil.fetch('GET', 'http://example.com/file/1')

task.then(() => { ...
})
        // handle request cancelled rejection
        .catch((err) => {
            console.log(err)
        })
// cancel the request, the callback function is optional
task.cancel((err) => { ...
})