Announcement

Collapse
No announcement yet.

FileReader api

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    FileReader api

    Hi Brigde.Net,

    I was wondering if FileReader api is available?
    I see File, FileList and Blob , but not FileReader?

    Thanks,

    Guido

    #2
    Hi guidovanhils,

    There is a similar feature request in GitHub 1815. We have no firm time frame for this feature:
    The FileReader class is part of a Working Draft spec and as a general rule we wouldn't add this API directly in Bridge.
    Probably better as Bridge.Html5.FileReader NuGet package.
    The issue is marked with up-for-grabs tag and we would appreciate somebody from our community implements that.

    Comment


      #3
      Hi Leonid,

      Thanks for reply

      I just made a stub for FileReader:

       ///<summary>
      ///Stub for the js FileReader
      ///</summary>
      [ExternalAttribute]
      public class FileReader
      {
          public Action<Event<HTMLInputElement>> onload;
          public Action<Event<HTMLInputElement>> onloadend;
      
          public extern void readAsDataURL(File f);
          public extern void readAsBinaryString(Blob blob);
          public extern void readAsArrayBuffer(Blob blob);
          public extern void readAsText(Blob blob);
      };
      its working fine.

      Comment


        #4
        Improved, but not tested yet version:

            [External]
            [Namespace(false)]
            public enum ReadyState
            {
                Empty = 0,
                Loading = 1,
                Đ’one = 2
            }
        
            [External]
            [Namespace(false)]
            public sealed class FileReader : EventTarget
            {
                [Convention(Notation.LowerCase)]
                public extern object Result { get; }
        
                [Convention(Notation.LowerCase)]
                public extern ReadyState ReadyState { get; }
        
                [Convention(Notation.LowerCase)]
                public extern Action<Event<HTMLInputElement>> OnLoad { get; set; }
        
                [Convention(Notation.LowerCase)]
                public extern Action<Event<HTMLInputElement>> OnLoadStart { get; set; }
        
                [Convention(Notation.LowerCase)]
                public extern Action<Event<HTMLInputElement>> OnLoadEnd { get; set; }
        
                [Convention(Notation.LowerCase)]
                public extern Action<Event<HTMLInputElement>> OnProgress { get; set; }
        
                [Convention(Notation.LowerCase)]
                public extern Action<Event<HTMLInputElement>> OnError { get; set; }
        
                [Convention(Notation.LowerCase)]
                public extern Action<Event<HTMLInputElement>> OnAbort { get; set; }
        
                [Name("readAsDataURL")]
                public extern void ReadAsDataUrl(Blob blob);
        
                [Name("readAsBinaryString")]
                public extern void ReadAsBinaryString(Blob blob);
        
                [Name("readAsArrayBuffer")]
                public extern void ReadAsArrayBuffer(Blob blob);
        
                [Name("readAsText")]
                public extern void ReadAsText(Blob blob);
        
                [Name("abort")]
                public extern void Abort();
            }
        UPDATE:

        Just tested.. It looks like it is there already... )))
        Last edited by Maxim; 2017-09-14 @ 01:27 PM.

        Comment


          #5
          The entire FileReader API is also part of our new Retyped.dom package.

          https://www.nuget.org/packages/retyped.dom

          Comment


            #6
            Here's a full sample using the Retyped and FileReader.

            https://deck.net/559afb9f66b48c1e148abff9f3ebab11

            using System;
            using Bridge;
            using Retyped;
            using static Retyped.dom;
            
            public class App
            {
                public static void Main()
                {
                    var input = new HTMLInputElement();
                    input.type = "file";
            
                    var img = new HTMLImageElement();
                    img.src = "";
                    img.height = 200;
                    img.alt = "Image preview...";
            
                    var btn = new HTMLButtonElement();
                    btn.innerHTML = "Preview";
                    btn.addEventListener("click", PreviewFile);
            
                    document.body.appendChild(input);
                    document.body.appendChild(img);
                    document.body.appendChild(btn);
                }
            
                public static void PreviewFile()
                {
                    var preview = document.querySelector("img").As<HTMLImageElement>();
                    var el = document.querySelector("input[type=file]").As<HTMLInputElement>();
            
                    var files = el.files[0];
                    var reader = new FileReader();
            
                    reader.addEventListener("load", new Action<Event>(ev =>
                    {
                        preview.src = reader.result.ToString();
            
                    }).As<EventListenerOrEventListenerObject>(), false);
            
                    if (files != null) {
                        reader.readAsDataURL((dom.Blob.Interface)files);
                    }
                }
            }

            Comment


              #7
              Just so I don't loose these samples, here's three options for setting reader load event listener.

              We need to do some work on Retyped to allow for easier configuration of Event listeners.

              // Option #1
              ((FileReader.Interface)reader).addEventListener(MSBaseReaderEventMapKeys.load, ev =>
              {
                  preview.src = reader.result.ToString();
                  return null;
              }, false);
              
              
              // Option #2
              reader.addEventListener(
                  MSBaseReaderEventMapKeys.load, 
                  new FileReader.addEventListenerFn<KeyOf<MSBaseReaderEventMap>>(ev =>
              {
                  preview.src = reader.result.ToString();
                  return null;
              }), false);
              
              
              // Option #3 (Issue #199)
              reader.addEventListener("load", new Action<Event>(ev =>
              {
                  preview.src = reader.result.ToString();
              
              }).As<EventListenerOrEventListenerObject>(), false);

              Comment

              Working...
              X