{"id":7203,"date":"2023-02-20T09:04:47","date_gmt":"2023-02-20T05:34:47","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/the-amplify-series-part-5-uploading-and-retrieving-images-with-amplify-storage-2hja\/"},"modified":"2023-02-20T09:04:47","modified_gmt":"2023-02-20T05:34:47","slug":"the-amplify-series-part-5-uploading-and-retrieving-images-with-amplify-storage-2hja","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/the-amplify-series-part-5-uploading-and-retrieving-images-with-amplify-storage-2hja\/","title":{"rendered":"\u0633\u0631\u06cc Amplify\u060c \u0642\u0633\u0645\u062a 5: \u0622\u067e\u0644\u0648\u062f \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 Amplify Storage"},"content":{"rendered":"<div data-article-id=\"1363579\" id=\"article-body\">\n<p><strong>\u0628\u0627 \u0648\u062c\u0648\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627\u060c \u0627\u06a9\u0646\u0648\u0646 \u0632\u0645\u0627\u0646 \u0622\u0646 \u0641\u0631\u0627 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0631\u062e\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0647\u0627\u06cc Amplify\u060c \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u0636\u0627\u0641\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>Amplify Storage<\/code> \u0628\u0631\u0627\u06cc \u0622\u067e\u0644\u0648\u062f \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0632 AWS \u062a\u0646\u0647\u0627 \u062f\u0631 \u0686\u0646\u062f \u0645\u0631\u062d\u0644\u0647.<\/strong><\/p>\n<p>\u0645\u0627 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0634\u0631\u0648\u0639 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>Amplify Storage<\/code> \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0627  \u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u0644\u0641\u0647 Storage \u067e\u06cc\u06af\u06cc\u0631\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0647\u0645\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u062e\u0648\u062f \u0631\u0627 \u0622\u067e\u0644\u0648\u062f \u0648 \u0641\u0647\u0631\u0633\u062a \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0645\u0627 \u06cc\u06a9 UI \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u062f\u0631\u06a9 \u0628\u0647\u062a\u0631\u06cc \u0627\u0632 \u0622\u0646 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a <code>Amplify Storage<\/code> \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0632 \u0622\u0646 \u062f\u0631 \u0647\u0631 \u0633\u0646\u0627\u0631\u06cc\u0648\u06cc\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u067e\u0644\u0648\u062f \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0641\u0627\u06cc\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/the-amplify-series-part-5-uploading-and-retrieving-images-with-amplify-storage-2hja\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_Amplify_Storage_%D8%A8%D9%87_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D9%85%D8%A7\" >\u0627\u0641\u0632\u0648\u062f\u0646 Amplify Storage \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/the-amplify-series-part-5-uploading-and-retrieving-images-with-amplify-storage-2hja\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B5%D9%81%D8%AD%D9%87_%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u062a\u0635\u0648\u06cc\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/the-amplify-series-part-5-uploading-and-retrieving-images-with-amplify-storage-2hja\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA_%D8%A2%D9%BE%D9%84%D9%88%D8%AF_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/the-amplify-series-part-5-uploading-and-retrieving-images-with-amplify-storage-2hja\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%A8%D8%A7%D8%B2%D8%AE%D9%88%D8%B1%D8%AF_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA_%D8%A2%D9%BE%D9%84%D9%88%D8%AF_%D9%81%D8%A7%DB%8C%D9%84\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u067e\u06cc\u0634\u0631\u0641\u062a \u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/the-amplify-series-part-5-uploading-and-retrieving-images-with-amplify-storage-2hja\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u062a\u0635\u0648\u06cc\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/the-amplify-series-part-5-uploading-and-retrieving-images-with-amplify-storage-2hja\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA_%D8%AD%D8%B0%D9%81_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u062d\u0630\u0641 \u062a\u0635\u0648\u06cc\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/the-amplify-series-part-5-uploading-and-retrieving-images-with-amplify-storage-2hja\/#%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%AD%D8%AF%D8%A7%DA%A9%D8%AB%D8%B1_%D8%AA%D8%B9%D8%AF%D8%A7%D8%AF_%D8%A2%D9%BE%D9%84%D9%88%D8%AF_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%87%D8%B1_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1\" >\u062a\u0646\u0638\u06cc\u0645 \u062d\u062f\u0627\u06a9\u062b\u0631 \u062a\u0639\u062f\u0627\u062f \u0622\u067e\u0644\u0648\u062f \u0628\u0631\u0627\u06cc \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/the-amplify-series-part-5-uploading-and-retrieving-images-with-amplify-storage-2hja\/#%D8%A8%D8%B9%D8%AF%DB%8C_%D9%87%D9%88%D8%B4_%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C_%D9%88_ML_%D8%A8%D8%A7_%D9%BE%DB%8C%D8%B4%E2%80%8C%D8%A8%DB%8C%D9%86%DB%8C%E2%80%8C%D9%87%D8%A7%DB%8C_%D8%AA%D9%82%D9%88%DB%8C%D8%AA%E2%80%8C%DA%A9%D9%86%D9%86%D8%AF%D9%87\" >\u0628\u0639\u062f\u06cc: \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0648 ML \u0628\u0627 \u067e\u06cc\u0634\u200c\u0628\u06cc\u0646\u06cc\u200c\u0647\u0627\u06cc \u062a\u0642\u0648\u06cc\u062a\u200c\u06a9\u0646\u0646\u062f\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_Amplify_Storage_%D8%A8%D9%87_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D9%85%D8%A7\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 Amplify Storage \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u062f\u0631 \u0645\u062e\u0632\u0646 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u062e\u0631\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0645\u062a\u0648\u0642\u0641 \u06a9\u0631\u062f\u06cc\u0645 \u0627\u062f\u0627\u0645\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f.  \u0627\u0632 \u0627\u06cc\u0646 \u0646\u0642\u0637\u0647 \u0645\u0627 \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <strong>\u062a\u0642\u0648\u06cc\u062a \u062d\u0627\u0641\u0638\u0647 \u0627\u0641\u0632\u0648\u062f\u0646<\/strong> \u0628\u0627 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0632\u06cc\u0631:<\/p>\n<ul>\n<li>\u0633\u0631\u0648\u06cc\u0633: <strong>\u0645\u062d\u062a\u0648\u0627<\/strong>.<\/li>\n<li>\u0627\u0633\u0645 \u062f\u0648\u0633\u062a\u0627\u0646\u0647: <strong>\u062a\u0642\u0648\u06cc\u062a \u062a\u0635\u0627\u0648\u06cc\u0631<\/strong>.<\/li>\n<li>\u0646\u0627\u0645 \u0633\u0637\u0644: <strong>\u062a\u0642\u0648\u06cc\u062a \u062a\u0635\u0627\u0648\u06cc\u0631<\/strong>\n<\/li>\n<li>\u062f\u0633\u062a\u0631\u0633\u06cc: <strong>\u0627\u06cc\u062c\u0627\u062f\u060c \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc\u060c \u062e\u0648\u0627\u0646\u062f\u0646\u060c<\/strong> \u0648 <strong>\u062d\u0630\u0641<\/strong>\u060c <strong>\u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u062c\u0627\u0632<\/strong>.<\/li>\n<\/ul>\n<p>\u062e\u0631\u0648\u062c\u06cc Amplify CLI \u0634\u0628\u06cc\u0647 \u0627\u06cc\u0646 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>Evertsons-MBP:theamplifyapp evertsoncroes$ amplify add storage\n\n? Select from one of the below mentioned services: Content (Images, audio, video, etc.)\n\n\u2714 Provide a friendly name for your resource that will be used to label this category in the project: \u00b7 amplifyappimages\n\n\u2714 Provide bucket name: \u00b7 amplifyappimages\n\n\u2714 Who should have access: \u00b7 Auth users only\n\n\u2714 What kind of access do you want for Authenticated users? \u00b7 create\/update, read, delete\n\n\u2714 Do you want to add a Lambda Trigger for your S3 Bucket? (y\/N) \u00b7 no\n\n\u2705 Successfully added resource amplifyappimages locally\n\n\u26a0\ufe0f If a user is part of a user pool group, run \"amplify update storage\" to enable IAM group policies for CRUD operations\n\u2705 Some next steps:\n\"amplify push\" builds all of your local backend resources and provisions them in the cloud\n\n\"amplify publish\" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0641\u0642\u0637 \u0622\u067e\u0644\u0648\u062f\u0647\u0627\u06cc \u062e\u0648\u062f\u0634\u0627\u0646 \u0631\u0627 \u0628\u0628\u06cc\u0646\u0646\u062f.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u0645 \u0641\u0642\u0637 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062a\u0623\u06cc\u06cc\u062f \u0634\u062f\u0647 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0646\u0628\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f \u0648 \u0647\u0645\u0647 \u0645\u062c\u0648\u0632\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0622\u0646\u0647\u0627 \u0628\u062f\u0647\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0622\u067e\u0644\u0648\u062f\u060c \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062d\u0630\u0641 \u06a9\u0646\u0646\u062f.  \u0627\u06cc\u0646 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0645\u0641\u06cc\u062f \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0686\u06af\u0648\u0646\u06af\u06cc <code>Amplify Auth<\/code> \u062f\u0633\u062a\u0647 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u062f\u0633\u062a\u0647 \u0647\u0627 \u067e\u06cc\u0648\u0646\u062f \u0645\u06cc \u06cc\u0627\u0628\u062f \u062a\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648 \u0645\u062c\u0648\u0632 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f. <\/p>\n<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u0631\u0627 \u0628\u0647 \u0645\u062e\u0632\u0646 \u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f \u0634\u0631\u0648\u0639 \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0647 \u062c\u062f\u06cc\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0645\u0627 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0631\u0627 \u0628\u0647 \u0633\u0647 \u062c\u0632\u0621 \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<ul>\n<li>\n<strong>\u0622\u067e\u0644\u0648\u062f \u06a9\u0646\u0646\u062f\u0647 \u062a\u0635\u0648\u06cc\u0631<\/strong>: \u062c\u0632\u0621 \u0645\u0633\u0626\u0648\u0644 \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631 \u0648 \u062f\u0627\u062f\u0646 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u067e\u0644\u0648\u062f.<\/li>\n<li>\n<strong>\u0622\u0644\u0628\u0648\u0645 \u062a\u0635\u0648\u06cc\u0631<\/strong>: \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u0633\u0626\u0648\u0644 \u0641\u0647\u0631\u0633\u062a \u06a9\u0631\u062f\u0646 \u0647\u0645\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0622\u067e\u0644\u0648\u062f \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<li>\n<strong>\u0646\u0645\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631<\/strong>: \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u06a9\u0647 \u0641\u0642\u0637 \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062f\u0627\u0644 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B5%D9%81%D8%AD%D9%87_%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u062a\u0635\u0648\u06cc\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Angular \u062c\u062f\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062a\u0645\u0627\u0645 \u062a\u0635\u0627\u0648\u06cc\u0631\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0622\u067e\u0644\u0648\u062f \u06a9\u0631\u062f\u0647\u200c\u0627\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>ng generate component components\/categories\/storage\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u0638\u0627\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u0633\u067e\u0633 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0631\u0627 \u067e\u06cc\u0648\u0646\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u0645.  \u0627\u06cc\u0646\u0647\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f Angular \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0648\u0628\u0644\u0627\u06af \u0642\u0628\u0644\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u0647 \u0627\u06cc\u0645\u060c \u0644\u0637\u0641\u0627\u064b \u0628\u0631\u0627\u06cc \u062c\u0632\u0626\u06cc\u0627\u062a \u0628\u0647 \u0627\u06cc\u0646 commit \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA_%D8%A2%D9%BE%D9%84%D9%88%D8%AF_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u0622\u067e\u0644\u0648\u062f \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>ng generate component components\/categories\/storage\/image-upload\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc Angular \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u0638\u0627\u0631 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0627\u062e\u0644 \u0645\u0627 <code>storage.component.html<\/code> \u0645\u0627 \u0645\u0637\u0645\u0626\u0646 \u0645\u06cc \u0634\u0648\u06cc\u0645 \u06a9\u0647 \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\">&lt;app-image-upload&gt;&lt;\/app-image-upload&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631\u0648\u0646 <code>image-upload.component.html<\/code>\u060c \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\">&lt;input<\/span>\n  <span class=\"na\">type=<\/span><span class=\"s\">\"file\"<\/span>\n  <span class=\"na\">id=<\/span><span class=\"s\">\"imageUpload\"<\/span>\n  <span class=\"na\">name=<\/span><span class=\"s\">\"imageUpload\"<\/span>\n  <span class=\"na\">accept=<\/span><span class=\"s\">\"image\/png, image\/jpeg\"<\/span>\n  <span class=\"na\">(change)=<\/span><span class=\"s\">\"imageSelected($event)\"<\/span>\n<span class=\"nt\">\/&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u0648\u0631\u0648\u062f\u06cc \u0628\u0647 \u0645\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0632 \u062f\u0633\u062a\u06af\u0627\u0647 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0628\u0627\u06cc\u062f \u0645\u0646\u0637\u0642\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0635\u0648\u06cc\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0645\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u062f \u0628\u0647 \u0622\u0646 \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u0645 <code>image-upload.component.ts<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-image-upload<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/image-upload.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/image-upload.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">ImageUploadComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">selectedFile<\/span><span class=\"p\">:<\/span> <span class=\"nx\">File<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">undefined<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nx\">ngOnInit<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nx\">imageSelected<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Event<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">input<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">HTMLInputElement<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">input<\/span><span class=\"p\">.<\/span><span class=\"nx\">files<\/span><span class=\"p\">?.<\/span><span class=\"nx\">length<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectedFile<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">input<\/span><span class=\"p\">.<\/span><span class=\"nx\">files<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u062a\u063a\u06cc\u0631 SelectFile \u0631\u0627 \u0637\u0648\u0631\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0641\u0627\u06cc\u0644\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.  \u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0622\u067e\u0644\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0631\u0627 \u062f\u0631 \u0627\u0628\u0631 AWS \u0622\u067e\u0644\u0648\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0622\u0646 \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0631\u062f\u0647 \u0628\u0648\u062f\u06cc\u0645. <\/p>\n<p>\u0645\u0627 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0634\u0631\u0648\u0639 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>image-upload.component.html<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\">&lt;input<\/span>\n  <span class=\"na\">type=<\/span><span class=\"s\">\"file\"<\/span>\n  <span class=\"na\">id=<\/span><span class=\"s\">\"imageUpload\"<\/span>\n  <span class=\"na\">name=<\/span><span class=\"s\">\"imageUpload\"<\/span>\n  <span class=\"na\">accept=<\/span><span class=\"s\">\"image\/png, image\/jpeg\"<\/span>\n  <span class=\"na\">(change)=<\/span><span class=\"s\">\"imageSelected($event)\"<\/span>\n<span class=\"nt\">\/&gt;<\/span>\n\n<span class=\"nt\">&lt;button<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"aws-button\"<\/span> <span class=\"na\">(click)=<\/span><span class=\"s\">\"uploadImage()\"<\/span><span class=\"nt\">&gt;<\/span> <span class=\"c\">&lt;!---NEW!--&gt;<\/span>\n  Upload\n<span class=\"nt\">&lt;\/button&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0633 \u0627\u0632 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u0627\u06cc\u0646 \u062f\u06a9\u0645\u0647\u060c \u062a\u0627\u0628\u0639 uploadImage \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062f\u0631 \u0645\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>image-upload.component.ts<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Storage<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ &lt;--- add this<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-image-upload<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/image-upload.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/image-upload.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">ImageUploadComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">selectedFile<\/span><span class=\"p\">:<\/span> <span class=\"nx\">File<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">undefined<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nx\">ngOnInit<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"c1\">\/\/Add this function!<\/span>\n  <span class=\"nx\">uploadImage<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectedFile<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">await<\/span> <span class=\"nx\">Storage<\/span><span class=\"p\">.<\/span><span class=\"nx\">put<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectedFile<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectedFile<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">contentType<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">image\/*<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">level<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">private<\/span><span class=\"dl\">'<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error uploading file: <\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"c1\">\/\/other code<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0628\u062a\u062f\u0627 \u062c\u0632\u0621 Storage \u0631\u0627 \u0627\u0632 \u0622\u0646 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>aws-amplify<\/code>.  \u0633\u067e\u0633 \u0645\u0627 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>uploadImage<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06a9\u0647 \u062a\u0648\u0633\u0637 \u062f\u06a9\u0645\u0647 \u062c\u062f\u06cc\u062f \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0627\u0632 \u0645\u0648\u0644\u0641\u0647 Amplify Storage \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u062a\u062f put \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644\u060c \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0641\u0627\u06cc\u0644 \u0648 \u0628\u0631\u062e\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u0634\u0627\u0645\u0644 \u0646\u0648\u0639 \u0641\u0627\u06cc\u0644 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0645\u0627 \u0648 \u0633\u0637\u062d \u0645\u062c\u0648\u0632 \u0645\u06cc \u0628\u0627\u0634\u062f.  \u062a\u0646\u0638\u06cc\u0645 \u0633\u0637\u062d \u0628\u0647 <code>private<\/code> \u06cc\u0639\u0646\u06cc \u062a\u0646\u0647\u0627 \u06a9\u0627\u0631\u0628\u0631\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0622\u067e\u0644\u0648\u062f \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u0634\u062a. <\/p>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u06cc\u0646 \u0631\u0627 \u062f\u0631 \u062c\u0627\u06cc \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u06cc\u0645\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u0648\u0631\u0648\u062f\u06cc \u062e\u0648\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u06a9\u0645\u0647 \u062c\u062f\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0622\u067e\u0644\u0648\u062f \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0645\u0627 \u0647\u0646\u0648\u0632 \u0647\u06cc\u0686 \u0628\u0627\u0632\u062e\u0648\u0631\u062f\u06cc \u0646\u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645\u060c \u0627\u06af\u0631 \u0628\u0647 \u06a9\u0646\u0633\u0648\u0644 AWS \u062e\u0648\u062f \u062f\u0631 S3 \u0628\u0631\u0648\u06cc\u0645 \u0648 \u0633\u0637\u0644 \u062e\u0648\u062f \u0631\u0627 \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 \u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 &#8220;private&#8221; \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u062d\u0627\u0648\u06cc \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0627 \u0634\u0646\u0627\u0633\u0647 \u0634\u0646\u0627\u0633\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u0627 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631  \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u06cc\u0646 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062a\u0635\u0648\u06cc\u0631\u06cc \u0631\u0627 \u06a9\u0647 \u0622\u067e\u0644\u0648\u062f \u0634\u062f\u0647 \u0627\u0633\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<p><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%A8%D8%A7%D8%B2%D8%AE%D9%88%D8%B1%D8%AF_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA_%D8%A2%D9%BE%D9%84%D9%88%D8%AF_%D9%81%D8%A7%DB%8C%D9%84\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u067e\u06cc\u0634\u0631\u0641\u062a \u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627\u0632\u062e\u0648\u0631\u062f\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0641\u0631\u0622\u06cc\u0646\u062f \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u0645.  \u0645\u0627 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 enum \u0628\u0631\u0627\u06cc \u0648\u0636\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc \u0622\u067e\u0644\u0648\u062f \u0627\u062d\u062a\u0645\u0627\u0644\u06cc \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u0645\u062a\u063a\u06cc\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u062e\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0648\u0636\u0639\u06cc\u062a \u0635\u062d\u06cc\u062d \u0631\u0627 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a \u0641\u0631\u0622\u06cc\u0646\u062f \u0622\u067e\u0644\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.  \u062f\u0631 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062e\u0648\u062f\u060c \u0645\u062a\u0646\u06cc \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0646\u0634\u0627\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f.<\/p>\n<p>\u0645\u0627 \u0627\u0628\u062a\u062f\u0627 \u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>image-upload.component.ts<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Storage<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/Add this!<\/span>\n<span class=\"kr\">enum<\/span> <span class=\"nx\">UploadState<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">IDLE<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">UPLOADING<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">UPLOAD_COMPLETE<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ERROR<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-image-upload<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/image-upload.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/image-upload.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">ImageUploadComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">selectedFile<\/span><span class=\"p\">:<\/span> <span class=\"nx\">File<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">undefined<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">;<\/span>\n  <span class=\"c1\">\/\/Add these 3:<\/span>\n  <span class=\"nx\">uploadStates<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">UploadState<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">uploadState<\/span><span class=\"p\">:<\/span> <span class=\"nx\">UploadState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">UploadState<\/span><span class=\"p\">.<\/span><span class=\"nx\">IDLE<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">progressText<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nx\">ngOnInit<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nx\">uploadImage<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">uploadState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">UploadState<\/span><span class=\"p\">.<\/span><span class=\"nx\">UPLOADING<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ &lt;--- Add this<\/span>\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectedFile<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">await<\/span> <span class=\"nx\">Storage<\/span><span class=\"p\">.<\/span><span class=\"nx\">put<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectedFile<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectedFile<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">contentType<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">image\/*<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">level<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">private<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">progressCallback<\/span><span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">progressCallback<\/span> <span class=\"c1\">\/\/ &lt;---- Add this<\/span>\n      <span class=\"p\">});<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">uploadState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">UploadState<\/span><span class=\"p\">.<\/span><span class=\"nx\">UPLOAD_COMPLETE<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ &lt;--- Add this<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">uploadState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">UploadState<\/span><span class=\"p\">.<\/span><span class=\"nx\">ERROR<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ &lt;---- Add this<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error uploading file: <\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"c1\">\/\/Add this function!<\/span>\n  <span class=\"nx\">progressCallback<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">progress<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">progressText<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`Uploaded: <\/span><span class=\"p\">${(<\/span><span class=\"nx\">progress<\/span><span class=\"p\">.<\/span><span class=\"nx\">loaded<\/span> <span class=\"o\">\/<\/span> <span class=\"nx\">progress<\/span><span class=\"p\">.<\/span><span class=\"nx\">total<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span>\n      <span class=\"mi\">100<\/span><span class=\"p\">}<\/span><span class=\"s2\"> %`<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"nx\">imageSelected<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Event<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">uploadState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">UploadState<\/span><span class=\"p\">.<\/span><span class=\"nx\">IDLE<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ &lt;---- Add this<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">input<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">HTMLInputElement<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">input<\/span><span class=\"p\">.<\/span><span class=\"nx\">files<\/span><span class=\"p\">?.<\/span><span class=\"nx\">length<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectedFile<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">input<\/span><span class=\"p\">.<\/span><span class=\"nx\">files<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648\u0636\u0639\u06cc\u062a \u0622\u067e\u0644\u0648\u062f \u062f\u0631 \u0634\u0631\u0648\u0639 \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>IDLE<\/code>\u060c \u062a\u063a\u06cc\u06cc\u0631 \u0628\u0647 <code>UPLOADING<\/code> \u0648 \u06cc\u0627 \u0648\u0627\u0631\u062f \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>UPLOADING_COMPLETE<\/code> \u06cc\u0627 <code>ERROR<\/code> \u0628\u0633\u062a\u0647 \u0628\u0647 \u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 \u062a\u0645\u0627\u0633 \u0628\u0647 Amplify Storage.  \u062a\u0627\u0628\u0639 Storage.put \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u062a\u0639\u0631\u06cc\u0641 a \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f <code>progressCallback<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647 \u0645\u0646\u0638\u0648\u0631 \u067e\u06cc\u06af\u06cc\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a \u0622\u067e\u0644\u0648\u062f. <\/p>\n<p>\u067e\u0633 \u0627\u0632 \u062a\u0646\u0638\u06cc\u0645 \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f\u060c \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>image-upload.component.html<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\">&lt;!---Existing code--&gt;<\/span>\n\n<span class=\"nt\">&lt;p<\/span>\n  <span class=\"na\">*ngIf=<\/span><span class=\"s\">\"\n    uploadState === uploadStates.UPLOADING ||\n    uploadState === uploadStates.UPLOAD_COMPLETE\n  \"<\/span>\n<span class=\"nt\">&gt;<\/span>\n  {{ progressText }}\n<span class=\"nt\">&lt;\/p&gt;<\/span>\n<span class=\"nt\">&lt;p<\/span> <span class=\"na\">*ngIf=<\/span><span class=\"s\">\"uploadState === uploadStates.UPLOAD_COMPLETE\"<\/span><span class=\"nt\">&gt;<\/span>\n  Upload complete!\n<span class=\"nt\">&lt;\/p&gt;<\/span>\n\n<span class=\"nt\">&lt;p<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"error-text\"<\/span> <span class=\"na\">*ngIf=<\/span><span class=\"s\">\"uploadState === uploadStates.ERROR\"<\/span><span class=\"nt\">&gt;<\/span>\n  Something went wrong with the file upload\n<span class=\"nt\">&lt;\/p&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0647\u0646\u06af\u0627\u0645 \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0627\u0648\u06cc\u0631\u060c \u0628\u0627\u0632\u062e\u0648\u0631\u062f\u0647\u0627\u06cc\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0645\u062c\u0645\u0648\u0639\u0647 \u06a9\u0627\u0645\u0644 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0627\u06cc\u0646 commit \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u062a\u0635\u0648\u06cc\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0622\u067e\u0644\u0648\u062f \u06a9\u0646\u06cc\u0645\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u062a\u0645\u0627\u0645 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0622\u067e\u0644\u0648\u062f \u0634\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062c\u0632\u0621 \u062a\u0635\u0648\u06cc\u0631-\u0622\u0644\u0628\u0648\u0645 \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>ng generate component components\/categories\/storage\/image-album\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645 <code>image-album.component.ts<\/code> \u062d\u0627\u0648\u06cc \u0645\u0646\u0637\u0642 \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0647\u0645\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0627:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Storage<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">Image<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">key<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">url<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-image-album<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/image-album.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/image-album.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">ImageAlbumComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">images<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Image<\/span><span class=\"p\">[]<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n\n  <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nx\">ngOnInit<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">getAllImages<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nx\">getAllImages<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">Storage<\/span><span class=\"p\">.<\/span><span class=\"nx\">list<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">level<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">private<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span>\n      <span class=\"p\">.<\/span><span class=\"nx\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">(<\/span><span class=\"k\">async<\/span> <span class=\"nx\">imageObject<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">objectKey<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">imageObject<\/span><span class=\"p\">.<\/span><span class=\"nx\">key<\/span><span class=\"p\">;<\/span>\n\n          <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">objectKey<\/span> <span class=\"o\">!==<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">signedURL<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">Storage<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"nx\">objectKey<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n              <span class=\"na\">level<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">private<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n              <span class=\"na\">download<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span>\n            <span class=\"p\">});<\/span>\n\n            <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">images<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">({<\/span> <span class=\"na\">key<\/span><span class=\"p\">:<\/span> <span class=\"nx\">objectKey<\/span><span class=\"p\">,<\/span> <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"nx\">signedURL<\/span> <span class=\"p\">});<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">});<\/span>\n      <span class=\"p\">})<\/span>\n      <span class=\"p\">.<\/span><span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0645\u0647\u0645\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0622\u0646\u0647\u0627 \u062a\u0648\u062c\u0647 \u06a9\u0631\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0633\u0637\u0648\u062d \u0631\u0627 \u062f\u0631 \u0647\u0631 \u062f\u0648 \u062d\u0627\u0644\u062a \u062e\u0635\u0648\u0635\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f <code>Storage.list<\/code> \u0648 <code>Storage.get<\/code> \u06a9\u0627\u0631\u06a9\u0631\u062f.  \u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646\u06a9\u0647 \u0645\u0627 \u0628\u0627\u06cc\u062f \u0627\u0632 \u062f\u0648 \u062a\u0627\u0628\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 <code>Storage.list<\/code> \u0641\u0642\u0637 \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0634\u06cc\u0627 \u0628\u0647 \u0645\u0627 \u0645\u06cc \u062f\u0647\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u06a9\u0644\u06cc\u062f \u06cc\u06a9\u062a\u0627 \u062f\u0631 <code>S3<\/code>.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u0627\u0632 URL \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627 \u0622\u0646 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0634\u06cc \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0627 \u0628\u0647 \u06cc\u06a9 URL \u0627\u0645\u0636\u0627 \u0634\u062f\u0647 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645.  \u0686\u0648\u0646 \u0645\u0627 \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0627\u06cc\u0645 \u0648 \u0628\u0627 \u0622\u0646 \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u06cc\u0645 <code>Storage.get<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627 <code>private<\/code> \u0633\u0637\u062d\u060c <code>Amplify Storage<\/code> \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u06a9\u062f\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u062a\u0623\u06cc\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u06cc\u0646 \u0634\u06cc \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u062f \u0648 \u06cc\u06a9 URL \u0627\u0645\u0636\u0627 \u0634\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645 <code>Image<\/code> \u0631\u0627\u0628\u0637\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062d\u0627\u0648\u06cc \u06a9\u0644\u06cc\u062f \u062a\u0635\u0648\u06cc\u0631 \u0648 \u0646\u0634\u0627\u0646\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0627\u0645\u0636\u0627 \u0634\u062f\u0647 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0634\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>S3<\/code>.  \u0645\u0627 \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0631\u0648\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062a\u0635\u0627\u0648\u06cc\u0631 \u062f\u0631 \u0622\u0646\u0647\u0627 \u062d\u0644\u0642\u0647 \u0645\u06cc \u0632\u0646\u06cc\u0645 <code>image-album.component.html<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"container\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"row\"<\/span> <span class=\"na\">*ngFor=<\/span><span class=\"s\">\"let image of images\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-lg-2\"<\/span><span class=\"nt\">&gt;&lt;\/div&gt;<\/span>\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-lg-8\"<\/span><span class=\"nt\">&gt;<\/span>\n      <span class=\"nt\">&lt;img<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"album-image\"<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"{{ image.url }}\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-lg-2\"<\/span><span class=\"nt\">&gt;&lt;\/div&gt;<\/span>\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\n<span class=\"nt\">&lt;\/div&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0627\u0632 \u0637\u0631\u06cc\u0642 imageUrls \u062d\u0644\u0642\u0647 \u0645\u06cc \u0632\u0646\u062f \u0648 \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0631\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.  \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0639\u0631\u0636 \u0648 \u06a9\u0645\u06cc \u062d\u0627\u0634\u06cc\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0634\u0648\u062f <code>image-album.component.css<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.album-image<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">8px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u0648\u0646\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/02\/1676871286_3_\u0633\u0631\u06cc-Amplify\u060c-\u0642\u0633\u0645\u062a-5-\u0622\u067e\u0644\u0648\u062f-\u0648-\u0628\u0627\u0632\u06cc\u0627\u0628\u06cc-\u062a\u0635\u0627\u0648\u06cc\u0631-\u0628\u0627-Amplify.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"880\" height=\"873\" title=\"\"><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u06a9\u062f\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0633\u06cc\u0645 \u06a9\u0634\u06cc \u0645\u0648\u0644\u0641\u0647 \u062c\u062f\u06cc\u062f\u060c \u0627\u06cc\u0646 commit \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA_%D8%AD%D8%B0%D9%81_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u062d\u0630\u0641 \u062a\u0635\u0648\u06cc\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u062f\u06a9\u0645\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u062a\u0635\u0627\u0648\u06cc\u0631\u06cc \u06a9\u0647 \u0622\u067e\u0644\u0648\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.  \u0627\u0628\u062a\u062f\u0627 a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>removeImage<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0631 \u0645\u0627 <code>image-album.component.ts<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"nx\">removeImage<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">await<\/span> <span class=\"nx\">Storage<\/span><span class=\"p\">.<\/span><span class=\"nx\">remove<\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">level<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">private<\/span><span class=\"dl\">'<\/span> <span class=\"p\">});<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">images<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">getAllImages<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0622\u0631\u0627\u06cc\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u062c\u062f\u062f\u0627\u064b \u0627\u062e\u062a\u0635\u0627\u0635 \u0645\u06cc \u062f\u0647\u06cc\u0645 \u062a\u0627 Angular \u0631\u0627 \u0645\u062c\u0628\u0648\u0631 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0645\u0648\u0644\u0641\u0647 \u062a\u0635\u0648\u06cc\u0631-\u0622\u0644\u0628\u0648\u0645 \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0631\u0646\u062f\u0631 \u06a9\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0627 \u0648\u0627\u0642\u0639\u0627\u064b \u062d\u0630\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0633\u067e\u0633 \u0645\u0627 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>image-album.component.html<\/code> \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 &#8220;x&#8221; \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0647\u0631 \u062a\u0635\u0648\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"container\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"row\"<\/span> <span class=\"na\">*ngFor=<\/span><span class=\"s\">\"let image of images\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-lg-2\"<\/span><span class=\"nt\">&gt;&lt;\/div&gt;<\/span>\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-lg-8\"<\/span><span class=\"nt\">&gt;<\/span>\n      <span class=\"nt\">&lt;img<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"album-image\"<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"{{ image.url }}\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-lg-2\"<\/span><span class=\"nt\">&gt;<\/span> <span class=\"c\">&lt;!--NEW! --&gt;<\/span>\n      <span class=\"nt\">&lt;button<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"remove-image-button\"<\/span> <span class=\"na\">(click)=<\/span><span class=\"s\">\"removeImage(image.key)\"<\/span><span class=\"nt\">&gt;<\/span>\n        x\n      <span class=\"nt\">&lt;\/button&gt;<\/span>\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\n<span class=\"nt\">&lt;\/div&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u06a9\u0645\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0647 \u062f\u06a9\u0645\u0647 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.remove-image-button<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"m\">0px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nb\">transparent<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0627\u06a9\u0646\u0648\u0646 \u062f\u06a9\u0645\u0647 \u0627\u06cc \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/02\/1676871287_239_\u0633\u0631\u06cc-Amplify\u060c-\u0642\u0633\u0645\u062a-5-\u0622\u067e\u0644\u0648\u062f-\u0648-\u0628\u0627\u0632\u06cc\u0627\u0628\u06cc-\u062a\u0635\u0627\u0648\u06cc\u0631-\u0628\u0627-Amplify.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"880\" height=\"1025\" title=\"\"><\/p>\n<p>\u0645\u062b\u0644 \u0647\u0645\u06cc\u0634\u0647\u060c \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0627\u06cc\u0646 commit \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%AD%D8%AF%D8%A7%DA%A9%D8%AB%D8%B1_%D8%AA%D8%B9%D8%AF%D8%A7%D8%AF_%D8%A2%D9%BE%D9%84%D9%88%D8%AF_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%87%D8%B1_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1\"><\/span>\n<p>  \u062a\u0646\u0638\u06cc\u0645 \u062d\u062f\u0627\u06a9\u062b\u0631 \u062a\u0639\u062f\u0627\u062f \u0622\u067e\u0644\u0648\u062f \u0628\u0631\u0627\u06cc \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0622\u062e\u0631\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0631\u0627\u06cc \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062d\u062f\u0627\u06a9\u062b\u0631 \u062a\u0639\u062f\u0627\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0627\u0632\u0627\u06cc \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0645\u0627 \u0633\u06cc\u0644 \u0646\u06a9\u0646\u062f. <code>S3<\/code> \u0633\u0637\u0644 \u0647\u0627  \u0645\u0627 \u0645\u0644\u06a9\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0646\u062f\u0627\u0631\u06cc\u0645 <code>Amplify Storage<\/code> \u062c\u0632\u0621\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0627 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u0631\u0627 \u062e\u0648\u062f\u0645\u0627\u0646 \u0628\u0633\u0627\u0632\u06cc\u0645.  \u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0631\u0627\u0647 \u062d\u0644 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0641\u0642\u0637 \u06cc\u06a9 \u0628\u0631\u0631\u0633\u06cc frontend \u0627\u0633\u062a\u060c \u0647\u06cc\u0686 \u0628\u0631\u0631\u0633\u06cc \u0648\u0627\u0642\u0639\u06cc \u0631\u0648\u06cc \u062e\u0648\u062f \u0633\u0637\u0644 \u0628\u0647 \u0627\u0632\u0627\u06cc \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f. <\/p>\n<p>\u0645\u0627 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>image-upload.component.ts<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Storage<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">MAX_NUMBER_OF_IMAGES_PER_USER<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">10<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">enum<\/span> <span class=\"nx\">UploadState<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">IDLE<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">UPLOADING<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">UPLOAD_COMPLETE<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ERROR<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">MAX_REACHED<\/span> <span class=\"c1\">\/\/ &lt;--- add this!<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-image-upload<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/image-upload.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/image-upload.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">ImageUploadComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/Existing code...<\/span>\n\n  <span class=\"nx\">uploadImage<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">uploadState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">UploadState<\/span><span class=\"p\">.<\/span><span class=\"nx\">UPLOADING<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectedFile<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/Add this part!<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">userImages<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">Storage<\/span><span class=\"p\">.<\/span><span class=\"nx\">list<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">level<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">private<\/span><span class=\"dl\">'<\/span> <span class=\"p\">});<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">userImages<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;=<\/span> <span class=\"nx\">MAX_NUMBER_OF_IMAGES_PER_USER<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">uploadState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">UploadState<\/span><span class=\"p\">.<\/span><span class=\"nx\">MAX_REACHED<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n\n     <span class=\"c1\">\/\/Existing code...<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/Existing code ...<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"c1\">\/\/Existing code...<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u062d\u0627\u0644\u062a \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>MAX_REACHED<\/code> \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a \u0648\u062c\u0648\u062f \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u062a\u0646\u0638\u06cc\u0645 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.  \u062f\u0631\u0648\u0646 <code>uploadImage<\/code> \u062a\u0627\u0628\u0639 \u0645\u0627 \u06cc\u06a9 \u0628\u0631\u0631\u0633\u06cc \u062c\u062f\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0627\u0628\u062a\u062f\u0627 \u0627\u0634\u06cc\u0627\u0621 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0644\u06cc\u0633\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u0637\u0648\u0644 \u0628\u0631\u0627\u0628\u0631 \u0627\u0633\u062a \u06cc\u0627 \u0628\u0632\u0631\u06af\u062a\u0631 \u0627\u0632 \u062d\u062f\u0627\u06a9\u062b\u0631.  \u0627\u06af\u0631 \u0627\u06cc\u0646\u0637\u0648\u0631 \u0628\u0627\u0634\u062f\u060c \u0648\u0636\u0639\u06cc\u062a \u0622\u067e\u0644\u0648\u062f \u0631\u0627 \u0631\u0648\u06cc \u0622\u0646 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>MAX_REACHED<\/code> \u0648 \u0622\u067e\u0644\u0648\u062f \u0631\u0627 \u0645\u062a\u0648\u0642\u0641 \u06a9\u0646\u06cc\u062f<\/p>\n<p>\u062f\u0631 \u0645\u0627 <code>image-upload.component.html<\/code>\u060c \u06cc\u06a9 \u067e\u06cc\u0627\u0645 \u062e\u0637\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0648\u0636\u0639\u06cc\u062a \u0622\u067e\u0644\u0648\u062f \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\">&lt;!---Existing code...--&gt;<\/span>\n\n<span class=\"nt\">&lt;p<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"error-text\"<\/span> <span class=\"na\">*ngIf=<\/span><span class=\"s\">\"uploadState === uploadStates.MAX_REACHED\"<\/span><span class=\"nt\">&gt;<\/span>\n  Reached maximum amount of uploads. Please remove an image before trying again.\n<span class=\"nt\">&lt;\/p&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644\u0627 \u0648\u0642\u062a\u06cc \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u062a\u0635\u0648\u06cc\u0631 \u06cc\u0627\u0632\u062f\u0647\u0645 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645\u060c \u067e\u06cc\u0627\u0645 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/02\/1676871287_73_\u0633\u0631\u06cc-Amplify\u060c-\u0642\u0633\u0645\u062a-5-\u0622\u067e\u0644\u0648\u062f-\u0648-\u0628\u0627\u0632\u06cc\u0627\u0628\u06cc-\u062a\u0635\u0627\u0648\u06cc\u0631-\u0628\u0627-Amplify.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"880\" height=\"219\" title=\"\"><\/p>\n<p>\u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%D8%B9%D8%AF%DB%8C_%D9%87%D9%88%D8%B4_%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C_%D9%88_ML_%D8%A8%D8%A7_%D9%BE%DB%8C%D8%B4%E2%80%8C%D8%A8%DB%8C%D9%86%DB%8C%E2%80%8C%D9%87%D8%A7%DB%8C_%D8%AA%D9%82%D9%88%DB%8C%D8%AA%E2%80%8C%DA%A9%D9%86%D9%86%D8%AF%D9%87\"><\/span>\n<p>  \u0628\u0639\u062f\u06cc: \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0648 ML \u0628\u0627 \u067e\u06cc\u0634\u200c\u0628\u06cc\u0646\u06cc\u200c\u0647\u0627\u06cc \u062a\u0642\u0648\u06cc\u062a\u200c\u06a9\u0646\u0646\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0648\u0628\u0644\u0627\u06af \u0627\u0632 <code>Amplify Storage<\/code> \u062f\u0633\u062a\u0647 \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0648\u062c\u0648\u062f \u0645\u0627 \u0628\u0647 \u0645\u0646\u0638\u0648\u0631 \u0622\u067e\u0644\u0648\u062f\u060c \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062d\u0630\u0641 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647 \u0627\u0632\u0627\u06cc \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631.  \u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0628\u0639\u062f\u06cc \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u062f\u0631\u062a \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0648 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646\u06cc \u0628\u0627 \u0622\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a <code>Amplify Predictions<\/code>.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0628\u0627 \u0648\u062c\u0648\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627\u060c \u0627\u06a9\u0646\u0648\u0646 \u0632\u0645\u0627\u0646 \u0622\u0646 \u0641\u0631\u0627 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0631\u062e\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0647\u0627\u06cc Amplify\u060c \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u0636\u0627\u0641\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f Amplify Storage \u0628\u0631\u0627\u06cc \u0622\u067e\u0644\u0648\u062f \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0632 AWS \u062a\u0646\u0647\u0627 \u062f\u0631 \u0686\u0646\u062f \u0645\u0631\u062d\u0644\u0647. \u0645\u0627 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0634\u0631\u0648\u0639 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f Amplify Storage &hellip;<\/p>\n","protected":false},"author":2,"featured_media":7204,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-7203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/7203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=7203"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/7203\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/7204"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=7203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=7203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=7203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}