ファイルストレージサービスである【UploadThing】でNext.jsから画像を削除する方法

# 前回のつづき

前回の記事では、`Uploadthing`を使って`Next.js`から画像をアップロードする手順を解説しました。↓

https://qiita.com/SKY-HaYaTo/items/8b3026fc9efe71eadbdf

# 今回の記事ですること
この記事では、アップロードした画像(png,jpe,SVG etc...)を`Next.js`を使って削除する方法を解説していきます。

# サンプル
#### エクスプローラから画像を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/8502ba0e-347d-449c-815a-e0bd3d42cd23.png)

#### 正常にアップロードされると画面に画像が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/3f8373ef-4dbd-4de3-a4e8-d78877013b89.png)

#### ダッシュボードを見ると、画像がアップロードされているのが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/1160916c-19e6-4b22-aa53-4a031083081e.png)

#### アラートを閉じると画像が消去されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/a940f60e-df32-46cd-bb4d-e89f64ee8842.png)

#### Deleteボタンをクリックして、正常に削除されるとアラートが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/d6ca097c-ea63-4572-a3c0-c9836132b134.png)

#### ダッシュボードをみると、アップロードした画像がちゃんと消去されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/3ceb7397-94fc-4f44-a109-326f8dfe6d59.png)





# ディレクトリ構成

```
└── Procject/
    └── app/
        ├── api/
        │   ├── action/
        │   │   └── imageRemove.ts
        │   └── server/
        │       └── uploadthing.ts
        └── components/
            └── thumbnailUploadthing/
                └── page.tsx
```

# 実装

#### フロント画面に実装

```Project/app/components/thumbnailUploadthing/page.tsx
"use client";
 
// You need to import our styles for the button to look right. Best to import in the root /layout.tsx but this is fine
import "@uploadthing/react/styles.css";
 
import { UploadButton } from "@uploadthing/react";
//import { OurFileRouter } from "./api/uploadthing/core";
import { OurFileRouter } from "@/app/api/uploadthing/core";
import { useState } from "react";
import { imageRemove } from "@/app/api/action/imageRemove";
 
export default function Home() {
  const [file,setFile] = useState<string | null>(null);
  const [imageKey,setImageKey] = useState('');

  const clickImageDelete = async()=>{
    const response = await imageRemove(imageKey);
    if(response.success){
        alert('Your uploaded file was removed from server.');
        setFile("");
        setImageKey("");
    }
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <div className="w-full border border-gray-500 rounded-md px-8 py-4">
            <h2 className="flex justify-center font-bold">Please upload your thumbnail.</h2>
            
            {file && (
                <div>
                    <div className="flex justify-center mt-4 mb-4">
                        <img
                            className="w-100 h-100 rounded-full border border-gray-500"
                            alt="rounded-avator" 
                            src={file}
                        />
                    </div>
                    <div className="flex justify-center">
                        <button
                            type="button"
                            className="bg bg-rose-500 text-white rounded-md px-4 py-4"
                            onClick={clickImageDelete}
                            >
                            Delete
                        </button>
                    </div>
                </div>
            )}
            
            <UploadButton<OurFileRouter>
                endpoint="imageUploader"
                onClientUploadComplete={(res) => {
                // Do something with the response
                console.log("Files: ", res);
                setFile(res[0].url);
                setImageKey(res[0].key);
                alert("Upload Completed");
                }}
                onUploadError={(error: Error) => {
                // Do something with the error.
                alert(`ERROR! ${error.message}`);
                }}
            />
        </div>
    </main>
  );
}
```

#### サーバ側の実装

```Project/app/api/action/imageRemove.ts
"use server"
import { utapi } from "../server/uploadthing"

export const imageRemove = async(imageKey:string)=>{
    try{
        await utapi.deleteFiles(imageKey);
        return {success:true};
    }catch(error){
        return {success:false};
    }
}
```

```Project/app/api/server/uploadthing.ts
import { UTApi } from "uploadthing/server";

export const utapi = new UTApi();

```

以上です。


# 参考サイト

■Next.js 14 + Uploadthing : Image Preview and Delete From Server | EzyCode

https://www.youtube.com/watch?v=uGKNc0GhS00


#### SVGファイルのダウンロードとオンライン圧縮サイト

https://worldvectorlogo.com/

https://www.imagesmaller.com/jp/