Woleet widgets (version 2)

This package contains web widgets useful when you want to deal with Woleet proofs.

File Hasher widget

This web widget allows to preview a file and compute its SHA256 hash. It is easily embeddable in any web page. Since computing the hash of the proven file is the first step when you want to create or verify a Woleet proof, this widget is particularly useful. particularly useful.

The file can be dropped by the user, or its URL can be provided to the widget for an automated download. A preview is automatically displayed if the file is an image or a PDF file. When the user clicks on the preview, the file is displayed full screen. The SHA256 hash of the file is computed in background: callbacks can be used to get the hashing progress and result.

Build

npm i
npm run build

Integration

To integrate one or several widgets in a web page, first insert the following code:

<script>
  (function (d,s,i,f) {
    var js = d.createElement(s); var fjs = d.getElementsByTagName(s)[0];
    js.id = i; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'file-hasher-widget', '<script_path>/file-hasher-widget.js'));
  hasher = {
    pdfjsLibWorkerScriptPath: '<script_path>/pdf.worker.min.js',
    weblibsWorkerScriptPath: '<script_path>/woleet-hashfile-worker.min.js'
  };
</script>

Note that you need to replace <script_path> with the actual path of the script.

Then, instantiate the widget by creating a <div> tag with a class="file-hasher-widget" attribute:

<div class="file-hasher-widget"></div>

Configuration

Attributes

The following attributes can be set on <div> tag to configure the behavior of the widget (see Usage for more details).

• id - Identifier of the widget.

If not defined, it is generated by the widget (ex. file-hasher-widget-00becbf7-f2d5-37c5-1b48-961c7389c900).

• proxy - A proxy to download external files via XMLHttpRequest:

  • url - the proxy URL; DEFAULT: null

  • enabled - the proxy state; DEFAULT: false

• file - Downloaded file:

  • url - URL of the file to download (the URL must be local URL or must support CORS)

  • filename - The name of the file

• observers - Callback functions called by the widget:

  • downloadingStarted - is called once the file is started to download. Parameters: widgetId, url;

  • downloadingProgress - is called once the file downloading progress is changed. Parameters: widgetId, progress (in percent);

  • downloadingCanceled - is called once the file downloading is canceled. Parameters: widgetId;

  • downloadingFinished - is called once the file is downloaded. Parameters: widgetId, downloaded file;

  • downloadingFailed - is called once the file is failed. Parameters: widgetId, error code, response status, response message;

  Possible codes:

        url_not_found - the download url is wrong;
          
        cors - CORS policy issue;
  
        forbidden - the download is forbidden with this url
  
        download_unavailable - the download is unavailable for more information see the response message

  • hashingStarted - is called once the hashing process is started. Parameters: widgetId, hashed file, isPreviewable;

  • hashingCanceled - is called once the hashing process is canceled. Parameters: widgetId;

  • hashingProgress - is called once the hashing progress has changed. Parameters: widgetId, progress (in percents);

  • hashingFinished - is called once the file is hashed. Parameters: widgetId, hash, hashed file;

  • widgetReset - is called when the widget is reset. Parameters: widgetId;

Usage

There are several ways to configure the widget:

• set parameters using the config attribute of the HTML element:

<div class="file-hasher-widget" config='{"file": {"url": "http://pngimg.com/uploads/google/google_PNG19644.png"}, "observers": {"hashingFinished": "hashingFinishedObserver", "downloadingFinished": "downloadingFinishedObserver"}}'></div>

• set parameters as attributes of the HTML element:

<div class='file-hasher-widget'
     file='{"url": "http://pngimg.com/uploads/google/google_PNG19634.png"}'
     observers='{"hashingFinished": "test.hashingFinished"}'></div>

Note that if a parameter has nested parameters they can be set also as attributes by joining via '-' in lower case:

<div class='file-hasher-widget'
     id='file-hasher-widget-de'
     file-url='http://pngimg.com/uploads/google/google_PNG19634.png'
     observers-hashingFinished='window.hashingFinished'></div>

Dynamic initialization is also available. It can be done using the method init of the widget. There is an example in the file examples/file-hasher-widget-delayed-example.html

You can dynamically reset the widget while keeping the same configuration with the method reset of the widget.

Examples

Embed the widget in a regular web page

See examples/file-hasher-widget-example.html for an example about how to insert the widget in a web page.

Development

Proxy Server

To allow the widget to download a file, the file URL must be a local URL or must support CORS.

To easy testing during development, a Node.js server is provided. This simple server proxies any URL on the local URL http://localhost:3000/download?url=<URL>

Execute next command to launch the server:

cd ./server
node app

Proof Verifier widget

COMING SOON! Please contact [email protected].