質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

2181閲覧

画像パスをファイルオブジェクトに変換したい

butisasa

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

2クリップ

投稿2021/11/30 12:18

編集2022/01/12 10:55

やりたいことは、input type=fileで画像をアップロードした際に、
ファイルオブジェクトが取得できると思いますが、
それをinput type=fileを使用せずに、手動で画像パスを指定して作成できるようにしたいです
なぜ手動でファイルオブジェクトを取得したいのかというと、useStateにinput type=fileで選択した画像を渡すようにしているのですが、useStateの初期値にデフォルト画像のファイルオブジェクトを指定したいからです。
そして、そのファイルオブジェクトをバックエンド側にpostしたいと思っています。

試したこととしては下記のソースのdefaultImgFileで作成したつもりなのですが、うまくいかず
知っている方いましたら、ご教授いただきたいです。

Test.tsx

1import React, { useState } from 'react' 2import Image from 'next/image' 3 4const defaultImgFile = fetch('/images/icon_default_logo.svg') 5 .then((res) => res.blob()) 6 .then((blob) => { 7 console.log(blob); 8 }); 9export const Test = ()=>{ 10 const [imgFile, setImgFile] = useState<File>(new File([defaultImgFile], 'icon_default_logo.svg', { 11 type: 'image/jpeg', 12 })) 13 ...etc 14 15 return( 16 //デフォルトIMGかinput type=fileでアップロードした画像のどちらかをラジオボタンで選択してpostするようにする 17 ) 18}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

<input type="file">へ値を指定するには、dataTransferを経由してFileListを作る、という手順を経由する必要があります(参考)。

valueに指定する形では回りませんので、refを取ってDOM操作で初期化する必要があります。

投稿2021/11/30 12:26

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問