1

I'm new to programming with angular and node js, and I need to return the files that are saves in a file system (handled by the backend in node js) to the front end, to give the user the option to view them or download them, to save them I used the multer middleware, but to bring them back for the front end I not found a effective solution. I tried using fs to create a buffer array, but it didn't work. Does anyone jnow an effective solution?

In the request will be passed parameters to identify which file returns, but for now I'm testing with a static file.

My request : 

let headers: Headers = new Headers(); 
headers.append('Content-type', 'application/json'); 
headers.append('Authorization', token); 
let link = ${URL_AuthAPI}/systemUsers/list; 

let body = JSON.stringify({ obj }); 
let option = new RequestOptions({ headers: headers }); 
return this.http.post(link, body, option).map((resposta: Response)=> resposta);

Nodejs Server: 

var filePath = path.join("/home", 'rg.png');
  var stat = fileSystem.statSync(filePath);

    res.writeHead(200, {
        'Content-Type': 'image/png',
        'Content-Length': stat.size,
        // 'Content-Disposition': 'attachment ; filename=teste.png'
    });

    var readStream = fileSystem.readFileSync(filePath);

    readStream.on('data', function(data) {
    response.write(data);
});

readStream.on('end', function() {
    response.end();        
});

Component Code: 

this.systemUsersService.listUsers(this.token, null).subscribe((apiResponse) => {

      var data = apiResponse['_body'];
      console.log(data);

    }, (error: any) => {

    }
    );
A.Laura
  • 11
  • 3
  • Welcome to Stack Overflow! You may want to be a bit more specific, and perhaps show some code of what you're trying to do? I am very confused: Do you need to return THE files, or A LIST of THE files? Does it need to be recursive (traverse directories ?) Does it need to preserve directory format? – J. Martin May 17 '18 at 20:44
  • Thanks. It does not have to be recursive, I need to return a list, in case I cannot return one file at a time. The intent is to return them to the html so the user can download the files he uploaded. – A.Laura May 18 '18 at 17:49
  • 1
    At first I tested this code: https://stackoverflow.com/questions/10046039/nodejs-send-file-in-response, but it returns something of the type https://pastebin.com/3bcUWX7A I read about the method return is a Readable Stream, when the request is of type get the browser renders the file on the screen, as I am doing a request of type post, I do not know how to handle this String. – A.Laura May 18 '18 at 17:50
  • It's best to add code to your question. I've added it in for you. But perhaps you could fill it out a little more? – J. Martin May 18 '18 at 18:46
  • 1
    I have added the code – A.Laura May 21 '18 at 11:50

1 Answers1

1
  • If the files you want to allow the user to download are public, then the best option is send (from your backend) the array of files urls to the angular application, (in case of images to create the proper from frontend)
  • If you want to download the image using node, you can read the file (fs.createReadStream) and send the proper header before perform the "send". Take a look into Nodejs send file in response it is a really good answer
  • In the end, my personal recommendation is "don't send files using node", you can use nginx to send static content
Jose Mato
  • 2,709
  • 1
  • 17
  • 18
  • Thanks for the help, but now I have the problem that I quoted in the above comment I do not know how to handle the Readable String that the method returns, I tried to generate a blob and even convert to base64 but it does not work. I am searching on to see if I find more options. – A.Laura May 18 '18 at 17:53
  • Welcome. In your case you don't need to work too much with readable stream, just send it to the frontend adding the headers I indicated and "streaming" the image object (as you know, a readable stream) using the method pipe and passing the express response object. Take a look into the doc to understand it: https://nodejs.org/api/stream.html#stream_readable_pipe_destination_options – Jose Mato May 18 '18 at 21:41