Java script accessing local files in a webview?

[mismael85]

Hi guys,

I am trying to run pdf.js (a library built using js and html5 to show pdf inside a webview)
in a webview but the js is not able to access local pdf files

I am using Qt quick 2

How could i change the security permissions from the webview to be able to access local files?

[mismael85]

Can any body help?

[wysota]

What does pdf.js use to load local files? As far as I know JavaScript has no API to access local files.

[mismael85]

Thank you Wysota for your support.

Here is how pdf.js loading files

var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      PDFView.open(new Uint8Array(xhr.response), 0);
    };

var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      PDFView.open(new Uint8Array(xhr.response), 0);
    };

To copy to clipboard, switch view to plain text mode 

It loads the file if i used an online pdf but it does not load local files.
as i know i should enable accessing local files in the webview but this feature is not available in Qt quick 2 webview.

BR

[wysota]

I don't think it is available in any default web browser. I'm afraid that if you want something like that, you will have to implement it yourself. But I don't think QtQuick's WebView exposes enough API to do this.

[mismael85]

Any suggestions how to implement it?

[wysota]

Any suggestions how to implement it?

You can try substituting network access manager object for your QML engine to serve you the data and/or modify the javascript library to use URLs the default network access manager can understand.

[mismael85]

I have found a solution you can post messages to webview through the experimental APIs also you can receive messages here is a code sample

main.qml

import QtQuick 2.2
import QtQuick.Window 2.1
import QtWebKit 3.0
import QtWebKit.experimental 1.0
 
Window {
    visible: true
    width: 360
    height: 360
 
    WebView{
        id: webview
        anchors.fill: parent
        url: "file:///D:/workspace/pdf.js/web/viewer.html"
 
         experimental.preferences.navigatorQtObjectEnabled: true
    }
 
    MouseArea {
        anchors.fill: parent
        onClicked: {
            var data = pdfLoader.loadPDF( "D:/Secrets_of_Success.pdf" );
            webview.experimental.postMessage( data );
            console.log( "data= " + data );
        }
    }
}

import QtQuick 2.2
import QtQuick.Window 2.1
import QtWebKit 3.0
import QtWebKit.experimental 1.0

Window {
    visible: true
    width: 360
    height: 360

    WebView{
        id: webview
        anchors.fill: parent
        url: "file:///D:/workspace/pdf.js/web/viewer.html"

         experimental.preferences.navigatorQtObjectEnabled: true
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            var data = pdfLoader.loadPDF( "D:/Secrets_of_Success.pdf" );
            webview.experimental.postMessage( data );
            console.log( "data= " + data );
        }
    }
}

To copy to clipboard, switch view to plain text mode 

and here is the js file

navigator.qt.onmessage = function(ev) {
        //eval(ev.data);
 
		var data = ev.data;
		var buf = new ArrayBuffer(data.length * 2); // 2 bytes for each char
      var bufView = new Uint16Array(buf);
      for (var i=0, strLen = data.length; i<strLen; i++) {
        bufView[i] = data.charCodeAt(i);
      }
	    PDFJS.getDocument(buf);
    }

navigator.qt.onmessage = function(ev) {
        //eval(ev.data);
		
		var data = ev.data;
		var buf = new ArrayBuffer(data.length * 2); // 2 bytes for each char
      var bufView = new Uint16Array(buf);
      for (var i=0, strLen = data.length; i<strLen; i++) {
        bufView[i] = data.charCodeAt(i);
      }
	    PDFJS.getDocument(buf);
    }

To copy to clipboard, switch view to plain text mode 

but still i have a problem sending the file to pdf.js library
I am reading the file and send the QBytearray directly to the js file (UInt8Array) but it is not able to load the pdf file

Do have any ideas how to could i read the file and send it to the pdf library?