Այն միշտ սկսվում է սեղմիչի հետ: Այստեղ արագ Sharp- ի փոխանակման, այստեղ բուխի upload- ի: Շատ ամիս հետո, դուք սեղմում եք սեղմվող HEIC ֆայլերը iPhone- ից, սեղմված աջակցության տոմսերը կտրված ափսերի մասին, եւ տեխնիկական ծախսերի բաղադրիչը, որը կարող է ձեր "մեշտ" պրոֆիլային ֆայլը բուխիչը զգալ որպես ձեր սեփական mini-project. Տեսեք, թե ինչպիսիք են, որ փոխանցում է DIY- ի գրասենյակից ծառայության վրա հիմնված approach- ում, փոխանցում է հզոր «բեռնել պրոֆիլային նկարը» առանձնահատկությունը այնպես, թե ինչպիսիք են հզոր, ծախսելի եւ իրականում երջանիկ - ձեզ եւ ձեր օգտագործողների համար: Հիմնական Takeaways 
 
 
 
 
 
 DIY սերտիֆիկներ չեն ծախսել - ինչը սկսվում է որպես պարզ վերահսկողություն, ավարտվում է ամբողջ ժամանակի սպասարկման բջջային: Blocking upload kill UX - օգտվողները պետք է չգիտեն, որ սպասում են server-side processing. Filestack Picker- ը անմիջապես վերահսկվում է - մի քանի սեղանների բեռնել + բեռնել մի քանի գծի կոդը: Asynchronous workflows- ը հաղթում է, ինչպիսիք են խոշոր processing- ը, եւ UI-ը վերահսկվում է: Լավագույն սարքավորումներ, ավելի գեղեցիկ սարքավորումներ: Հեռնելը թույլ է տալիս Ձեզ ավտոմատ վերահսկել Original- ները եւ միայն պահպանել optimized տարբերակները: The Hidden Costs of a “Simple” Script- ը Այն, ինչ տեսնում է, որ մի փոքր քիչ բաղադրատոմսը արագ աճում է: 
 
 
 
 
 Օգտագործման փորձը բլոգում է - upload, redimension, store... Օգտագործողը կանգնած է տեսնում spinner. Slow ցանցեր կամ մեծ ֆայլերը կախված են այն. Պահպանված գործառույթը - PM- ը հարցնում է: «Ինչպե՞ս օգտվողները կարող են բեռնել Instagram- ից: Արդյոք նրանք կարող են բեռնել բեռնել մինչեւ բեռնել?» Բոլոր պահանջները = նոր գրասենյակներ + նոր ծախսերը: Մատակարարման վերահսկողություն - Դուք ունեք scaling, patching, storage, եւ սխալ վերահսկողություն: Խնդրում ենք, դուք այժմ վերահսկողում եք mini image-processing պլատֆորմացիա. Փոխանցված սխալների կառավարման - Փոխանցված ֆայլեր, չի աջակցված ֆայլեր, գրասենյակային սխալներ. Ձեր օգտվողները վերջապես կախված են սխալների հետ - կամ ավելի վատ, սխալ պրոֆիլների էջերը: Լավագույն ճանապարհը առաջ Լավ նորություն: Դուք չեք պետք է ապրել այդ բաղադրիչների հետ: Մինչեւ վերադառնալ սերտիֆիկը (լուսանկարներ) Տեսեք, թե ինչպես կարող եք վերահսկել նույն պրոֆիլային տեսանյութը, բայց այս անգամ հզոր, ֆունկցիոնալ պտուտակով, որը հեշտությամբ ծախսում է: Հեռնել տեսանյութերի կառավարման համար մասնավոր ծառայություն Հեռնել տեսանյութերի կառավարման համար մասնավոր ծառայություն Ապրիլ 1-ը փոխարինելու համար Real Picker-ի հետ <input type="file"> <input type="file"> Հեղինակը Տեղադրեք Filestack Picker- ում բջջային ֆայլը: const client = filestack.init(key, { security }); const picker = client.picker(options); picker.open(); ✅ աջակցում է բեռնել սարքերից, Cloud Storage, webcams, եւ social media. ✅ Բջջային Edit- ի համար կտրում, rotating, եւ ֆիլտրներ. Step 2: Show Instant Previews- ը CDN Transformations- ի հետ Խնդրում ենք, որ օգտվողները չեք սպասում սերվերի մշակման համար: Երբ ֆայլը բեռնել է, դուք ստանում եք միակ ֆայլային բեռը: Խնդրում ենք միացնել այն Filestack- ի փոխանակման CDN- ին, որպեսզի անմիջապես տեսնել: https://cdn.filestackcontent.com/resize=width:400,height:400,fit:crop/circle/HANDLE Օգտագործողները տեսնում են իրենց նոր պրոֆիլային տեսակը անմիջապես, իսկ ճշգրտական բուժումը կատարվում է հարթակում: Step 3: Offload Heavy Lifting հետ Workflows Մինչեւ դուք պետք է փոխել չափը մինչեւ 400×400, optimize եւ storage.Instead of coding all that, trigger a workflow: 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));
 Աշխատանքային պլանները անսահմանափակ են, սերտիֆիկ սերտիֆիկ սերտիֆիկները, որոնք աշխատում են տեսանյութի մշակման գործառույթների համար: Ձեր ծրագիրը աշխատում է, ապա աշխատում է կյանքի համար: Երբեմն, փորձարկման գործառույթը ստուգում է Status- ը եւ տրամադրում է օգտվողներին հարմարավետ նորարարություններ, ինչպիսիք են: «Որբնացրեք ձեր նկարը...» Step 3.5: Օգտագործելով Workflow Status API-ը JSON- ի արդյունքների ստանալու համար Երբ ձեր workflow-ը սկսել է, դուք ցանկանում եք իմանալ, երբ այն ավարտվում է եւ թե ինչպես է արտադրանքը. Արդյոք Endpoint- ը ներսում է workflow_status Ձեր ծրագիրը կարող է փորձել աշխատանքային արագության աշխատանքը, մինչեւ 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- ը կարող է տալիս ձեզ: 
 
 
 
 Աշխատանքային կայքը (Pending, Running, Finished, Failed) Արդյոք, այն ամենը, ինչ պետք է անել, այն է, ինչ պետք է անել: Data.url- ը ավարտական, optimized պրոֆիլային տեսակը համար: Արդյունք 4: Կառուցեք եւ մաքրեք Երբ workflow-ը ավարտվում է: 
 
 
 Օգտագործեք ձեր Profile- ի src-ը, որը պատրաստվում է տեւողության համար, մինչեւ վերջնական URL-ը: Բացեք API-ը, որպեսզի սեղմեք Original Unprocessed ֆայլը — Keeping storage clean and costs down. Սա նշանակում է, որ ձեր app- ը միշտ ցույց է տալիս optimized images- ից եւ փնտրում է սարքավորումների խոշորությունը: Ինչպե՞ս պետք է ամեն անգամ սեղմեք 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 User փորձը Blocking, spinner, սահմանափակ Անկախված, անմիջապես նախընտրում գործառույթը Պահպանել միայն Փակցվել է 15+ ռեսուրսներ, գրասենյակ Ցուցադրություն Միացեք ձեր Server- ում Global CDN + async workflows- ը Մատակարարություն You patch + scale ամեն ինչ Արդյոք, Zero Maintenance Overhead Scalability-ն Infrascaling մանրամասներ Auto-scales է ցանկացած բեռնել անվտանգություն DIY- ի նշված URL-ները + ACL-ները Declarative անվտանգության քաղաքականություն GitHub- ում մանրամասներ Մենք գրել ենք The Այս դիզայնի UI, Picker ինտեգրման, workflow triggering, Սեղմեք եւ սեղմեք. complete working demo, which includes workflow_status Խնդրում ենք տեսնել GitHub- ում BabySitting- ի պրոֆիլային լուսանկարներ Պրոֆիլային տեսանյութերի բեռնելները կարող են տեսնել փոքր, բայց չգիտվել են, նրանք բեռնում են մատակարարման, գոտի բեռների եւ կատարման բեռների բեռը, բայց դուք չեք պետք DIY- ի համար: 
 
 
 
 Ավելի լավ փորձ ստանալ անմիջապես (մարթային նախընտրում, մոդելային գործիքներ, բազմաթիվ աղբյուրներ). Պահպանեք բաղադրիչը եւ մոռացեք բաղադրիչը. Հեռնել ձեր թիմը կենտրոնանալ ձեր իրական արտադրանքի, ոչ թե Image Processing. Միացեք ձեր օգտվողներին արագ, պրոֆիլային տեսանյութի փորձը 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

Այս աուդիոն պատրաստվել է պատմության բնօրինակ լեզվով:

Չափազանց երկար; Կարդալ

Boost your HackerNoon story @ $159.99! 🚀

How to Fix Profile Image Upload Headaches հետ Filestack Workflows- ը

About Author

ՄԵԿՆԱԲԱՆՈՒԹՅՈՒՆՆԵՐ

ԿԱԽՎԵԼ ՏԵԳՍԵՐ

ԱՅՍ ՀՈԴՎԱԾԸ ՆԵՐԿԱՅԱՑՎԵԼ Է Մ

Related Stories

Hypernative Bolsters Bitcoin L2 Security as Stacks Ecosystem Gets Real-Time Protection

How HyperCycle Is Building the Internet for AI: A Deep Dive with Toufi Saliba

Toufi Saliba: The Architect Behind HyperCycle's Decentralized Network of AI

What is Hyperthreading and How Do You Enable It?

Hypernative Bolsters Bitcoin L2 Security as Stacks Ecosystem Gets Real-Time Protection

How HyperCycle Is Building the Internet for AI: A Deep Dive with Toufi Saliba

Toufi Saliba: The Architect Behind HyperCycle's Decentralized Network of AI

What is Hyperthreading and How Do You Enable It?

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps