反応アプリでCloudaryに画像をアップロードします.

こんにちは.今年、私は少なくとも4つの技術記事を書くことを決めました.それは週に少なくとも1つです.畝
年を通してこれに固執するならば、我々はほぼ60を見ています.年がもたらすものを見るのを待つことができません.
それ以上のADOなしで、ビジネスにまっすぐになりましょう.
まず、反応アプリが必要になります.を作成する1つを使用して作成する反応CLIを反応させる.あなたが既に反応アプリを持っている場合は、この手順をスキップして自由に感じる.私は私の曇りのアップロードを命名しました、しかし、あなたのものともう少し創造的であるために自由に感じてください.
次に、いくつかの要素が必要です.アップロードプロセス、画面上の選択された画像(s)をレンダリングするには、div要素をトリガするボタン.そして、若干の州.
簡単にするために、私は内部の状態、したがってこの記事のUSENTに付着するでしょう、しかし、それは他の州管理パターンにも同様に(RedUx -らくだ-)のようにプラグインするべきです.
さて、親コンポーネントを作成します.私はアプリを使用します.js生成されたすべてのコードをクリアし、この形状の空と空の反応コンポーネントを残します.

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}
export default App;

次に、我々は反応パッケージからUSEstateをインポートし、我々の内部状態を準備します.この次の行を「app」コンポーネントに追加します.

const [images, setImages] = useState([]);

一つ以上の画像をレンダリングしたいので、デフォルトの状態を配列にしました.我々がアップロードするすべてのイメージは、この配列に格納されます.
次に、我々はイメージの我々の配列の上でループして、実際に彼らを写像する反応要素をつくります 要素.

<section>
{images.map(i => <img src={i} alt="" />)}
</section>

私は自分の要素としてセクションタグを使うことを選びました.あなたの最高のスーツを使用するには、再び無料感じ.
次に、いくつかの重要なことを考慮に入れて、Cloudinaryにアカウントを作成します.
登録時に、Cloudinaryはあなたに一般的な'雲名'を割り当てるよう頼むでしょう.あなたが思い出すことができるか、少なくともそれのメモを取るか、どこかにそれを書く何かに、これを変えてください.私のアカウントでは、クラウド名を選びました.emkaydee .
あなたが選択する主な関心は、何が最も自然な感じを選択して目的に効果を持っていません.
Cloudaryでオンボード処理を行ったり、ダッシュボードに到達したりする.ここで、非常に非常に有用なAPIキーを選択した雲の名前を見つけるでしょう.
今、何か前に、ダッシュボードの右上に向かってプロファイルのアイコンをタップして設定ページを見つけます.ギアのアイコンをクリックすると、設定ページにリダイレクトされます.
アップロードタブに移動します.
ここをスクロールし、「符号なしアップロードを有効にする」.これを行うには、あなたのためのプリセットアップロードを生成します.未署名のアップロードプリセット.これは、イメージをアップロードするたびに署名を生成する必要はありません.
このプリセットの名前を少し自然に感じる何かに変えてください.私は'アップロード'という名前を付けますなぜですか?
今、あなたの変更を保存するには、下にスクロールします.
次に、我々はセキュリティタブをリアルタイムにポップアップし、それが“制限されたメディアの種類”と言うところで、我々は任意のメディアを制限しないように選択します.畝
それを行って、もう一度あなたの変更を保存し、ダッシュボードにあなたの方法を見つけるために下にスクロールします.
さて、次のセクションで使用する2つの曇りのパラメータがあります.

あなたのクラウド名.私のものは「emaydee」です

あなたのアップロードプリセット名.私は、私のものを「アップロード」と呼びました

最後にコーディングに戻る時間です.2つのNPMパッケージを必要とします.cloudinary-react and cloudinary-core .
端末でこのコマンドを実行して両方を取得します.

npm i cloudinary-react cloudinary-core

さて、CloudinaryからCloudNaryContextをインポートし、アプリケーションコンポーネントをラップして、クラウド名を小文字として渡します.これを正しく行うと、あなたのアプリ.jsファイルは次のようになります.

import React, {useState} from 'react';
import { CloudinaryContext } from "cloudinary-react";
import './App.css';

function App() {
  const [images, setImages] = useState([])

  return (
    <CloudinaryContext cloudName="emkaydee">
      <div className="App">
        <section>
          {images.map(i => <img src={i} alt="" />)}
        </section>
      </div>
    </CloudinaryContext>
  );
}

export default App;

このコンポーネントは、アプリケーションコンポーネントの子である限り、私たちのアプリのどこにでもCloudaryウィジェットを開く開くことができますとしてこれを考える.
次に、srcフォルダにutilファイルを作成します.ファイル名を指定します.jsそれは私たちのアップロードとレンダリングプロセスを緩和するためのヘルパーメソッドが含まれます.
次のコードをCloudinaryServiceにコピーします.js

import { Cloudinary as CoreCloudinary, Util } from 'cloudinary-core';

