初心者向けにJavaScriptでバイナリファイルを読み込む方法について現役エンジニアが解説しています。バイナリファイルとは、0と1でデータを管理しているコンピュータからみたファイルのことです。読み込む方法にはFile APIを使う方法があります。fileReaderの書き方や使い方を解説します。 readAsText ( file ) ; // fileReader.readAsBinaryString ( file ) ; // 試してみよう！. } ステム学会学術研究発表大会に出ます。, 楽天カードの利用明細csvを読みこんでツリーマップを表示する. FileReaderでは、Fileオブジェクトのファイルを実際に読み込みます。プレビューとして表示するというような動作はFileReaderを利用して行います。 まずはコンストラクタからインスタンスを作ります。 var reader = new FileReader(); FileReaderの読み込みメソッド FileReader は InputStreamReader の面倒さを解消するために用意されたサブクラスです。InputStreamReader より簡単に扱えますが、文字コードには常に省略時文字コードが用いられます。 そこでボタンを新たに作ってみることにした。, 見えるボタンの裏に　input tyle="file"　を搭載した隠しボタンを作るよ, accept=".txt" で、拡張子が"txt"のファイルを選択表示すると親切。, 隠しボタンは、cssで非表示にするなり透明にするなりして See the Pen File API Test by catprogram (@catprogram) on CodePen. 実現したい事読み込んだテキストファイルをinput要素として取得・表示させたいと考えております。 IE11での動作確認をしたところ、ファイル選択は出来るのですが、input要素として表示されません。設定してあるアラートも表示されません。chromeとedgeでは動作確認がとれましたのでロジックに関 FileReader オブジェクトを使用すると、Web アプリケーションは、ユーザーのコンピュータに保存されているファイル (または生データ バッファ) の内容を非同期に読み取ることができます。File または Blob オブジェクトを使用して、読み込むファイルまたはデータを指定します。 FileReader にはファイルを非同期で読み込むためのオプションが 4 つあります: FileReader.readAsBinaryString(Blob|File) FileReader API. Improve this question. | 2015年の JavaScript においては、バイナリデータはもはや扱いづらい困った存在ではありません。 ... FileReader#readAsText(..., 文字コード) ... は、第二引数に文字コードを指定できます。 result プロパティにはファイル/ブロブ データがバイナリ文字列として格納されます。各バイトは、0～255 の範囲の整数で表されます。, FileReader.readAsText(Blob|File, opt_encoding) とにかく見えないようにしておこう。, あとは、CSSで2つのボタンをうまーく重ねるか、 UTF-8ならそのまんまでいいし、shift-jisなら、パラメータに コードの説明. ブラウザによって形状が全く違うんだよ。 そのような場合、FileOutputStreamクラスを用いれば、指定した文字コード・改行コードを採用することができます。 なお、FileWriterクラスを用いる場合は、setPropertyで実行環境のデフォルトを変更しても文字コードは変更できませんでした。 FileReader objects can read from a file or a blob, in one of three formats: String (readAsText). fileList ではファイルの属性を取り出すだけでしたが、fileReader では、それに加えて、ファイルの中身を取り出す機能を … result ) ) ; } . FileReader オブジェクトは次の3つのフォーマットで、ファイルや blob を読み込むことができます。: 文字列 (readAsText). result プロパティにはファイル/ブロブ データがテキスト文字列として格納されます。デフォルトでは、この文字列は「UTF-8」としてデコードされます。オプションのエンコード パラメータを使用すると、他の形式を指定できます。, FileReader.readAsDataURL(Blob|File) By Jack Misteli. お話にならないのだ。, HTML5になって、ローカルファイルを手軽に扱えるようになったね。 readAsDataURL (Fileオブジェクト) ファイルデータをFileReaderにdataURL形式で読み込みます。 以下のサンプルでは、ファイル選択ダイアログで指定した画像ファイルを、divタグ内に書き出します。 ご自身のPCにある画像ファイルを指定してみて下さい。 JavaScriptでファイルを「同期、非同期」で読む込む方法です。同期はスクリプトの実行と共に連続してファイルを読み込みます。非同期はスクリプトの実行とは別で一連のイベントが完了後にファイルを … FileReader の result プロパティは、ファイルの内容を返します。このプロパティは、読み取り操作が完了した後でのみ有効で、データの形式は、読み取り操作を開始するために使用されたメソッドによって … JavaScriptのwhile文について初心者向けに図で解説していきます。これを読めば、while文の書き方、breakとcontinueの違い、無限ループとは何か、do while文とは何かが理解できるでしょう。 readAsDataURL メソッドは、指定されたBlob または File の内容を読み込むために使用されます。読み込み操作が終了すると、readyState が DONE となり、loadend が発生します。このとき、result 属性には、ファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。 HTML/JavaScriptの文字コードがUTF-8以外になっていないか setTimeout(project_load,500); としてその中の関数から reader.result を呼んでいますが、エラーになると思います。 読み込もうとする命令に文字コードを指定するなんて、透視能力でもない限りできない。, File AIPの　FileReader.readAsArrayBufferでファイルを読み込んで、 result プロパティにはファイル/ブロブ データがテキスト文字列として格納されます。デフォルトでは、この文字列は「UTF-8」としてデコードされます。オプションのエンコード パラメータを使用すると、他の形式を指定できます。, FileReader.readAsDataURL(Blob|File) result プロパティには、ファイル/ブロブ データが ArrayBuffer オブジェクトとして格納されます。, 今回はテキストファイルなんで、FileReader.readAsText　を使えばいいじゃん！ FileReaderでは、Fileオブジェクトのファイルを実際に読み込みます。プレビューとして表示するというような動作はFileReaderを利用して行います。 まずはコンストラクタからインスタンスを作ります。 var reader = new FileReader(); FileReaderの読み込みメソッド 文字コードを気にするときは、FileReader/FileWriterを使ってはいけないという話。 この場合、新しいものは文字化けする。 File file = new File("file_0"); BufferedReader b = new BufferedReader(new FileReader(file)); File file_w = new File("file_0_output"); FileWriter fw = new FileWriter(file_w); String s; while((s = b.readLine())!=null){ fw.write(s+"\n… 　FileReader.readAsText(fileオブジェクト, 'shift-jis'); 　文字列(string)に変換する（encoding.jsのcodeToSting関数を使う）, 普通に input type="file" を使ってもいいんだけど、 Data URI Schemeなどで任意のデータのBase64文字列が必要な場合がある。 大体のブラウザでwindow.btoa()及びwindow.atob()が存在するが これに渡せる文字列には制限があり、文字コードが0xff以下でないとエラーになる。 Base64文字列を得る方法として以下を考えた 　　　　　　↓ JavaScriptで文字コードを変換するライブラリを作成されている方がいたので、今回はこちらを使わせていただきました。 JavaScriptで文字コード変換ライブラリ作ってみた | 圧縮電子どうのこうの. https://ja.javascript.info/file. ArrayBuffer (readAsArrayBuffer). 文字ファイルを読み込むための簡易クラスです。このクラスのコンストラクタは、デフォルトの文字エンコーディングとデフォルトの byte バッファーのサイズが適切に設定されていることを前提としています。 FileReader オブジェクトは次の3つのフォーマットで、ファイルや blob を読み込むことができます。: 文字列 (readAsText). Data url, base-64 encoded (readAsDataURL). さて、上のコードでは FileReader オブジェクトの readAsText() メソッドを呼ぶ前に onload イベントハンドラをセットしました。 FileReader にはもっと様々なイベントが用意されていますが、それらを毎回セットしてから呼び出すと少々煩雑になりがちです。 BufferedReaderクラスで読み込む前に処理を加えることで、別の文字コードに変換することも可能です。 先ほどのサンプルコードでは、FileReaderクラスのオブジェクトを指定してBufferedReaderクラスで読み込みを行いました。 どちらかお好きな方やってください。（私はスクリプト書いた）, CSSで重ねるのはIEでハマるらしいので、 String オブジェクトのインスタンスメソッドである charCodeAt は、文字列の指定した位置にある文字の UTF-16 文字コードを取得します。ここでは String オブジェクトの charCodeAt メソッドの使い方につい … そういう様々な文字コードのファイルでも、正しく読み込んで表示しなくては 文字コードがUTF-8のファイルの場合はうまく表示できましたが、Shift-jisのファイルの場合は文字化けしてしまいました。 対応する文字コードを変更したい場合、readAsText()の第二引数で指定できます。 JavaScript FileReader は InputStreamReader の面倒さを解消するために用意されたサブクラスです。InputStreamReader より簡単に扱えますが、文字コードには常に省略時文字コードが用いられます。 ファイルを、文字列として読み込みます。 概要 名前 readAsText 所属 FileReader IDL void readAsText (Blob blob, optional DOMString label); 仕様書 https://w3c.github.io/FileAPI/#dfn-readAsText 説明. Evan Plaice. UTF-8ならそのまんまでいいし、shift-jisなら、パラメータに これが大切です。以下、そのまま引用。. Published on January 23, 2020; While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. fileReader. ブログを報告する, 【JavaScript & HTML5 】文字コードに関係なくテキストファイルを正しく読み込む, JavaScript で File API を使用してファイルを読み取る - HTML5 Rocks, 【JavaScript】 toLocaleDateStringで日付の形式変換（和暦もできるよ）. どちらかお好きな方やってください。（私はスクリプト書いた）, CSSで重ねるのはIEでハマるらしいので、 JavaScriptでCSVファイルを読み込んだものをWebサイト内に表示したいことがある。 例えば下記のようなCSVファイルを読み込もうとする場合… りんご, 100 バナナ, 200 みかん, 300 JavaScriptはこのようになる。 13.1k 4 4 gold badges 68 68 silver badges 93 93 bronze badges. 　文字列(string)に変換する（encoding.jsのcodeToSting関数を使う）, 普通に input type="file" を使ってもいいんだけど、 まず【既存のテキストファイルを読み込む】というところで引っかかったので覚書しとく。, テキストファイルといっても、文字コードがshift-jisだけならまだいいんだけど、 ArrayBufferオブジェクトとして内容を受け取るのだ。 しかし、多くのケースではファイルの内容を読み込む必要はありません。 スクリプト書ける人はそっちの方が手軽。, テキストファイルの改行をHTMLの改行（brタグ）にreplaceするなど // 要素を取得 var element = document.getElementById( "hoge" ) ; // 読み込むファイル var file = element.files[0] ; // 1つ目のファイル // FileReaderを作成 var fileReader = new FileReader() ; // 読み込み完了時のイベント fileReader.onload = function { console.log( fileReader.result ) ; // バイナリ文字列 } // 読み込みを実行 fileReader.readAsBinaryString( file ) ; const file = input.files[0]; // File オブジェクト const reader = new FileReader(); // FileReader オブジェクト reader.onload = => { // 読みんこんだ後のコールバック const pre = document.getElementById('pre1'); pre.innerHTML = reader.result; }; reader.readAsText(file); // 読み込み開始 FileReader.readAsBinaryString() - バイナリ文字列として読み込む. FileReaderクラスを使う場合には基本的に1文字ずつ読み込んでいきます。まとめて読むということが出来ませんので、効率はかなり悪いです。 read public int read() throws IOException 単一の文字を読み込みます。 戻り値: 読み込まれた文字。 result ) ; resultElement. ArrayBuffer (readAsArrayBuffer). 外部ファイルを読み込むためにはFileReaderオブジェクトを利用します。FileReaderオブジェクトの使い方は色々ありますが、ここではテキストファイルを読み込むために必要な次の3つを押さえておきましょう。 2015年の JavaScript においては、バイナリデータはもはや扱いづらい困った存在ではありません。 ... FileReader#readAsText(..., 文字コード) ... は、第二引数に文字コードを指定できます。 var blob = new Blob ( ["あいう"] , {type:"text/plain;charset=UTF-8"}); var file_reader = new FileReader(); file_reader.onload = function (e) { var binary = file_reader.result; var base64 = btoa(binary); console.log (binary); console.log (base64); }; file_reader.readAsBinaryString(blob); 上に戻る. ョンは、ユーザーのコンピュータに保存されているファイル (または生データ バッファ) の内容を非同期に読み取ることができます。File または Blob オブジェクトを使用して、読み込むファイルまたはデータを指定します。 案件で使用する場合、あらかじめ使用する想定の文字コードを決めておくなど、何らかの対応が必要になりそうです。 【参考】 FileReader - Web API インターフェイス | MDN; JavaScript でのローカル ファイルの読み込み - HTML5 Rocks 1 それぞれの特徴2 “BufferedReader”の方が良い理由3 readLineを使って読み込む方法4 文字コードを変換して読み込む5 まとめ初心者の方がJavaでファイルを読み込むためのクラスとして一番に思 これが大切です。以下、そのまま引用。. FileReader API. ブラウザは文字列をデコードし、イメージを表示します: blob を base64 に変換するためには、組み込みの FileReader オブジェクトを使用します。それは複数のフォーマットで blob からデータを読むことがで … 中にはUTF-8だったりEUCだったり、UTF-16とかもうね・・・ ョンは、ユーザーのコンピュータに保存されているファイル (または生データ バッファ) の内容を非同期に読み取ることができます。File または Blob オブジェクトを使用して、読み込むファイルまたはデータを指定します。 案件で使用する場合、あらかじめ使用する想定の文字コードを決めておくなど、何らかの対応が必要になりそうです。 【参考】 FileReader - Web API インターフェイス | MDN; JavaScript でのローカル ファイルの読み込み - HTML5 Rocks 1 それぞれの特徴2 “BufferedReader”の方が良い理由3 readLineを使って読み込む方法4 文字コードを変換して読み込む5 まとめ初心者の方がJavaでファイルを読み込むためのクラスとして一番に思 これが大切です。以下、そのまま引用。. | と設定すれば読み込めそうだ。 初心者向けにJavaScriptでCSVファイルを読み込む方法について現役エンジニアが解説しています。CSVファイルはカンマで区切られたデータのことです。JavaScriptでCSVファイルを読み込むにはFileReaderクラスを使います。HTMLでフォームを作成して読み込んでみましょう。 外部ファイルを読み込むためにはFileReaderオブジェクトを利用します。FileReaderオブジェクトの使い方は色々ありますが、ここではテキストファイルを読み込むために必要な次の3つを押さえておきましょう。, 2015年の JavaScript においては、バイナリデータはもはや扱いづらい困った存在ではありません。 ... FileReader#readAsText(..., 文字コード) ... は、第二引数に文字コードを指定できます。 コードの説明. あくまでブラウザの中だけのお・は・な・し　だよん。. FilereaderオブジェクトのreadAsBinaryStringメソッドを利用したバイナリファイルの解析は 同メソッドで読み取ったデータはJavaScriptの文字列として取得できます。 files [ 0] ; fileReader. しかし、多くのケースではファイルの内容を読み込む必要はありません。 File APIでローカルからCSVファイルを読み込んで、ブラウザ上で表示してみます。 サンプルコード CSVファイルを読み込む場合、readAsText()メソッドを使用します。 HTML JavaScript CSVファイルを読み込むデモページ CSVは以下の2つで試してみました。 sample_utf8.csv FileReader を利用してJavaScriptで指定されたファイルの内容を読み込むコードを紹介します。 概要 FileReader オブジェクトを利用すると、ファイル参照ボックスで指定されたファイルや、Webブラウザにドラッグ＆ドロップされたファイルの内容にアクセスできます。 　　　　　　↓ まずは、File APIの1つである「FileReader」の活用について見ていきましょう！ 「FileReader」を活用するとBlobデータをJavaScriptから読み込むことができるようになります。例えば、適当な文字列のBlobデータを用意します。 FileReader クラスを使用すると、Blob や File オブジェクトが保有するバッファの中身に、 読み取りアクセスを行う事ができます 。 英語を母国語とした、システムでは上記ソースは文字ストリームで構成されシンプルなオブジェクトですが、 FileReader,BufferdReaderに文字コードが設定できない点は、Jdk1.1API作成時の設計ミスと思われても仕方がないです。 サンプルのダウンロードと実行方法 サーバーにUPされるわけじゃないから、警戒しなくても大丈夫。 ブラウザ上で編集する「Webテキストエディタ」を作るという案件がありまして。 ArrayBuffer (readAsArrayBuffer). onload = function () {. データ url, base-64 エンコード (readAsDataURL). blob ではないオブジェクトやデータから Blob を生成する簡単な方法は Blob() コンストラクターを使用することです。他にも、slice() メソッドを利用し、他の blob データからその一部を blob として生成する方法があります。ユーザーのファイルシステム上のファイルの Blob オブジェクトを取得するには、Fileのドキュメントをご覧ください。 Blob オブジェクトを受け入れる API も、Fileのドキュメントに掲載しています。 File 参照を取得したら、FileReader オブジェクトをインスタンス化してコンテンツをメモリに読み取ります。読み込みが終了すると、リーダーの onload イベントが開始され、result 属性を使用してファイル データにアクセスできるようになります。　 JavaScriptでCSV読み込み. 文字コードがUTF-8のファイルの場合はうまく表示できましたが、Shift-jisのファイルの場合は文字化けしてしまいました。 対応する文字コードを変更したい場合、readAsText()の第二引数で指定できます。 JavaScript It's on our list, and we're working on it! javascript csv filereader jquery-csv  Share. こんにちは！エンジニアの中沢です。 Javaにはテキストファイルを読み込むFileReaderクラスやBufferedReaderクラスがあります。 この記事では、 FileReaderクラスとは FileReaderクラス使い方 FileReaderクラスのreadメソッドの使い方 console. 方法はJavaScriptのFileReaderオブジェクトを使用します。 サンプルとして画像をリアルタイムでブラウザに反映できるものを作ってみました。 動作 百聞は一見にしかず、動作は以下のようになります。 See the Pen image-FileReader by yuma oyaizu (@yaizuuuu) on CodePen. UTF8なんだけど、普通にFileReader使うと文字壊しちゃうのね。 そこで、上記のことを参考に、File（もしくは、Reader）を引数にすると 文字コード が指定できないと思い、InputStreamReaderを使ってみるとうまく行った。 FileReader は InputStreamReader の面倒さを解消するために用意されたサブクラスです。InputStreamReader より簡単に扱えますが、文字コードには常に省略時文字コードが用いられます。 そこでボタンを新たに作ってみることにした。, 見えるボタンの裏に　input tyle="file"　を搭載した隠しボタンを作るよ, accept=".txt" で、拡張子が"txt"のファイルを選択表示すると親切。, 隠しボタンは、cssで非表示にするなり透明にするなりして See the Pen File API Test by catprogram (@catprogram) on CodePen. FileReaderでは、Fileオブジェクトのファイルを実際に読み込みます。プレビューとして表示するというような動作はFileReaderを利用して行います。 まずはコンストラクタからインスタンスを作ります。 var reader = new FileReader(); FileReaderの読み込みメソッド | と設定すれば読み込めそうだ。 初心者向けにJavaScriptでCSVファイルを読み込む方法について現役エンジニアが解説しています。CSVファイルはカンマで区切られたデータのことです。JavaScriptでCSVファイルを読み込むにはFileReaderクラスを使います。HTMLでフォームを作成して読み込んでみましょう。 外部ファイルを読み込むためにはFileReaderオブジェクトを利用します。FileReaderオブジェクトの使い方は色々ありますが、ここではテキストファイルを読み込むために必要な次の3つを押さえておきましょう。, ＜主人＞・・・いつも偉そう。言ってることは正しいことが多い。感情すらも理論的に判断する。. HTML/JavaScriptの文字コードがUTF-8以外になっていないか setTimeout(project_load,500); としてその中の関数から reader.result を呼んでいますが、エラーになると思います。 ステム学会学術研究発表大会に出ます。, 楽天カードの利用明細csvを読みこんでツリーマップを表示する. is: accepted, not-accepted, answered, not-answered. result プロパティにはファイル/ブロブ データがバイナリ文字列として格納されます。各バイトは、0～255 の範囲の整数で表されます。, FileReader.readAsText(Blob|File, opt_encoding) readAsBinaryString()は、FileReaderのメソッドです。ファイルを、バイナリ文字列として読み込みます。 概要 名前 readAsBinaryString 所属 FileReader IDL void readAsBinaryString (Blob blob); 仕様書 ファイルの中身は文字化けしてないだろうか？ JavaScript入門 [HTML5編] ... ローカルにあるファイルを読み込むには、FileReaderを使います。 ... 以下のサンプルでテキストファイルを読み込みますが、このページの文字コードがUTF-8なので、 UTF-8形式のテキストでないと字化けします。 外部ファイルを読み込むためにはFileReaderオブジェクトを利用します。FileReaderオブジェクトの使い方は色々ありますが、ここではテキストファイルを読み込むために必要な次の3つを押さえておきましょう。 しかし、多くのケースではファイルの内容を読み込む必要はありません。 あくまでブラウザの中だけのお・は・な・し　だよん。. var file = element. コードポイントが0x010000以降の文字はサロゲートペアにより4バイトで表現されるため、返される文字数が2倍になります。 new String( '' ).length; // 6 が返される appendChild ( new Text ( this. 　　　　　　↓ html5では、ローカルのファイルをブラウザ上で直接、取り扱えるようになった。ファイルの読み取りと書き込みを試そう。 (1/2) サンプルコード 　　　　　　↓ FileReader; JavaScriptで画像を送信する ==中級者向け== CSSでボタンのデザインをカスタマイズ. ブラウザ上で編集する「Webテキストエディタ」を作るという案件がありまして。 log ( this. FileReader にはファイルを非同期で読み込むためのオプションが 4 つあります: FileReader.readAsBinaryString(Blob|File) FileReader API. Reading & Processing Files with the JavaScript FileReader API JavaScript. ArrayBuffer (readAsArrayBuffer). JavaScript入門 [HTML5編] ... ローカルにあるファイルを読み込むには、FileReaderを使います。 ... 以下のサンプルでテキストファイルを読み込みますが、このページの文字コードがUTF-8なので、 UTF-8形式のテキストでないと字化けします。 初心者向けにJavaScriptでonloadを使う方法について解説しています。ページが読み込まれたタイミングや画像が読み込まれたタイミングなどで何かイベントを起こすことができます。普段使っているサイトでもよく見られるので、ぜひ書き方を覚えておきましょう。 データ url, base-64 エンコード (readAsDataURL). BufferedReaderクラスで読み込む前に処理を加えることで、別の文字コードに変換することも可能です。 先ほどのサンプルコードでは、FileReaderクラスのオブジェクトを指定してBufferedReaderクラスで読み込みを行いました。 どちらかお好きな方やってください。（私はスクリプト書いた）, CSSで重ねるのはIEでハマるらしいので、 String オブジェクトのインスタンスメソッドである charCodeAt は、文字列の指定した位置にある文字の UTF-16 文字コードを取得します。ここでは String オブジェクトの charCodeAt メソッドの使い方につい … そういう様々な文字コードのファイルでも、正しく読み込んで表示しなくては 文字コードがUTF-8のファイルの場合はうまく表示できましたが、Shift-jisのファイルの場合は文字化けしてしまいました。 対応する文字コードを変更したい場合、readAsText()の第二引数で指定できます。 JavaScript FileReader は InputStreamReader の面倒さを解消するために用意されたサブクラスです。InputStreamReader より簡単に扱えますが、文字コードには常に省略時文字コードが用いられます。 ファイルを、文字列として読み込みます。 概要 名前 readAsText 所属 FileReader IDL void readAsText (Blob blob, optional DOMString label); 仕様書 https://w3c.github.io/FileAPI/#dfn-readAsText 説明. JavaScriptは主にブラウザ上で動くので、ここではユーザーがブラウザ上で選択したテキストファイルを読み込む方法について説明します。 ファイルを読み込むためにはFile APIを利用します。FileReaderオ … FileReader. 文字コードを変換して読み込む方法. と設定すれば読み込めそうだ。 HTML/JavaScriptの文字コードがUTF-8以外になっていないか setTimeout(project_load,500); としてその中の関数から reader.result を呼んでいますが、エラーになると思います。 そこで登場するのがFileReaderオブジェクトです。このオブジェクトがBlobの読み込みを担当します。 これの特徴は非同期読み込みであるということです。JavaScriptで非同期といった場合、意味するところはコールバックで結果を得るということです。 1. FileReader.readAsBinaryString(Blob|File) result プロパティにはファイル/ブロブ データがバイナリ文字列として格納されます。各バイトは、0～255 の範囲の整数で表されます。 FileReader.readAsText(Blob|File, opt_encoding) また、応答のsoapメッセージの文字コードは受信した文字コードでシリアライズ（javaオブジェクトからxmlへの変換）されます。 wasのjax-rpcエンジンは、utf-8とutf-16の文字コードでの変換のみサポート … I tried to use return reader.result from the getBase64() function (rather than using console.log(reader.result)) because i want to capture the base64 as a variable (and then send it to Google Apps Script).I called the function with: var my_file_as_base64 = getBase64(file) and then tried to print to console with console.log(my_file_as_base64 ) and just got undefined. public class FileReader extends InputStreamReader.