How to make download functionality compatible with mobile browsers using React?

Viewed 148

My download link functionality works on desktop browsers and the mobile version of chrome but doesn't work on mobile browsers like ucbrowser and opera mini. I am running the code locally.

I'm serving a zip file with express,this works fine:

app.get('/download/:id', (req, res) => {
const file = req.params.id;
 res.download(path.join(__dirname,"downloadable", file+".zip"),function(err)
 {
  if(err) console.log(err);
   console.log("downloaded")
}); 
});

In the frontend I have tried all of these functions, they all have the same behavior:

const tryDownloadOne = (url, filename) => {  //using js-file-download library
  axios.get(url, {
    responseType: 'blob',
  })
  .then((res) => {
    fileDownload(res.data, filename)
  })
}

const tryDownloadTwo = async(url,fileName)=>{        //creating dummy anchor tag
 const response = await axios.get(url, { responseType: 'blob' });
if (response.data.error) console.error(response.data.error)
const fileURL = window.URL.createObjectURL(new Blob([response.data]));
const fileLink = document.createElement('a');
fileLink.href = fileURL;
console.log(response.headers["content-disposition"]);
fileLink.setAttribute('download', fileName);
document.body.appendChild(fileLink);
fileLink.click();
fileLink.remove();
}

const tryDownloadThree=async(url,fileName)=>{  //using file saver library
const res=await fetch(url);
 const blob=await res.blob();
saveAs(blob, fileName);
}

The html part looks like this

 <button className="submit" onClick={()=>tryDownloadOne("/download/"+downloadFolder,currentFolder+".zip")} >download</button>
0 Answers
Related