export const url = (publicId, options) => {
  const scOptions = Util.withSnakeCaseKeys(options);
  const cl = CoreCloudinary.new();
  return cl.url(publicId, scOptions);
};

export const openUploadWidget = (options, callback) => {
  const scOptions = Util.withSnakeCaseKeys(options);
  window.cloudinary.openUploadWidget(scOptions, callback);
};

export async function  fetchPhotos  (imageTag, setter)  {
  const options = {
  cloudName: 'emkaydee',
  format: 'json',
  type: 'list',
  version: Math.ceil(new Date().getTime() / 1000),
};

const urlPath = url(imageTag.toString(), options);

fetch(urlPath)
.then(res => res.text())
.then(text => (text ? setter(JSON.parse(text).resources.map(image => image.public_id)) : []))
.catch(err => console.log(err));
};

にfetchPhotos 私のCloudNameとしてemaydeeを持っている機能は、必ずあなたのものと取り替えてください.
次に、我々は両方のアプリケーションでヘルパーメソッドをインポートします.js

import { fetchPhotos, openUploadWidget } from "./CloudinaryService";

次に、アプリにボタンを追加します.私たちのonclickのための新しい機能とともにアップロード・プロセスをトリガーするJS

const beginUpload = tag => {
  const uploadOptions = {
    cloudName: "emkaydee",
    tags: [tag],
    uploadPreset: "upload"
  };

  openUploadWidget(uploadOptions, (error, photos) => {
    if (!error) {
      console.log(photos);
      if(photos.event === 'success'){
        setImages([...images, photos.info.public_id])
      }
    } else {
      console.log(error);
    }
  })
}

新しく作成したボタンのonclickにこのメソッドを追加します.

<button onClick={() => beginUpload()}>Upload Image</button>

この時点で、すべての準備が整いました.しかし、我々のアプリを実行しようとすると、ボタンをクリックすると、エラー:ウィンドウを取得します.Cloudaryは未定義です.これは、実際にCloudaryウィジェットコンポーネント自体のパッケージを追加していないためです.
残念ながら、ウィジェットのNPMパッケージはこの記事を書いているので、我々は回避策を使用する必要があります.
これを行うには、スクリプトタグをindex.html パブリックフォルダのファイル.そこで、' body '要素の下部にスクリプトを追加してください.

<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript">
</script>

私たちのウィジェットを開くPoppingを試してみて、それが正しく表示する必要があります.あなたも、画像をアップロードしようとするかもしれないし、それはあなたのメディアライブラリで曇りに表示する必要があります.
しかし、我々の反応アプリは画像なしで空のままですか?
このチュートリアルの最後の部分は、私たちのCloudaryアカウントからアップロードされた画像を取得します.
アプリに簡単な効果を追加します.我々のNiftyと一緒のJSuseEffect フックにフックを追加します.fetchPhotos("image", setImages);これはまだ我々のイメージが表示されません.なぜなら、彼らは私たちが簡単にプラグを差し込むことができるソースリンクとして提供されないからです<img /> 要素.
代わりに、我々はImage コンポーネントcloudinary-react .
アプリで.チェンジ・チェンジ

<section>
  {images.map(i => <img src={i} alt="" />)}
</section>

インポートした画像コンポーネントを使用するには、次の手順に従います

<section>
  {images.map(i => <Image
         key={i}
         publicId={i}
         fetch-format="auto"
         quality="auto"
       />)}
</section>

我々はすべての良いと正しい場合は、アプリ.jsファイルは次のようになります.

import React, {useState, useEffect} from 'react';
import { CloudinaryContext, Image } from "cloudinary-react";
import { fetchPhotos, openUploadWidget } from "./CloudinaryService";
import './App.css';

function App() {
  const [images, setImages] = useState([])

  const beginUpload = tag => {
    const uploadOptions = {
      cloudName: "emkaydee",
      tags: [tag, 'anImage'],
      uploadPreset: "upload"
    };
    openUploadWidget(uploadOptions, (error, photos) => {
      if (!error) {
        console.log(photos);
        if(photos.event === 'success'){
          setImages([...images, photos.info.public_id])
        }
      } else {
        console.log(error);
      }
    })
  }

  useEffect( () => {
    fetchPhotos("image", setImages);
  }, [])

  return (
   <CloudinaryContext cloudName="emkaydee">
      <div className="App">
        <button onClick={() => beginUpload("image")}>Upload Image</button>
      <section>
        {images.map(i => <Image
              key={i}
              publicId={i}
              fetch-format="auto"
              quality="auto"
            />)}
      </section>
    </div>
   </CloudinaryContext>
  );
}

export default App;

それです.それは全体のチュートリアルです.あなたのアプリは今あなたのCloudaryアカウントに接続する必要があります.あなたが質問をするならば、コメントで尋ねてください、そして、あなたがそれが少なくとも少し役に立つとわかるならば、この話に反応してください.