Upload files via angular

I am trying to make a simple file server. I have a Node.js backend with MongoDB GridFS repository for storing files. I get files from the server gridfs-stream. On the interface I use Angular. And I have two main problems:

  • When I use Blob to download downloads, filenameit becomes: "d1c393df-b0d9-4ae5-befe-8d45b183eb54 ...". I read a lot of documents about this and did not find any solutions.
  • When I download only express without authentication, the files load correctly. But I send authentication information through Angular, and without them, the application will throw an error. I can specify a route without authentication, but this makes my application unsafe.

I hope you help me:

  • Find another way to upload files of any format.
  • Modify my existing code so that everything works out correctly.

My Angular Service for receiving files by creating Blob:

getFilesFactory.download = function(filename){
  $http.get('/api/files/' + filename, {responseType:'arraybuffer'})
  .then(function(data){
    var stringCT = data.headers('Content-Type').toString();
    console.log(stringCT);
    var contentType = stringCT.substring(1, stringCT.length - 1);
    console.log(contentType);

      switch (contentType) {
        case "image/jpeg":
          file = new Blob([data.data], {type: 'image/jpeg'});
          fileURL = URL.createObjectURL(file);
          $window.open(fileURL);
        break;
        case "application/pdf":
          file = new Blob([data.data], {type: 'application/pdf'});
          fileURL = URL.createObjectURL(file);
          $window.open(fileURL);
        break;
        case "application/msword":
          file = new Blob([data.data], {type: 'application/msword'});
          fileURL = URL.createObjectURL(file);
          $window.open(fileURL);
        break;
        case "application/octet-stream":
          file = new Blob([data.data], {type: 'application/octet-stream'});
          fileURL = URL.createObjectURL(file);
          $window.open(fileURL);
        break;
        default: console.log("no contentType match");
      }
  });
};
+4
source share
1 answer

You do not need to use ajaxto download the file and open it with $window.open(fileURL);. You can simply open a new window using '/api/files/' + filenameurl and the browser will start loading the content. And you can manage Content-Typeand the server name of the file. You can look at an example: Nodejs send a file in response

0
source

All Articles