{"id":266,"date":"2019-09-01T19:30:56","date_gmt":"2019-09-01T10:30:56","guid":{"rendered":"https:\/\/hacya.com\/?p=266"},"modified":"2021-07-04T14:57:40","modified_gmt":"2021-07-04T05:57:40","slug":"cognitos3amplifyreactdropzone4","status":"publish","type":"post","link":"https:\/\/blog.hacya.com\/index.php\/2019\/09\/01\/cognitos3amplifyreactdropzone4\/","title":{"rendered":"Cognito\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u306b\u3088\u308bS3 \u306eAccess\u5236\u5fa1\u3092Amplify\u3068React\u3068Dropzone\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b\u3002(\u305d\u306e4)"},"content":{"rendered":"\n

\u300cCognito\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u306b\u3088\u308bS3 \u306eAccess\u5236\u5fa1\u3092Amplify\u3068React\u3068Dropzone\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b\u3002(\u305d\u306e3)<\/a>\u300d\u306e\u7d9a\u304d\u3067\u3059\u3002<\/p>\n\n\n\n

npm start<\/code>
\u3057\u307e\u3059\u3002Browse\u304c\u8d77\u52d5\u3057\u3066\u3001Login\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u753b\u9762\u4e2d\u4ed8\u8fd1\u306b\u3001 Upload File\u3092\u5165\u529b\u3067\u304d\u308b\u30dc\u30bf\u30f3\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002 <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

S3\u306eBucket\u304c\u7a7a\u3067\u3042\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304a\u304d\u307e\u3059\u3002Management Console\u304b\u3089S3\u3092\u958b\u304d\u3001upload Bucket\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002 <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Web Application\u306b\u623b\u3063\u3066\u3001File\u3092Upload\u3057\u307e\u3059\u3002 \u300cBrowse\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001File\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u4eca\u56de\u306fTiff File\u306e\u307f\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u3042\u308b\u306e\u3067\u3001\u9069\u5f53\u306aTiff File\u3092\u6307\u5b9a\u3057\u3066\u3001\u300c\u958b\u304f\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u6307\u5b9a\u3057\u305fFile\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u3001\u300cUpload File\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002Upload\u3067\u304d\u305a\u3001Error\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002Login\u3057\u3066\u3044\u306a\u3044\u72b6\u614b\u3067\u306f\u3001File\u306eUpload\u304c\u51fa\u6765\u306a\u3044\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

\u518d\u5ea6\u3001S3\u306eUpload Bucket\u304c\u7a7a\u3067\u3042\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n

Login\u3057\u3066\u3001\u540c\u69d8\u306bFile\u3092Upload\u3057\u307e\u3059\u3002File\u306f\u6307\u5b9a\u3055\u308c\u305f\u307e\u307e\u306a\u306e\u3067\u3001\u300cUpload File\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002\u3082\u3061\u308d\u3093\u300cBrowse\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001File\u3092\u518d\u6307\u5b9a\u3057\u3066\u3082\u826f\u3044\u3067\u3059\u3002File\u304cUpload\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

S3\u306bFile\u304cUpload\u3055\u308c\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3057\u307e\u3059\u3002Management Console\u304b\u3089S3\u3092\u958b\u304d\u3001Upload Bucket\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002Bucket\u306e\u5185\u5bb9\u3092\u8868\u793a\u3057\u3066\u3044\u308b\u753b\u9762\u306e\u307e\u307e\u3067\u3057\u305f\u3089\u3001\u66f4\u65b0\u306eIcon\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002\u300cprotected\u300d\u3068\u3044\u3046Folder\u304c\u4f5c\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u300cprotected\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002\u300cap-northeast-1:\u300d\u3067\u59cb\u307e\u308bFolder\u304c\u4f5c\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u305d\u306eFolder\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002\u300cupload\u300d\u3068\u3044\u3046Folder\u304c\u4f5c\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u300cupload\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002Upload\u3057\u305fFile\u304c\u898b\u3048\u307e\u3059\u3002\u4eca\u56de\u306f\u3001Amplify\u306eStorage\u306eLevel\u306bProtected\u3092\u6307\u5b9a\u3057\u305f\u306e\u3067\u3001\u4e0a\u8a18\u306e\u3088\u3046\u306a\u968e\u5c64\u306bFile\u304cUpload\u3055\u308c\u307e\u3059\u3002Policy\u3092\u4f7f\u3063\u3066S3\u3078\u306eAccess\u5236\u5fa1\u3092\u6307\u5b9a\u3057\u307e\u3057\u305f\u304c\u3001Amplify Storage\u306eLevel\u3068Policy\u3092\u7d30\u304b\u304f\u6307\u5b9a\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001User\u9593\u3067\u304a\u4e92\u3044\u306bFile\u3092\u898b\u308c\u308b\u3088\u3046\u306b\u3057\u305f\u308a\u3001\u4ed6\u306eUser\u304b\u3089\u306f\u898b\u308c\u306a\u3044\u3088\u3046\u306b\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

\u3053\u306e\u65b9\u6cd5\u3067\u306fUpload\u3059\u308bFile\u3092\u4e00\u3064\u4e00\u3064\u6307\u5b9a\u3057\u3066Upload\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u305d\u308c\u3067\u306f\u4e0d\u4fbf\u306a\u305f\u3081\u3001\u8907\u6570\u306eFile\u3092\u4e00\u6c17\u306bUpload\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306bDropZone\u3092\u4f7f\u3063\u3066Upload\u3059\u308bFile\u3092\u6307\u5b9a\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002\u307e\u305a\u3001react-dropzone\u3092Install\u3057\u307e\u3059\u3002
cd upload<\/code>
npm install -save react-dropzone<\/code><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

App.js\u3092\u7de8\u96c6\u3057\u3066DropZone\u304b\u3089Upload File\u3092\u6307\u5b9a\u3059\u308b\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

import React, { useState, useCallback, useMemo }  from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport Storage from \"@aws-amplify\/storage\";\nimport { SetS3Config } from \".\/services\";\nimport logo from '.\/logo.svg';\nimport '.\/App.css';\nconst baseStyle = {\n  flex: 1,\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  padding: '20px',\n  borderWidth: 2,\n  borderRadius: 2,\n  borderColor: '#eeeeee',\n  borderStyle: 'dashed',\n  backgroundColor: '#fafafa',\n  color: '#bdbdbd',\n  outline: 'none',\n  transition: 'border .24s ease-in-out'\n};\nconst activeStyle = {\n  borderColor: '#2196f3'\n};\nconst acceptStyle = {\n  borderColor: '#00e676'\n};\nconst rejectStyle = {\n  borderColor: '#ff1744'\n};\nfunction App(props) {\n  const [response, setResponse] = useState(\"\");\n  const onDrop = useCallback(acceptedFiles => {\n    acceptedFiles.forEach(file => {\n      const reader = new FileReader();\n      reader.onload = () => {\n        const fileAsArrayBuffer = new Uint8Array(reader.result);\n          \/\/ do whatever you want with the file content\n        SetS3Config(process.env.REACT_APP_bucket_name, \"protected\");\n        Storage.put('upload\/' + file.name, fileAsArrayBuffer, { contentType: file.type })\n        .then(result => {\n            console.log(result);\n            setResponse(\"File is uploaded!\");\n            return true;\n        })\n        .catch(err => {\n            console.log(err);\n            setResponse(`File is not uploaded: ${err}`);\n            return true;\n        });\n      };\n      reader.onabort = () => {\n        console.log(\"Reading file was aborted\");\n        setResponse(\"Reading file was aborted\");\n      }\n      reader.onerror = () => {\n        console.log(\"Reading file has failed\");\n        setResponse(\"Reading file has failed\");\n      }\n      reader.readAsArrayBuffer(file);\n    });\n  }, []);\n  const {acceptedFiles, getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject} = useDropzone({onDrop, accept: 'image\/tif, image\/tiff'});\n  const files = acceptedFiles.map(file => (\n    <div align=\"center\">\n      {file.path} - {file.size} bytes\n    <\/div>\n  ));\n  const style = useMemo(() => ({\n    ...baseStyle,\n    ...(isDragActive ? activeStyle : {}),\n    ...(isDragAccept ? acceptStyle : {}),\n    ...(isDragReject ? rejectStyle : {})\n  }), [\n    isDragActive,\n    isDragAccept,\n    isDragReject\n  ]);\n  if(props.authState === 'signedIn') {\n    return (\n      <div className=\"App\">\n        <div {...getRootProps({style})}>\n          <input {...getInputProps()} \/>\n          <p>Drag 'n' drop some files here, or click to select files<\/p>\n        <\/div>\n        <div>\n          <h4>Files<\/h4>\n          <p>{files}<\/p>\n        <\/div>\n        {!!response && <div>{response}<\/div>}\n        <header className=\"App-header\">\n          <img src={logo} className=\"App-logo\" alt=\"logo\" \/>\n          <p>\n            Edit <code>src\/App.js<\/code> and save to reload.\n          <\/p>\n          <a\n            className=\"App-link\"\n            href=\"https:\/\/reactjs.org\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            Learn React\n          <\/a>\n        <\/header>\n      <\/div>\n    );\n  } else if(props.authState === 'confirmSignUp') {\n    return (\n      <div className=\"Your account is not granted\">\n        <header className=\"App-header\">\n          Your account is not granted.\n        <\/header>\n      <\/div>\n    );\n  } else if(props.authState === 'signIn') {\n    return (\n      <div className=\"Welcome to the world\">\n        <header className=\"App-header\">\n          Welcome to the world.\n        <\/header>\n      <\/div>\n    );\n  } else {\n    return (\n      <div className=\"Login failed\">\n        <header className=\"App-header\">\n          Login failed.\n        <\/header>\n      <\/div>\n    );\n  }\n}\nexport default App;<\/code><\/pre><\/div>\n\n\n\n
App.js\u306e\u7de8\u96c6\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001
npm start<\/code>
\u3057\u307e\u3059\u3002 Browse\u304c\u8d77\u52d5\u3057\u3066\u3001Login\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u305f\u3089\u3001Login\u3057\u307e\u3059\u3002Login\u3059\u308b\u3068\u3001Upload\u3059\u308bFile\u3092Drag&Drop\u3059\u308b\u9818\u57df\u304c\u51fa\u6765\u3066\u3044\u307e\u3059\u3002Upload\u3059\u308b\u8907\u6570\u306eFile\u3092Drag&Drop\u3057\u307e\u3059\u3002Drag&Drop\u3059\u308b\u9818\u57df\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001File Browser\u304b\u3089\u8907\u6570\u306eFile\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002Upload\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001Management Console\u304b\u3089S3\u3092\u958b\u304d\u3001Upload\u3055\u308c\u305fFile\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u3053\u308c\u3067\u3001 File Upload\u6a5f\u80fd \u306e\u5b9f\u88c5\u306f\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n\n\n\n
\u305d\u308c\u3067\u306f\u3001\u4ee5\u524d\u3068\u540c\u69d8\u306bS3\u306bDeploy\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002
package.json\u306bhomepage\u306eentry\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3057\u307e\u3059\u3002
cd upload<\/code>
npm run build<\/code>
aws s3 sync --exact-timestamps --delete --acl public-read<\/code>dirname bucketname<\/code><\/em> <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Management Console\u304b\u3089S3\u3092\u958b\u304d\u3001export.hacya.com\u306eindex.html\u306eURL\u3092\u78ba\u8a8d\u3057\u3066\u3001Browser\u3067\u305d\u306eURL\u3092\u958b\u304d\u307e\u3059\u3002\u540c\u69d8\u306bTiff File\u3092Upload\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Upload\u3067\u304d\u307e\u3057\u305f\u3002\u3053\u308c\u3067\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u300cCognito\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u306b\u3088\u308bS3 \u306eAccess\u5236\u5fa1\u3092Amplify\u3068React\u3068Dropzone\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b\u3002(\u305d\u306e3)\u300d\u306e\u7d9a\u304d\u3067\u3059\u3002 npm start\u3057\u307e\u3059\u3002Browse\u304c\u8d77\u52d5\u3057\u3066\u3001Login\u753b\u9762\u304c\u8868\u793a\u3055 … “Cognito\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u306b\u3088\u308bS3 \u306eAccess\u5236\u5fa1\u3092Amplify\u3068React\u3068Dropzone\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b\u3002(\u305d\u306e4)” \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[14,4,10,13,17,7],"class_list":["post-266","post","type-post","status-publish","format-standard","hentry","category-aws","tag-amplify","tag-aws","tag-s3","tag-cognito","tag-dropzone","tag-react"],"_links":{"self":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":6,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"predecessor-version":[{"id":343,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/266\/revisions\/343"}],"wp:attachment":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}