0

I am trying to download a file from my nodeJS server, however opening the files afterwards is not possible. For example: The original 15kb JPG file will be 24kb when downloaded and impossible to show.

upload:

        if (fs.existsSync(filePath)) {
            res.download(filePath);
            readStream.pipe(res);
        } else {
            return res.status(404).json({msg: "Failed to load file"});
        }

download:

import fileDownload from "js-file-download";

    const getFile = async (filename) => {
        const headers = {
            'responseType': 'blob',
            'x-access-token': JSON.parse(localStorage.getItem('user')).token
        }

        await axios.post(getFileRoute, {
                filename: filename
            }, {headers: headers})
                .then((response) => {
                    fileDownload(response.data, filename);
                });
            }

The picture preview is also shown in the network tab of google chrome's inspect. Thank you for your help!

Pfumpfen
  • 1
  • 1
  • Can you log the HTTP Response to see what the ContentType and other headers are? What do you mean "...opening the files afterwards is not possible" ? Can you navigate to where the file was downloaded? What is the file size? What does a command such as `file` tell you the data is? – h0r53 May 02 '22 at 17:00
  • Also, though it isn't disallowed, it's uncommon to download a file with a HTTP `POST` request. Are you certain that you are consuming the API appropriately? – h0r53 May 02 '22 at 17:02
  • I believe this can be a fix for your issue: [how to download files using axios](https://stackoverflow.com/questions/41938718/how-to-download-files-using-axios) – KibbeWater May 02 '22 at 17:04
  • @h0r53 thanks' for your answer request headers are: Accept: application/json, text/plain, */* Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9,de;q=0.8 Connection: keep-alive Content-Length: 83 Content-Type: application/json responseType: blob response headers: Access-Control-Allow-Origin: * Connection: keep-alive Keep-Alive: timeout=5 Transfer-Encoding: chunked File command says "data" (instead of JPEG). I see the downloaded file in my folder, but my photo app says "it appears that we don't support this file format". – Pfumpfen May 02 '22 at 20:12
  • `file` should report `JPEG` if the data was downloaded successfully. I'm noticing there isn't a ContentType in the response headers, which is the first indication of something going wrong. Can you look at the raw data itself to see if there is a bigger payload than just the JPEG? I'm also curious if @KibbeWater's recommendation helps you. – h0r53 May 02 '22 at 20:28
  • @h0r53 thank you @KibbeWater* but I still get exact the same result. When I open the downloaded jpg with my editor, I can see tons of �, instead of readable letters as in the original. Both files have the same amount of lines and characters, the downloaded one seems to be wrongly encoded. I manually added 'Content-Type': 'image/png' in the response headers, but nothing changed. – Pfumpfen May 02 '22 at 20:44
  • Changing the response headers Content-Type won't change the data itself (it's too late at that point). But it's likely that the data you are seeing is either encrypted or encoded. Are there any other response headers that you haven't provided yet? Can you try downloading a different resource (perhaps something from another web server) to see if you have the same issue? – h0r53 May 02 '22 at 20:59

0 Answers0