それは常にスクリプトから始まります。ここで迅速なシャープの変更、そこでバケットアップロード。6ヶ月後、あなたはiPhoneから破損したHEICファイルをジョギングし、カットされたフロントについての怒りのサポートチケット、そしてあなたの「単純な」プロフィール画像ファイルアップロードを自分のミニプロジェクトのように感じさせる技術債務の堆積。 DIY スクリプトからサービスベースのアプローチへの移行が、謙虚な「プロフィール画像をアップロード」機能を強力でスケーラブルで、実際にはあなたとユーザーの両方にとって楽しいものに変える方法を調べてみましょう。 Key Takeaways 
 
 
 
 
 
 DIY スクリプトはスケールしない - シンプルなリサイズとして始まるものは、フルタイムのメンテナンス負荷に終わります。 アップロードをブロックすると UX が破壊されます - ユーザーはサーバー側の処理を待つのを待つべきではありません。 Filestack Pickerは即座にアップグレードします - 複数のソースのアップロード + 数行のコードでブラウザ内編集。 Asynchronous workflows win - disconnect heavy processing and keep the UI responsive. アシンクロンのワークフローが勝利します。 クリーンで安価なストレージ - ダウンロードにより、オリジナルを自動的に削除し、最適化されたバージョンを保持できます。 「シンプルな」スクリプトの隠されたコスト 粘着コードの小さな部分のように見えるものは、急速にを成長させます: 
 
 
 
 
 ユーザーエクスペリエンスをブロック - アップロード、サイズ変更、ストレージ ... ユーザーはスピナーを見ているのに閉じ込められています。 「ユーザーはInstagramからアップロードできますか?アップロード前に収穫できますか?」 各リクエスト = 新しいライブラリ + 新しい複雑性。 メンテナンスオーバーヘッド - あなたはスケーリング、パッチング、ストレージ、およびエラー処理を所有しています。 脆弱なエラー処理 - 破損したファイル、サポートされていないフォーマット、ライブラリの崩壊. ユーザーは暗号化のエラー - あるいはさらに悪い、破損したプロフィールページに終わります。 より賢い道のり 良いニュース? あなたはこれらの頭痛と共に生きる必要はありません。 車輪を再発明する代わりに(そして永遠に維持する) 同じプロフィール画像のフローを再構築する方法を調べてみましょう - しかし、今回は強力で機能豊富なスタックで、容易にスケールできます。 Offload image handling to a dedicated service (画像処理を専用サービスにオフロード) Offload image handling to a dedicated service (画像処理を専用サービスにオフロード) ステップ1:置き換え リアル・ピッカー <input type="file"> <input type=ファイル> 一般的なファイル入力の代わりに、Filestack Picker を落とします。 const client = filestack.init(key, { security }); const picker = client.picker(options); picker.open(); ✅デバイス、クラウドストレージ、ウェブカメラ、ソーシャルメディアからのアップロードをサポートします。 コレッピング、ロータリング、およびフィルターのための内蔵のエディター。 Step 2: Show Instant Previews with CDN Transformations (CDN変換でインスタントプレビューを表示する) ユーザーがサーバー処理を待つのを止めないでください. ファイルをアップロードすると、ユニークなファイルハンドルが表示されます. Filestack の変換 CDN に接続して、すぐにプレビューを表示してください: https://cdn.filestackcontent.com/resize=width:400,height:400,fit:crop/circle/HANDLE ユーザーはすぐに新しいプロフィール画像を見ることができますが、実際の処理は背景で行われます。 Step 3: Offload Heavy Lifting with Workflows (ワークフロー) 後ろのシーンでは、まだ400×400にサイズを変更し、最適化し、保存する必要があります。 const wfUrl = `https://cdn.filestackcontent.com/security=p:${p},s:${s}/run_workflow=id:${wfID}/${handle}`;

