0

I have a requirement as a follows. I user AngularJS, JavaScript. 1. User clicks on a document in the browser. I get the document path and open it. >> window.open(documentpath); 2. But the document which is saved in the directory has a file name replaced as Id and NO extensions. abc/files/4 3. The actual filename is in the DB as Id: 4 Filename: Hello.pdf

So when I open the file, I get abc/files/4 which has no format in it and it doesn't open the file.

How can I open the file with the right name abc/files/Hello.pdf?

1st, I want to take the path abc/files/4 and I don't want to download the file. Just store it somewhere locally like cache/Temp to get the file contents and rename 4 to Hello.pdf and then open it in the browser. All this should happen in the background and should open the file correctly when the user clicks on it.

Is it possible using JavaScript, AngularJS? Please let me know

Aiswarya Rajagopalan
  • 107
  • 1
  • 11

2 Answers2

1

JavaScript usually has no access to the local file system for security reasons.

What you have to do instead is to pass the file name along with your HTTP response. To do this, add this header to the response:

Content-Disposition: inline; filename="Hello.pdf"

See also:

Community
  • 1
  • 1
Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
0

This will let you download the file with async request and open it in a base64 encoded data url. It WONT set the name, just force the display as pdf. You can use this if you have no access to your server and cant implement Aaron Digulla method which is infinitely better.

/**
 *
 * jquery.binarytransport.js
 *
 * @description. jQuery ajax transport for making binary data type requests.
 * @version 1.0
 * @author Henry Algus <henryalgus@gmail.com>
 *
 */
$.ajaxTransport("+binary", function(options, originalOptions, jqXHR) {
  // check for conditions and support for blob / arraybuffer response type
  if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
    return {
      // create new XMLHttpRequest
      send: function(headers, callback) {
        // setup all variables
        var xhr = new XMLHttpRequest(),
          url = options.url,
          type = options.type,
          async = options.async || true,
          // blob or arraybuffer. Default is blob
          dataType = options.responseType || "blob",
          data = options.data || null,
          username = options.username || null,
          password = options.password || null;

        xhr.addEventListener('load', function() {
          var data = {};
          data[options.dataType] = xhr.response;
          // make callback and send data
          callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
        });

        xhr.open(type, url, async, username, password);

        // setup custom headers
        for (var i in headers) {
          xhr.setRequestHeader(i, headers[i]);
        }

        xhr.responseType = dataType;
        xhr.send(data);
      },
      abort: function() {}
    };
  }
});

var blobToBase64 = function(blob, cb) {
  var reader = new FileReader();
  reader.onload = function() {
    var dataUrl = reader.result;
    var base64 = dataUrl.split(',')[1];
    cb(base64);
  };
  reader.readAsDataURL(blob);
};

$.ajax("Description.pdf", {
  dataType: "binary"
}).done(function(data) {
  blobToBase64(data, function(base64encoded) {
    window.open("data:application/pdf;base64," + base64encoded);
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
François-Xavier Aeberhard
  • 632
  • 8
  • 13