localStorageから読みだした画像ファイルを、DataTransferで作成した input type="file"にセットしたい

Question

以下の①～④ができるようにしたいです。
①ユーザーが画像ファイル選択
②localStrageに①のファイルを保存
③ページ再読み込み時に②で保存した画像ファイルを読み出し
④new DataTransferで input type="file" 要素を新たに作成する際に、③で読み出した画像ファイルをセット
⑤submitを行う

ユーザーが画像ファイルを選択して、そのファイルを、DataTransferで新たに作成した、input type="file"要素にセットするところまでは、確認できています。（localStrage不使用）

let uploadImage = document.getElementsByName("uploadImage").item(0);
let inputTemplate = document.createElement('input');
inputTemplate.setAttribute("name", "uploadImage");
inputTemplate.type = 'file';   

uploadImage.addEventListener('change', e => {
  const {files} = e.target;
  const dt = new DataTransfer();
  dt.items.add(files[0]);
  inputTemplate.files = dt.files;
  dt.setData("Files", files[0]);
  let file = dt.files;
  let form = document.getElementById("form");
  form.appendChild(inputTemplate);
}, false)

問題は、localStrageが絡んできた時です。
localStrageに画像を保存するために、Canvasでbase64にエンコードしています。
読み出し時に、base64のデコードを行いましたが、このデータを、どのようにして、new DataTransferで新たに作成する input type="file" 要素にセットすればいいのか不明です。

let  uploadImage = document.getElementsByName("uploadImage").item(0);
    
uploadImage.addEventListener('change', e => {
  var reader = new FileReader();
  reader.onload = function() {
    var img = new Image();
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      canvas.width=img.width;
      canvas.height=img.height;
      context.drawImage(img,0,0);
      localStorage.setItem("hoge", canvas.toDataURL("image/jpeg"));
    };
    img.src=reader.result;
  };
  reader.readAsDataURL(uploadImage.files[0]);
    
  var imgres = new Image();
  imgres.onload = function() {
  var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.width=imgres.width;
    canvas.height=imgres.height;
    context.drawImage(imgres,0,0);
  }
  let imageData = localStorage.getItem("hoge");
  let decodeImage = imageData.split('data:image/jpeg;base64,')[1];
  let result = atob(decodeImage);
  console.log(result);
// base64のデコードが正常に完了している。これをどのようにしてDataTransferで作成するinput type="file"にセットすればいいか不明
}, false)

やり方が違いますが、以下のリンク先でファイルの選択状態まで復元できている方がいるので、できないことはないのだと思います。
アップロードファイルを localStorage に保存して、再アクセス時にファイルを復元する
ただ、このページ記載の方法だと、不完全なコードなのかうまく動かない状態でして、困っています。

どなたか、DataTransferで作成するinput type="file"にセットする方法を、ご存じの方がいればご教授いただきたいです。
よろしくおねがいします。

Comments

[int32_t]

質問文のコード、画像形式を jpeg に変換する意図がない場合は Image は不要です。
reader.onload の中は
localStorage.setItem("hoge", reader.result);
だけでいいです。

Answer 1

atob()の結果のresult は変な文字列表現のバイナリなので、それを Uint8Array に変換して、new File() で File インスタンスを作って DataTransfer にセットすればいいんじゃないでしょうか。

(本当に動くかどうかは未検証です)
追記: 参考ページに似たようなことが書いてあることに気付きました。参考ページを読んで、さらに質問文にはDataTransfer経由でFileをセットするコードを既に書いてらして、何がわからないんでしょう。

Comments

[nakanohitobot]

ご回答ありがとうございます。
参考ページを参照に試してみたところ、DataTransferにセットすることができました。（おっしゃるとUint8Arrayに変換後、Fileインスタンスを作成しました）
しかし、最初ユーザーがファイルを選択した時と、Uint8Arrayに変換後に、Fileインスタンスを作成した時では、File.sizeプロパティの値が異なってしまいます。
sizeプロパティは、インスタンス作成時にも手動で設定することは不可能なようで、困っております。

[int32_t]

> File.sizeプロパティの値が異なってしまいます。

質問文のコードのようにcanvasに描画してjpegにエンコードしていると、もとのファイルがjpegのときでさえバイナリのサイズは異なることが多くなります。

canvasを経由しなくてもサイズが変わるようだと、どこかバグってます。

[nakanohitobot]

canvas経由をやめて、参考サイトのように、new FileReaderを使用しました。

ただ、これでもファイルサイズが異なってしまうため、どうしようかと思いましたが、
どうやら、base64のデコード結果を、直接new Fileに渡しているのが、まずかったようです。
一度new Blobに渡してから、Blob → Fileへの変換を行うと、問題ありませんでした。

ひとまずやりたいことが出来ました！
ありがとうございました。

Answer 2

type=fileにセットすることはできません
逆にセットする必要はなく、submitやfetchなどでサーバーに送ることはできます

Comments

[nakanohitobot]

ご回答ありがとうございます。
参考先のページが、結果的に同じことができたようで（ユーザーがファイルを選択したときの復元）試してみようとおもいました。