fetch(wfUrl)
 .then(res => res.json())
 .then(result => pollWorkflowStatus(result.jobid, handle));
 ワークフローは、イメージ処理タスクの非同期、サーバーレスチェーンです. あなたのアプリは仕事を停止し、その後、人生を継続します. 同時に、投票機能は、状態をチェックし、ユーザーフレンドリーな更新を提供します。 「あなたのイメージを処理する・・・」 Step 3.5: Workflow Status API を使用して JSON 結果を取得する ワークフローを起動した後、いつ終了し、出力がどう見えるかを知りたいでしょう。 エンドポイントが入ってきます。 workflow_status あなたのアプリは、状態が変更されるまで、ワークフローの仕事をアンケートできます。 , 次に JSON パイロードをキャプチャして、最終的に保存されたファイル URL を抽出します。 "Finished" function pollWorkflowStatus(job, handle) {
 const wfStatusUrl = `https://cdn.filestackcontent.com/${key}/security=p:${p},s:${s}/workflow_status=job_id:${job}`;

 fetch(wfStatusUrl)
 .then((response) => response.json())
 .then((data) => {
 console.log('Workflow status:', data);

 if (data.status === "Finished") {
 // Look through results to find the stored file URL
 let finalImageUrl = null;
 if (data.results) {
 for (const k in data.results) {
 const result = data.results[k];
 if (result.data && result.data.url) {
 finalImageUrl = result.data.url;
 break;
 }
 }
 }

 if (finalImageUrl) {
 const securedUrl = finalImageUrl + `?policy=${p}&signature=${s}`;
 document.getElementById("profile-pic").src = securedUrl;
 }
 } else if (data.status === "Failed") {
 console.error("Workflow failed:", data);
 } else {
 // Still processing → poll again in 3s
 setTimeout(() => pollWorkflowStatus(job, handle), 3000);
 }
 })
 .catch((error) => console.error("Polling error:", error));
}
 この JSON は、あなたに: 
 
 
 
 仕事の状態(待機、実行、終了、失敗) 各ワークフローのステップの詳細な結果。 最終的な、最適化されたプロフィール画像のための data.url。 ステップ4:完成と清掃 ワークフローが終了したら: 
 
 
 プロフィールの src を一時的なプレビューから最終的に処理された URL に更新します。 API を呼び出して、処理されていない元のファイルを削除します - ストレージを清潔にし、コストを削減します。 これは、あなたのアプリが常に最適化された画像を表示し、ストレージに重荷を積み重ねるのを避けることを意味します。 なぜサービスが毎回DIYを叩くのか 
 
 
 
 
 
 
 
 
 
 
 
 
 Feature 
 Custom Script 
 Filestack Workflow 
 
 
 
 
 User Experience 
 Blocking, spinner, limited 
 Non-blocking, instant previews 
 
 
 
 
 Functionality 
 Resize only 
 Upload from 15+ sources, editor 
 
 
 
 
 Performance 
 Limited by your server 
 Global CDN + async workflows 
 
 
 
 
 Maintenance 
 You patch + scale everything 
 Zero maintenance overhead 
 
 
 
 
 Scalability 
 Manual infra scaling 
 Auto-scales to any load 
 
 
 
 
 Security 
 DIY signed URLs + ACLs 
 Declarative Security Policies ユーザー体験 ブロック, Spinner, Limited 非ブロック、インスタントプレビュー 機能性 リサイクル Only 15+ ソースからアップロード、編集者 実績 あなたのサーバーによる制限 グローバル CDN + async ワークフロー 保守 You Patch + Scale すべて ゼロメンテナンス Overhead スケーラリティ インフラスケーリング Manual Infra Scaling Auto-scales to any load (自動スケール) セキュリティ DIY サインした URL + ACLs 宣言型セキュリティ政策 GitHubの完全な例 We have published the このダッシュボードのUI、Picker 統合、ワークフロートリガー、 投票、掃除。 complete working demo, which includes workflow_status ↓↓ 詳細はGitHubでご覧ください。 ベビーシッタープロフィール写真 プロフィール画像のアップロードは小さく見えるかもしれませんが、チェックされず、メンテナンス、エッジケース、パフォーマンスのボトルネックの頭痛に吹き込まれますが、 DIY する必要はありません。 
 
 
 
 すぐにより良い体験を提供します(インスタントプレビュー、編集ツール、複数のソース)。 脆弱な粘着コードとスケーリングの懸念を排除します。 イメージ処理ではなく、実際の製品に焦点を当てるようにチームを自由にします。 ドクトタッピングのアップロードを止め、ユーザーに50行未満のコードで迅速かつ磨かれたプロフィール画像体験を提供し、エンジニアリングの知識を節約してください。 Written by Carl Cruz, Product Marketing Manager at Filestack ,with four years of dedicated experience. 
 
 この記事はもともとFilestackのブログに掲載されました。 This article was originally published on the . Filestack blog Filestack ブログ

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

このオーディオは、ストーリーの元の言語で制作されています。

プロフィール画像のアップロードの頭痛をフィールスタックワークフローで修正する方法

About Author

コメント

ラベル

この記事は

Related Stories

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

ユニークなエコシステムを支えるビットコインUTXOのモデル

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

ユニークなエコシステムを支えるビットコインUTXOのモデル

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps