Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pass file path to javascript input android #11

Open
wisejoy7 opened this issue Oct 29, 2017 · 0 comments
Open

Pass file path to javascript input android #11

wisejoy7 opened this issue Oct 29, 2017 · 0 comments

Comments

@wisejoy7
Copy link

I understand that providing a physical file path to javascript is not possible due to security reasons. However, when I look at Mozilla's pdf.js and mupdf android pdf viewer I see this is very much possible. There is a mechanism by which I can pass a file path to javascript. I explored into PDF.js but it seemed little difficult to make use of when I needed a simple solution. I want to pass android internal storage file location onto the following code instead of using input id="files" type="file" which requires me to browse and select file. In my case I want to just pass file location from sdcard. The following code actually loads ms word (docx) file as html which I then will show in webview in my project. In the case of pdf.js we were using it to display pdf in the similar way.

What I found on the PDF.js code which was used to input file : In pdffile.js included in index.html file, url variable was mentioned pointing to real location of the file i.e. in assets folder which then was used in pdf.js but at that point the usage seems confusing. Is there any way by which I can use real path of file or pass real path somehow in android for my purpose of viewing docx?

I find that PDF.js by Mozilla actually treats file location as a url and so the file in the url is converted to javascript file object or blob. Hence I create a blob of the url from server using Ajax :

 var myObject;
var xhr = new XMLHttpRequest();
xhr.open("GET","10143.docx",true); // adding true will make it work asynchronously
xhr.responseType = 'blob';
xhr.onload = function(e) {
    if (this.status == 200){
        //do some stuff
        myObject = this.response;
    }
};
xhr.send();



$(document).ready(function(){
//Input File

var $files = $('#files');

//File Change Event
$files.on('change', function (e) {

//File Object Information
var files = myObject.files;

//Create DocxJS
var docxJS = new DocxJS();

//File Parsing
docxJS.parse(
  blobToFile(myObject, "10143.docx"),
  function () {
    //After Rendering
    docxJS.render($('#loaded-layout')[0], function (result) {
      if (result.isError) {
        console.log(result.msg);
      } else {
        console.log("Success Render");
      }
    });
  }, function (e) {
    console.log("Error!", e);
  }
);

});
});

function blobToFile(theBlob, fileName){
//A Blob() is almost a File() - it's just missing the two properties below which we will add
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
However now that I do that I get Parsing error from DocxJS like : {isError: true, msg: "Parse Error."}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant