0

実現したいこと

javascriptでWEBからGCPのstorageに保存した画像を取得し、そのまま画像を再アップロードしたいです。

抱えている課題

GCPのstorageに保存した画像のURLは取得できている状態ですが、そのURLの情報から画像としてStorageへ再アップロードする方法が分かりません。

試したことと結果

まず、元々のアップロードは、以下のようにオーソドックスなfile形式で画像をローカルのPCのディスクから選択し、
FileListへ入れてアップロードしています。

・htmlファイル

<input type="file" name="datafile" id="logo-img-input"">

・JSファイル

let files = document.getElementById('logo-img-input').files;
let image = files[0];
let file_path = "xxx.jpg";
///画像アップロード
let ref = firebase.storage().ref().child(file_path);
ref.put(image, metadata).then(function(snapshot) {
    alert('アップロードしました');
});

ではこのアップロードした画像を次に取得する方に関して、
まず上記コードでは省略していますが、httpから始まるURLを事前に取得してDBに保存してあり、
現状はDBから直接読んでいるので、画像までのURLは持っている状態です。
こちらのURLより、再度画像を取得し、そのまま特に画像には手を加えずアップロードができる状態にしたいです。

試したこととしては、今はファイル形式のinputのパターンをそのまま再現すればコードもそのまま使用できるため都合が良いと考え、仮に今このURLを
https://storage.cloud.google.com/xxx.jpg
とすると、

JSファイル

/// fileを作成
let file = new File([], 'https://storage.cloud.google.com/xxx.jpg',
{
    lastModified: new Date(2017, 1, 1),
    type: "image/jpeg",
});

///FileListの形式にする
const dt = new DataTransfer();
dt.items.add(file);
const fileList = dt.files;
console.log("fileList : ", fileList);

let image = fileList[0];
let file_path = "xxx.jpg";
///画像アップロード
let ref = firebase.storage().ref().child(file_path);
ref.put(image, metadata).then(function(snapshot) {
    alert('アップロードしました');
});

としても、FileListの出力が以下のようにsizeが0になってしまって、うまく取り込めていないようです。
(inputから画像を入れた時は、これとの差分はsizeにファイルサイズ(バイト数)が入っていることくらいしかなさそうでした。)

File {name: "https://storage.cloud.google.com/xxx.jpg", lastModified: 1485874800000, lastModifiedDate: Wed Feb 01 2017 00:00:00 GMT+0900 (日本標準時), webkitRelativePath: "", size: 0, …}
lastModified: 1485874800000
lastModifiedDate: Wed Feb 01 2017 00:00:00 GMT+0900 (日本標準時) {}
name: "https://storage.cloud.google.com/xxx.jpg"
size: 0
type: "image/jpeg"
webkitRelativePath: ""
proto: File

また、念のためアップロードされたファイルを見てみても、一応jpgファイルとして扱われているようですが、ファイルサイズが0KBで保存されており、DLしてもからの異常なファイル扱いで表示されませんでした。

Blob形式を使えば何とかできるのかもしれないとは思ったのですが、
Blobの取り扱いをしたことがなく、GCP Storageの画像情報をどう扱えば良いのかよく分かりませんでした。

一方で、imgタグのimg.srcに上記のパスを入れると正しく画像が表示されることは確認できました。
例えばこのimgタグから、inputしてFileListへ追加するようなことができても解決となりますが、その方法もよく分かりませんでした。

背景

一応上記のようなことを行いたい背景としては、現在アカウント登録/管理のシステムを作っていて、
初めに一度画像を登録したあとに、登録した情報を編集する際、画像自体も編集する場合は新しいもので登録するだけなので良いのですが、画像以外の情報を更新して、画像には変更がない場合は前回のものをそのままアップロードして最新のデータとする。といった仕組みにしたいと考えております。

こちらずっと解決できず、どなたか解決策がお分かりになる方がいらっしゃいましたら、
大変お手数ですが、ご教授いただけると大変助かります。

2
  • 前提条件で恐縮ですが、画像の変更は新しい画像をアップロードすることで変更して、画像を変更しない場合はアップロードしなければいいのではないでしょうか?
    – keitaro_so
    2021年1月28日 12:23
  • ありがとうございます。一部の部分はそれでも良いのですが、今回は対応するdivの並び順が変わるなどの機能が入っており、そちらの複雑な並び順を管理するよりは画像側で調整できるとバグが出にくいものになっており、なんとかならないかなといった状況です。
    – k_ele
    2021年1月28日 12:36

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。