Amplify Storageで簡易ファイル管理システムを作る (Vue3,Vuetify3,TypeScript)

vue create upload-file

? Please pick a preset: (Use arrow keys)
  Default  ([Vue 3] babel, eslint)  
　Default  ([Vue 2] babel, eslint)  
❯ Manually select features

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◉ Babel
❯◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

cd upload-file
yarn serve

vue add vuetify

? Choose a preset: 
  Configure (advanced) 
  Default (recommended) 
  Vite Preview (Vuetify 3 + Vite) 
  Prototype (rapid development) 
❯ Vuetify 3 Preview (Vuetify 3) 

amplify init

npm install [email protected] @aws-amplify/[email protected] dayjs

declare const awsmobile: Record<string, any>
export default awsmobile;

import { createApp } from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
import { loadFonts } from "./plugins/webfontloader";
//↓↓↓ 追加
import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);
//↑↑↑ 追加終わり
loadFonts();

createApp(App).use(vuetify).mount("#app");

amplify add storage

? Please select from one of the below mentioned services (Use arrow keys)
❯ Content (Images, audio, video, etc.) 
  NoSQL Database 

 You need to add auth (Amazon Cognito) to your project in order to add storage for user files. Do you want to add auth now? Yes
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito. 

 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
Successfully added auth resource

<script lang="ts" setup>
import HelloWorld from './components/HelloWorld.vue'
import { Authenticator } from '@aws-amplify/ui-vue'
import '@aws-amplify/ui-vue/styles.css'
</script>

<template>
  <v-app>
    <authenticator>
      <template v-slot="{ user, signOut }">
        <v-container>
          <h1>Hello {{ user.username }}!</h1>
          <v-btn color="secondary" @click="signOut">Sign Out</v-btn>
        </v-container>
        <v-main>
          <HelloWorld />
        </v-main>
      </template>
    </authenticator>
  </v-app>
</template>

Storage.put<T extends Record<string, any>>
(key: string, object: any, config?: StoragePutConfig<T> | undefined)
: PickProviderOutput<S3ProviderPutOutput<T>, T, "put">

 {
    key: "photo.png"
  }

<script lang='ts' setup>
import { ref } from 'vue'
import { Storage } from 'aws-amplify'
import { StorageAccessLevel } from '@aws-amplify/storage'
const fileinput = ref<File[]>([]),
  level = ref<StorageAccessLevel>('public')
const levelType: StorageAccessLevel[] = ['public', 'protected', 'private']
const uploadFiles = async () => {
  if (fileinput.value.length > 0) {
    const id = await Storage.put(
      fileinput.value[0].name, // ファイル名
      fileinput.value[0],
      { level: level.value }
    )
    console.log(id)
    fileinput.value.length = 0
  }
};
</script>

<template>
  <v-container>
    <v-select v-model="level" :items="levelType" label="level"></v-select>
    <v-file-input v-model="fileinput" label="File input" clearable></v-file-input>
    <v-btn color="primary" :disabled="fileinput.length === 0" @click="uploadFiles">upload</v-btn>
  </v-container>
</template>

import { Auth } from 'aws-amplify'
export const getId = async () => {
  const currentCredentials = await Auth.currentCredentials()
  const identityId = currentCredentials.identityId
  return identityId
}

Storage.list<{
    level: StorageAccessLevel;
}>(key: string, config?: S3ProviderListConfig | undefined):Promise<S3ProviderListOutput>

[
  {
    eTag: ""30074401292215403x42b0739y3b5262"",
    key: "photo.png",
    lastModified: "Thu Oct 08 2022 23:59:31 GMT+0800 (Singapore Standard Time)",
    size: 13856
  },
  // ...
]

import { Storage } from 'aws-amplify';
import { StorageAccessLevel, S3ProviderListOutput, S3ProviderPutConfig, PutResult } from '@aws-amplify/storage';
export const levelType: StorageAccessLevel[] = ['public', 'protected', 'private'];
//list用
export interface MyStorageItem {
  level: StorageAccessLevel;
  idx: number;
}
//put
export const putStorage = async (
  key: string,
  object: File,
  config?: S3ProviderPutConfig | undefined
): Promise<PutResult> => {
  return new Promise((resolve, reject) => {
    Storage.put<PutResult>(key, object, config)
      .then(async (result) => {
        resolve(result);
      })
      .catch((err) => reject(err));
  });
};
//get
export const getStorage = async (level: StorageAccessLevel): Promise<S3ProviderListOutput> => {
  return new Promise((resolve, reject) => {
    Storage.list('', { level: level }) // for listing ALL files without prefix, pass '' instead
      .then(async (result) => {
        resolve(result);
      })
      .catch((err) => reject(err));
  });
};