[React.js]ローカルの画像・pdf・htmlをアップロードしてブラウザ内に埋め込みで表示させる方法

Webエンジニア
2023.08.19

はじめに

React.jsでローカルPCに保存されている画像・pdf・htmlファイルをアップロードしてViewerとしてブラウザ上に埋め込みで表示する方法を紹介したいと思います。

普通のWeb開発ではあまり見かけない利用シーンのため、表示方法がわからず苦労したため備忘録として記事にしておきます。

開発環境の構築

まずは実装するためにReactプロジェクトを作成するためにターミナルで以下のコマンドを実行してください。

今回はReactのプロジェクトを構築するにあたってcreate-react-appを用いてますが、検証環境を使うためですので、実開発で使うことはオススメしません。

$ npx create-react-app over-field-sample
$ cd over-field-sample
$ npm start

reactのスタートページが表示されることを確認してください。

create-react-app

create-react-app後に立ち上がるページ

最後にApp.tsx中から不要なコードを削除してください。

function App() {
return (
<div className="App">

</div>)
export default App

 

ローカルPCの画像アップロードと画面表示の復習

まずはローカルの画像をアップロードして、ブラウザにアップロードした画像を表示するところまでを復習しましょう。

細かいことは説明しなくてもWebエンジニアなら一度は実装がしたことがあると思うので細かい説明は省略します。

まずは画像データ(base64)を保存するためにuseStateを使って実装します。


// useStateをインポート 
import { useState } from "react"; 

function App() { 
   // 画像データを保持したり、更新したりするためのフック 
   const [img, setImg] = useState(null); 

   return <div className="App"></div>; 
} 
export default App;

次にimgタグを設置して、フックで定義した画像データ(img)をsrcに代入します

// useStateをインポート 
import { useState } from "react"; 

function App() { 
   // 画像データを保持したり、更新したりするためのフック 
   const [img, setImg] = useState(null); 

   return (
     <div className="App">
        {/* imgタグを設置して、フックで定義した画像データ(img)をsrcに代入する */}
        <img src={img} alt="img" />
     </div>
   ); 
} 
export default App;

最後に画像をアップロードするためのinputタグとアップロードされた画像をフックに保存するところまでを実装したら完成です

// useStateをインポート 
import { useState } from "react"; 

function App() { 
   const [img, setImg] = useState(null); 

   // アップロードされた画像をフックに保存するメソッド
   const handleUploadImg = (e) => {
      const files = e.target.files; 
      if (files.length > 0) {
         const file = files[0]; 
         const reader = new FileReader(); 
         reader.onload = (e) => { 
            setImg(e.target.result); 
         }; 
         reader.readAsDataURL(file); 
     } else { 
       setImg(null); 
     } 
   };

   return (
     <div className="App">
        <img src={img} alt="img" />
        {/* 画像をアップロードするためのinputタグ */} 
        <input type="file" accept=".png" onInput={handleUploadImg} />
     </div>
   ); 
} 
export default App;
画像アップロード画面

画像アップロード時の画面

ローカルPCのPDFを画像アップロードのようにアップロードして表示する方法

次に画像の様に、ローカルにあるPDFをアップロードしてブラウザに表示する方法を実装してみましょう。

基本的な処理の流れは画像の場合と同じですが、利用するタグが異なるので注意してください。

まずが画像の時と同じようにpdfを保存するためのuseStateと、PDFアップロード時の処理メソッドを定義していきます。ここまでは画像の場合とほとんど同じです。

// useStateをインポート 
import { useState } from "react"; 

function App() { 
   // pdfのデータ(base64)を保存、更新するためのフック
   const [pdf, setPdf] = useState(null);
   const [img, setImg] = useState(null); 

   // アップロードされたpdfをフックに保存するメソッド
   const handleUploadPdf = (e) => { 
      const files = e.target.files; 
      if (files.length > 0) { 
         const file = files[0]; 
         const reader = new FileReader(); 
         reader.onload = (e) => { 
            setPdf(e.target.result); 
         }; 
         reader.readAsDataURL(file); 
      } else { 
         setPdf(null); 
      }
   };
   //...

} 
export default App;

最後にpdfを表示するためのembedタグとinputタグを追加します。
embedタグはvideoなど様々なマルチメディアを表示するためのタグです。

// useStateをインポート 
import { useState } from "react"; 

function App() { 
   //...
   return ( 
      <div className="App"> 
         {/* embedタグを追加 */} 
         <embed src={pdf} type="application/pdf" /> 
         {/* pdfをアップロードするためのonputタグを追加 */} 
         <input type="file" accept=".pdf" onInput={handleUploadPdf} /> 
         <img src={img} alt="img /> 
         <input type="file" accept=".png" onInput={handleUploadImg} /> 
       </div> 
   );
} 
export default App;

図の通り、ローカルのpdfをプレビューできていることがわかります。

PDFアップロード画面

PDFアップロード時の画面

embedタグ以外もiframeタグやobjectタグでも表示できるようですが、大きく違いはありません。

ローカルPCのHTMLを画像アップロードのようにアップロードして表示する方法

最後にローカルにあるHTMLファイルをアップロードして画像の様に表示させる方法を紹介したいと思います。

まずはpdfの時と同じ様にuseStateとメソッドを定義します。

// useStateをインポート 
import { useState } from "react"; 

function App() { 
   // htmlのデータ(base64)を保存、更新するためのフック
   const [html, setHtml] = useState(null);
   const [pdf, setPdf] = useState(null);
   const [img, setImg] = useState(null); 

   // アップロードされたhtmlをフックに保存するメソッド
   const handleUploadHtml = (e) => { 
      const files = e.target.files; 
      if (files.length > 0) { 
         const file = files[0]; 
         const reader = new FileReader(); 
         reader.onload = (e) => { 
            setHtml(e.target.result); 
         }; 
         reader.readAsDataURL(file); 
      } else { 
         setHtml(null); 
      }
   };
   //...

} 
export default App;

最後にhtmlを表示するためのiframeタグとinputタグを追加します。
imgタグやembedタグでは表示できないので注意してください。

// useStateをインポート 
import { useState } from "react"; 

function App() { 
   //...
   return ( 
      <div className="App"> 
         {/* iframeタグを追加 */}
         <iframe src={html} title="html" />
         {/* htmlをアップロードするためのonputタグを追加 */}
         <input type="file" accept=".html" onInput={handleUploadHtml} /> 
         <embed src={pdf} type="application/pdf" /> 
         <input type="file" accept=".pdf" onInput={handleUploadPdf} /> 
         <img src={img} alt="img" /> 
         <input type="file" accept=".png" onInput={handleUploadImg} /> 
       </div> 
   );
} 
export default App;

 

アップロードしたhtmlは中身は以下です

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
	<head>
		<title>HTML 文書のサンプル</title>
	</head>
	<body>
		<p>Hello, World!</p>
	</body>
</html>
HTMLアップロード画面

HTMLアップロード時の画面

まとめ

React.jsでローカルPCに保存されている画像・pdf・htmlファイルをアップロードしてViewerとしてブラウザ上に表示する方法を紹介しました。それぞれファイルの形式に応じてタグの種類を変える必要があるため、面倒ですが、このブログが役に立つと幸いです。

 

 

 

タイトルとURLをコピーしました