Tailwind CSS Responsive Multi File Upload with drop-on and preview

"="" alt="\"no" data\"="" \="" >\r\n="" <span="" text-gray-500\">no="" files="" selected<\="" span>\r\n="" <\="" li>\r\n="" ul>\r\n="" section>\r\n\r\n="" <!--="" sticky="" footer="" -->\r\n="" <footer="" justify-end="" px-8="" pb-8="" pt-4\">\r\n="" <button="" id="\"submit\"" px-3="" py-1="" bg-blue-700="" hover:bg-blue-500="" text-white="" focus:shadow-outline="" focus:outline-none\">\r\n="" upload="" now\r\n="" button>\r\n="" rounded-sm="" hover:bg-gray-300="" cancel\r\n="" footer>\r\n="" article>\r\n="" main>\r\n="" div>\r\n\r\n="" using="" two="" similar="" templates="" for="" simplicity="" in="" js="" code="" <template="" <li="" p-1="" w-1\="" 2="" sm:w-1\="" 3="" md:w-1\="" 4="" lg:w-1\="" 6="" xl:w-1\="" 8="" h-24\">\r\n="" <article="" tabindex="\"0\"" w-full="" h-full="" rounded-md="" focus:outline-none="" elative="" bg-gray-100="" cursor-pointer="" relative="" shadow-sm\">\r\n="" <img="" preview\"="" hidden="" object-cover="" bg-fixed\"="" >\r\n\r\n="" <section="" flex-col="" text-xs="" break-words="" z-20="" absolute="" top-0="" py-2="" px-3\">\r\n="" <h1="" group-hover:text-blue-800\"><\="" h1>\r\n="" <div="" text-blue-800\">\r\n="" <i>\r\n="" <svg="" w-4="" h-4="" ml-auto="" pt-1\"="" xmlns="\"http:\/\/www.w3.org\/2000\/svg\"" width="\"24\"" height="\"24\"" viewbox="\"0" 0="" 24="" 24\">\r\n="" <path="" d="\"M15" 2v5h5v15h-16v-20h11zm1-2h-14v24h20v-18l-6-6z\"="" svg>\r\n="" i>\r\n="" <p="" size="" text-gray-700\"><\="" p>\r\n="" text-gray-800\">\r\n="" fill-current="" ml-auto\"="" 6l3="" 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9="" 1.631-1.099="" 1.631-2h5.316c0="" .901.73="" 1.631="" 2h5.711z\"="" div>\r\n="" section>\r\n="" template>\r\n\r\n="" hasimage="" text-transparent="" hover:text-white="" pt-\"="" 8.5c0-.828.672-1.5="" 1.5-1.5s1.5.672="" 1.5="" 1.5c0="" .829-.672="" 1.5-1.5="" 1.5s-1.5-.671-1.5-1.5zm9="" .5l-2.519="" 4-2.481-1.96-4="" 5.96h14l-5-8zm8-4v14h-20v-14h20zm2-2h-24v18h24v-18z\"="" span>\r\n\r\n="" text-xs\"><\="" rounded-md\">\r\n="" template>\r\n\r\n<script>\r\nconst="" filetempl="document.getElementById(\"file-template\"),\r\n" imagetempl="document.getElementById(\"image-template\"),\r\n" empty="document.getElementById(\"empty\");\r\n\r\n\/\/" use="" to="" store="" pre="" selected="" files\r\nlet="" check="" if="" file="" is="" of="" type="" image="" and="" prepend="" the="" initialied\r\n\="" template="" target="" element\r\nfunction="" addfile(target,="" file)="" {\r\n="" const="" isimage="file.type.match(\"image.*\"),\r\n" objecturl="URL.createObjectURL(file);\r\n\r\n" clone="isImage\r\n" ?="" imagetempl.content.clonenode(true)\r\n="" :="" filetempl.content.clonenode(true);\r\n\r\n="" clone.queryselector(\"h1\").textcontent="file.name;\r\n" clone.queryselector(\"li\").id="objectURL;\r\n" clone.queryselector(\".delete\").dataset.target="objectURL;\r\n" clone.queryselector(\".size\").textcontent="\r\n" file.size="" >="" 1024\r\n="" 1048576\r\n="" math.round(file.size="" 1048576)="" +="" \"mb\"\r\n="" 1024)="" \"kb\"\r\n="" \"b\";\r\n\r\n="" &&\r\n="" object.assign(clone.queryselector(\"img\"),="" src:="" objecturl,\r\n="" alt:="" file.name\r\n="" });\r\n\r\n="" empty.classlist.add(\"hidden\");\r\n="" target.prepend(clone);\r\n\r\n="" files[objecturl]="file;\r\n}\r\n\r\nconst" gallery="document.getElementById(\"gallery\"),\r\n" overlay="document.getElementById(\"overlay\");\r\n\r\n\/\/" click="" input="" visible="" button="" clicked\r\n\="" capture="" files\r\nconst="" =="" ()=">" hidden.click();\r\nhidden.onchange="(e)" =>="" (const="" e.target.files)="" addfile(gallery,="" file);\r\n="" }\r\n};\r\n\r\n\="" a="" being="" dragged\r\nconst="" hasfiles="({" datatransfer:="" {="" types="[]" }="" })=">\r\n" types.indexof(\"files\")="" -1;\r\n\r\n\="" drag="" dragenter="" dragleave="" events.\r\n\="" this="" know="" outermost="" parent="" dragged="" over\r\n\="" without="" issues="" due="" events="" on="" its="" children\r\nlet="" counter="0;\r\n\r\n\/\/" reset="" append="" when="" dropped\r\nfunction="" drophandler(ev)="" ev.preventdefault();\r\n="" ev.datatransfer.files)="" overlay.classlist.remove(\"draggedover\");\r\n="" }\r\n}\r\n\r\n\="" only="" react="" actual="" dragged\r\nfunction="" dragenterhandler(e)="" e.preventdefault();\r\n="" (!hasfiles(e))="" return;\r\n="" }\r\n="" ++counter="" &&="" overlay.classlist.add(\"draggedover\");\r\n}\r\n\r\nfunction="" dragleavehandler(e)="" 1="" --counter="" overlay.classlist.remove(\"draggedover\");\r\n}\r\n\r\nfunction="" dragoverhandler(e)="" (hasfiles(e))="" event="" delegation="" caputre="" delete="" events\r\n\="" fron="" waste="" buckets="" preview="" cards\r\ngallery.onclick="({" (target.classlist.contains(\"delete\"))="" ou="target.dataset.target;\r\n" document.getelementbyid(ou).remove(ou);\r\n="" gallery.children.length="==" empty.classlist.remove(\"hidden\");\r\n="" files[ou];\r\n="" print="" all="" files\r\ndocument.getelementbyid(\"submit\").onclick="()" alert(`submitted="" files:\\n${json.stringify(files)}`);\r\n="" console.log(files);\r\n};\r\n\r\n\="" clear="" entire="" selection\r\ndocument.getelementbyid(\"cancel\").onclick="()" while="" (gallery.children.length="" 0)="" gallery.lastchild.remove();\r\n="" gallery.append(empty);\r\n};\r\n\r\n<\="" script>\r\n\r\n<style>\r\n.hasimage:hover="" section="" background-color:="" rgba(5,="" 5,="" 0.4);\r\n}\r\n.hasimage:hover="" button:hover="" background:="" 0.45);\r\n}\r\n\r\n#overlay="" p,\r\ni="" opacity:="" 0;\r\n}\r\n\r\n#overlay.draggedover="" rgba(255,="" 255,="" 0.7);\r\n}\r\n#overlay.draggedover="" p,\r\n#overlay.draggedover="" i="" 1;\r\n}\r\n\r\n.group:hover="" .group-hover\\:text-blue-800="" color:="" #2b6cb0;\r\n}\r\n<\="" style>","author_type":"app\\user","author_id":567,"collection_id":null,"fork_id":null,"votes":82,"score":"4.9","visits":74570,"popularity":16567,"slug":"file-upload-with-drop-on-and-preview","approved":1,"created_at":"2020-04-21t22:16:34.000000z","updated_at":"2024-09-19t04:05:03.000000z","downloads":2971,"code_views":37397,"center":false,"notified":1,"premium":0,"tailwind_config":null,"type":"component","css":"https:\="" cdn.tailwindcss.com","should_tweet":0,"media":[{"id":1054,"model_type":"app\\component","model_id":366,"collection_name":"preview","name":"temp81006","file_name":"temp81006.png","mime_type":"image\="" png","disk":"public","size":30414,"manipulations":[],"custom_properties":{"generated_conversions":{"thumb":true,"ogimage":true}},"responsive_images":{"medialibrary_original":{"urls":["temp81006___medialibrary_original_1280_957.png","temp81006___medialibrary_original_1070_799.png","temp81006___medialibrary_original_895_669.png","temp81006___medialibrary_original_749_559.png"],"base64svg":"data:image\="" svg+xml;base64,pcfet0nuwvbfihn2zybqvujmsumgii0vl1czqy8vrfreifnwryaxljevl0voiiaiahr0cdovl3d3dy53my5vcmcvr3jhcghpy3mvu1zhlzeums9eveqvc3znmteuzhrkij4kphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6ly93d3cudzmub3jnlze5otkvegxpbmsiihhtbdpzcgfjzt0ichjlc2vydmuiihg9ijaicib5psiwiib2awv3qm94psiwidagmti4mca5ntcipgojpgltywdlihdpzhropsixmjgwiibozwlnahq9ijk1nyigegxpbms6ahjlzj0izgf0ytppbwfnzs9qcgvno2jhc2u2ncwvowovnefbuvnrwkpsz0fcqvffqvlbqmdbquqvl2dbn1exskzrvljqvwpvz1oyuxrhbkjswnlcmk1tnhdjq2gxyzjsdvp5qkpta2nnu2xcrlj5qjjprefwtencegrxrnnhwfi1suqwz09uqusvoxnbuxdbrefnsurbz0leqxdnrejbturcqvvjqlfvrujbvutcd2nhq0f3s0rbd0xdz3nmrfe0u0vbme9futrmq3hbv0vcrvrgqlvwrlf3uez4z1dgqmdtrkjvvs85c0frd0veqkfrrkjbvupcuvvkrkewtersuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvlzhbquvrz0fgd0fmqxdfukfbsvjbuu1sqwyvrufcoefbquvgqvffqkfrrujbqufbqufbqufbqujbz01fqlfzsenba0tdly9fquxvuufbsujbd01dqkfnrkjruuvbqufczlffq0f3quvfuvvtsvrgqkjotljzuwnpy1jrewdar2hdq05dc2nfvlv0shdkre5py29jsknowvhhqmthslnzbktda3forfuytnpnnu9rtkvsvvpiu0vss1uxulzwbgrzv1zwalphvm1ammhwyw5omgrywjnlsgw2zzrtrmhvzulpwxftazvtvmxwzvltwnfpbzztbhbxzw9xyxf5czdtmxryztr1ynjddzhurnhzzkl5y3jtmdluvjf0zlkyzhjonhvqazvlym42t25xogzmejlqwdi5l2o1k3yvrufcoejbqu1cqvffqkfrrujbuuvbqufbqufbqujbz01fqlfzsenba0tdly9fquxvukfbsujbz1ffqxdrsejruuvbquvdzhdbqkfntvjcqvvotvfzu1fwruhzwevuswplqkncuknryud4d1frak0xthdgv0p5mffvv0pevghkzkvyr0jryuppy29lu28xtmpjne9ucersrvzhujboslnstlvwvlpyv0zsyvkyumxabwrvyvdwemrivjjkm2g1zw9lrghjv0donglkaxblvgxkv1dsnwlabxflanblv21wnmlwcxjlenrmvzj0n2k1dxnmrhhnwed4ogpkexrmvdfowfcxowpamnvmajvpwg01k2pwnnzmejlqwdi5l2o1k3yvyufbd0rbuufdrvfnukfeoeernvbnehbsdmq2yxhrvgnhn3e4ck01yvn1ajbtznd6ykvmskhpdvhuwnz5b2rcnfp0uxz6ujgwyzdiew84zjhbalpwc05stenjbdi1cnvvtzv5mvvktdhdmuiwcdz4eec1cfmyufzwrzjeaxvnm0nnn2hrmerqrvbqec9ynes5req3sexwsmznnzrnatazvfdwmupqc0ttdkc3q2s3stlkugppmla4rgzswex5ttzmbfrvueh0dmfrn2xqylawctqwn3v4rxayuel2axo0afrxeee2cvfmzxv5akhsme9hy3vzly8yut09ij4kctwvaw1hz2u+cjwvc3znpg="="}},"order_column":1036,"created_at":"2020-04-21T22:16:38.000000Z","updated_at":"2020-09-25T21:39:18.000000Z","conversions_disk":"public","uuid":"ab919795-98ae-49da-a526-222b97064858","generated_conversions":null,"original_url":"https:\/\/tailwindcomponents.com\/storage\/1054\/temp81006.png","preview_url":""}],"author":{"id":567,"name":"codingsafari","slug":"codingsafari","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1096845156177846273\/2zO578ou_normal.jpg","header":null,"created_at":"2020-04-14T17:42:44.000000Z","updated_at":"2020-04-14T17:42:44.000000Z"},"tags":[{"id":10,"name":{"en":"Modals"},"description":"Choose" from="" our="" extensive="" collection="" responsive="" modals="" create="" dialogs,="" popovers,="" light="" boxes,="" so="" on.="" show="" interactive="" information="" your="" website="" users="" these="" tailwind="" snippets.","meta_description":"choose="" on.","slug":{"en":"modals"},"type":null,"order_column":8,"created_at":"2020-09-29t11:20:03.000000z","updated_at":"2022-08-01t16:22:07.000000z","pivot":{"taggable_type":"app\\component","taggable_id":366,"tag_id":10}},{"id":5,"name":{"en":"widget"},"description":"check="" out="" 500+="" widget="" examples.="" snippets="" spend="" less="" time="" re-inventing="" wheel.","meta_description":"check="" wheel.","slug":{"en":"widget"},"type":null,"order_column":14,"created_at":"2019-07-04t08:20:17.000000z","updated_at":"2022-08-01t16:16:36.000000z","pivot":{"taggable_type":"app\\component","taggable_id":366,"tag_id":5}},{"id":71,"name":{"en":"file="" upload"},"description":"the="" used="" select="" user's="" device="" server.="" see="" below="" components="" that="" you="" can="" add="" directly="" ui="" project.","meta_description":"visit="" component="" examples="" web="" project="" awesome="" apps.","slug":{"en":"file-upload"},"type":null,"order_column":60,"created_at":"2023-10-05t07:53:11.000000z","updated_at":"2023-10-05t07:53:11.000000z","pivot":{"taggable_type":"app\\component","taggable_id":366,"tag_id":71}}],"fork":null,"favorites":[{"id":1460,"name":"atularvind","slug":"atularvind","bio":null,"avatar":"https:\="" avatars2.githubusercontent.com\="" u\="" 1876476?v="4","header":null,"created_at":"2020-11-01T07:16:30.000000Z","updated_at":"2021-08-26T06:30:54.000000Z","pivot":{"component_id":366,"user_id":1460}},{"id":3604,"name":"chrisparks91","slug":"chrisparks91","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1315772210536222721\/rKCSH-Rl_normal.jpg","header":null,"created_at":"2021-05-28T16:24:05.000000Z","updated_at":"2021-05-28T16:24:05.000000Z","pivot":{"component_id":366,"user_id":3604}},{"id":2033,"name":"jmebia","slug":"jmebia-1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/13554510?v=4","header":null,"created_at":"2021-01-22T02:39:54.000000Z","updated_at":"2021-01-22T02:39:54.000000Z","pivot":{"component_id":366,"user_id":2033}},{"id":3038,"name":"lohnsonok","slug":"lohnsonok","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/60504466?v=4","header":null,"created_at":"2021-04-11T20:40:20.000000Z","updated_at":"2021-04-11T20:40:20.000000Z","pivot":{"component_id":366,"user_id":3038}},{"id":4075,"name":"bajro17","slug":"bajro17","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/796e85a3ea9beb39317ff2b37e69fc9f","header":null,"created_at":"2021-06-30T12:35:21.000000Z","updated_at":"2023-01-28T23:48:32.000000Z","pivot":{"component_id":366,"user_id":4075}},{"id":4099,"name":"krytabo","slug":"krytabo","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/48199153?v=4","header":null,"created_at":"2021-07-02T07:44:31.000000Z","updated_at":"2021-07-02T07:44:31.000000Z","pivot":{"component_id":366,"user_id":4099}},{"id":3758,"name":"PopBot","slug":"popbot","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/13425426?v=4","header":null,"created_at":"2021-06-06T22:29:46.000000Z","updated_at":"2021-06-06T22:29:46.000000Z","pivot":{"component_id":366,"user_id":3758}},{"id":2426,"name":"pschur","slug":"pschur-1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/78649242?v=4","header":null,"created_at":"2021-02-28T20:15:07.000000Z","updated_at":"2021-02-28T20:15:07.000000Z","pivot":{"component_id":366,"user_id":2426}},{"id":4271,"name":"amoradel","slug":"amoradel","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/10636860?v=4","header":null,"created_at":"2021-07-16T21:40:48.000000Z","updated_at":"2021-07-16T21:40:48.000000Z","pivot":{"component_id":366,"user_id":4271}},{"id":4458,"name":"bbg","slug":"bbg","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/13348876?v=4","header":null,"created_at":"2021-08-01T19:59:16.000000Z","updated_at":"2021-08-01T19:59:16.000000Z","pivot":{"component_id":366,"user_id":4458}},{"id":4492,"name":"abdulmejidshemsu","slug":"abdulmejidshemsu","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/53785447?v=4","header":null,"created_at":"2021-08-04T11:08:22.000000Z","updated_at":"2021-08-04T11:08:22.000000Z","pivot":{"component_id":366,"user_id":4492}},{"id":2012,"name":"sergii","slug":"sergii","bio":null,"avatar":"https:\/\/avatars2.githubusercontent.com\/u\/641426?v=4","header":null,"created_at":"2021-01-19T10:36:31.000000Z","updated_at":"2021-01-19T10:36:31.000000Z","pivot":{"component_id":366,"user_id":2012}},{"id":4315,"name":"chrioniep","slug":"chrioniep","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/38132946?v=4","header":null,"created_at":"2021-07-20T11:55:13.000000Z","updated_at":"2021-07-20T11:55:13.000000Z","pivot":{"component_id":366,"user_id":4315}},{"id":4037,"name":"puper","slug":"puper","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/5547922?v=4","header":null,"created_at":"2021-06-27T09:39:33.000000Z","updated_at":"2021-06-27T09:39:33.000000Z","pivot":{"component_id":366,"user_id":4037}},{"id":4684,"name":"mariya","slug":"mariya","bio":null,"avatar":"\/storage\/avatars\/T45SHJefewVoWFasyrBJlmGxNknV2olVLRr5bJKV.jpg","header":null,"created_at":"2021-08-19T14:28:06.000000Z","updated_at":"2021-08-19T16:30:18.000000Z","pivot":{"component_id":366,"user_id":4684}},{"id":4719,"name":"maswahyu","slug":"maswahyu","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/2834359?v=4","header":null,"created_at":"2021-08-22T11:25:14.000000Z","updated_at":"2021-08-22T11:25:14.000000Z","pivot":{"component_id":366,"user_id":4719}},{"id":4821,"name":"Azetry","slug":"azetry","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/24710918?v=4","header":null,"created_at":"2021-09-01T06:37:48.000000Z","updated_at":"2021-09-01T06:37:48.000000Z","pivot":{"component_id":366,"user_id":4821}},{"id":4939,"name":"macoycorpuz","slug":"macoycorpuz","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/24865368?v=4","header":null,"created_at":"2021-09-09T20:34:35.000000Z","updated_at":"2021-09-09T20:34:35.000000Z","pivot":{"component_id":366,"user_id":4939}},{"id":5199,"name":"kikawet","slug":"kikawet","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/28111220?v=4","header":null,"created_at":"2021-09-27T21:51:15.000000Z","updated_at":"2021-09-27T21:51:15.000000Z","pivot":{"component_id":366,"user_id":5199}},{"id":4369,"name":"ahampriyanshu","slug":"ahampriyanshu","bio":"ahampriyanshu.com","avatar":"https:\/\/avatars.githubusercontent.com\/u\/54521023?v=4","header":null,"created_at":"2021-07-26T05:26:32.000000Z","updated_at":"2022-02-07T07:10:13.000000Z","pivot":{"component_id":366,"user_id":4369}},{"id":5330,"name":"sunviv","slug":"sunviv","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/74650847?v=4","header":null,"created_at":"2021-10-08T00:18:39.000000Z","updated_at":"2021-10-08T00:18:39.000000Z","pivot":{"component_id":366,"user_id":5330}},{"id":6231,"name":"weeyc","slug":"weeyc","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/76787324?v=4","header":null,"created_at":"2021-12-20T16:58:59.000000Z","updated_at":"2021-12-20T16:58:59.000000Z","pivot":{"component_id":366,"user_id":6231}},{"id":6300,"name":"wagneralmeida-liveonsolutions","slug":"wagneralmeida-liveonsolutions","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/84327740?v=4","header":null,"created_at":"2021-12-27T21:59:20.000000Z","updated_at":"2021-12-27T21:59:20.000000Z","pivot":{"component_id":366,"user_id":6300}},{"id":6504,"name":"Joni" mesfin","slug":"joni-mesfin","bio":null,"avatar":"https:\="" www.gravatar.com\="" avatar\="" 826ca88aef38465c05f1e962c1204a32","header":null,"created_at":"2022-01-14t10:10:51.000000z","updated_at":"2022-01-14t10:10:51.000000z","pivot":{"component_id":366,"user_id":6504}},{"id":1282,"name":"benaja-bendo","slug":"benaja-bendo","bio":null,"avatar":"https:\="" 64331956?v="4","header":null,"created_at":"2020-10-12T19:27:01.000000Z","updated_at":"2020-10-12T19:27:01.000000Z","pivot":{"component_id":366,"user_id":1282}},{"id":6625,"name":"Abdulakeem" gbadamosi","slug":"abdulakeem-gbadamosi","bio":null,"avatar":"https:\="" f876fd2bad6477a667b17b2852d61c74","header":null,"created_at":"2022-01-23t04:54:42.000000z","updated_at":"2022-01-23t04:54:42.000000z","pivot":{"component_id":366,"user_id":6625}},{"id":6683,"name":"maliethy","slug":"maliethy","bio":null,"avatar":"https:\="" avatars.githubusercontent.com\="" 67949211?v="4","header":null,"created_at":"2022-01-27T07:22:30.000000Z","updated_at":"2022-01-27T07:22:30.000000Z","pivot":{"component_id":366,"user_id":6683}},{"id":6836,"name":"meScript","slug":"mescript","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/99386128?v=4","header":null,"created_at":"2022-02-10T06:37:05.000000Z","updated_at":"2022-02-10T06:37:05.000000Z","pivot":{"component_id":366,"user_id":6836}},{"id":6933,"name":"stefanpandele","slug":"stefanpandele","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/12664173?v=4","header":null,"created_at":"2022-02-20T14:06:06.000000Z","updated_at":"2022-02-20T14:06:06.000000Z","pivot":{"component_id":366,"user_id":6933}},{"id":3558,"name":"whoisthisstud","slug":"whoisthisstud","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44807533?v=4","header":null,"created_at":"2021-05-25T15:23:04.000000Z","updated_at":"2021-05-25T15:23:04.000000Z","pivot":{"component_id":366,"user_id":3558}},{"id":6574,"name":"fachrularly","slug":"fachrularly","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/24983698?v=4","header":null,"created_at":"2022-01-19T13:34:22.000000Z","updated_at":"2022-01-19T13:34:22.000000Z","pivot":{"component_id":366,"user_id":6574}},{"id":5854,"name":"Thomas" garp","slug":"thomas-garp","bio":null,"avatar":"https:\="" a94624bc5c13722490c724ac7a423997","header":null,"created_at":"2021-11-20t16:35:06.000000z","updated_at":"2021-11-20t16:35:06.000000z","pivot":{"component_id":366,"user_id":5854}},{"id":6940,"name":"123applepie","slug":"123applepie","bio":null,"avatar":"https:\="" 73269263?v="4","header":null,"created_at":"2022-02-21T13:49:46.000000Z","updated_at":"2022-02-21T13:49:46.000000Z","pivot":{"component_id":366,"user_id":6940}},{"id":7779,"name":"helxsz","slug":"helxsz","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/669670?v=4","header":null,"created_at":"2022-05-07T11:19:08.000000Z","updated_at":"2022-05-07T11:19:08.000000Z","pivot":{"component_id":366,"user_id":7779}},{"id":8280,"name":"NdekoCode","slug":"ndekocode","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85836702?v=4","header":"\/storage\/headers\/3FqzEebO3eZi51EIVGBz9z4Z9OfkfxfX63Dtgga5.png","created_at":"2022-06-28T15:31:22.000000Z","updated_at":"2023-09-08T17:49:11.000000Z","pivot":{"component_id":366,"user_id":8280}},{"id":8420,"name":"Dan" elioth="" condori="" pongo","slug":"dan-elioth-condori-pongo","bio":null,"avatar":"https:\="" 74fae70363de96a81fcb6ad7b525db83","header":null,"created_at":"2022-07-15t19:34:21.000000z","updated_at":"2022-07-15t19:34:21.000000z","pivot":{"component_id":366,"user_id":8420}},{"id":7706,"name":"dubem_design","slug":"dubem-design","bio":null,"avatar":"https:\="" pbs.twimg.com\="" profile_images\="" 1420270282229567488\="" gqd4affh_normal.jpg","header":null,"created_at":"2022-04-30t15:20:58.000000z","updated_at":"2022-04-30t15:20:58.000000z","pivot":{"component_id":366,"user_id":7706}},{"id":1434,"name":"matt","slug":"matt","bio":null,"avatar":"https:\="" 2098eb6a3d48b22ed0692849699c795a","header":null,"created_at":"2020-10-27t13:11:58.000000z","updated_at":"2020-10-27t13:11:58.000000z","pivot":{"component_id":366,"user_id":1434}},{"id":3241,"name":"moneya","slug":"moneya","bio":null,"avatar":"https:\="" 7353773?v="4","header":null,"created_at":"2021-04-28T15:37:06.000000Z","updated_at":"2021-04-28T15:37:06.000000Z","pivot":{"component_id":366,"user_id":3241}},{"id":7039,"name":"l0gical","slug":"l0gical","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/10054799?v=4","header":null,"created_at":"2022-03-02T09:10:50.000000Z","updated_at":"2022-03-02T09:10:50.000000Z","pivot":{"component_id":366,"user_id":7039}},{"id":8981,"name":"shobhit","slug":"shobhit","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/3ee52cabc4ae4fd8cc58fef1252a0660","header":null,"created_at":"2022-09-07T14:17:25.000000Z","updated_at":"2022-09-07T14:17:25.000000Z","pivot":{"component_id":366,"user_id":8981}},{"id":8648,"name":"aldaspan","slug":"aldaspan","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/57620018?v=4","header":null,"created_at":"2022-08-08T04:40:13.000000Z","updated_at":"2022-08-08T04:40:13.000000Z","pivot":{"component_id":366,"user_id":8648}},{"id":9406,"name":"alexandermitsyk","slug":"alexandermitsyk","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/15364563?v=4","header":null,"created_at":"2022-10-17T11:33:48.000000Z","updated_at":"2022-10-17T11:33:48.000000Z","pivot":{"component_id":366,"user_id":9406}},{"id":10204,"name":"BenitoRubenO","slug":"benitorubeno","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1560417882676367362\/KHcjQxot_normal.jpg","header":null,"created_at":"2022-12-21T15:14:55.000000Z","updated_at":"2022-12-21T15:14:55.000000Z","pivot":{"component_id":366,"user_id":10204}},{"id":9572,"name":"Kyaw" ko="" ko","slug":"kyaw-ko-ko","bio":null,"avatar":"https:\="" 520e6ff3de48cfca09f6ef65a56fa16d","header":null,"created_at":"2022-10-30t19:48:49.000000z","updated_at":"2022-10-30t19:48:49.000000z","pivot":{"component_id":366,"user_id":9572}},{"id":10082,"name":"thats_robbie","slug":"thats-robbie","bio":null,"avatar":"https:\="" 1582419208813645824\="" mmopzdb2_normal.jpg","header":null,"created_at":"2022-12-12t23:51:48.000000z","updated_at":"2022-12-12t23:51:48.000000z","pivot":{"component_id":366,"user_id":10082}},{"id":5683,"name":"meringuekhalil","slug":"meringuekhalil","bio":null,"avatar":"https:\="" 944567032695095296\="" gu55pns5_normal.jpg","header":null,"created_at":"2021-11-04t14:04:08.000000z","updated_at":"2021-11-04t14:04:08.000000z","pivot":{"component_id":366,"user_id":5683}},{"id":9931,"name":"sergio","slug":"sergio-1","bio":null,"avatar":"https:\="" 29ecc344c51cbed193a4d765dea4f09c","header":null,"created_at":"2022-11-29t15:29:22.000000z","updated_at":"2022-11-29t15:29:22.000000z","pivot":{"component_id":366,"user_id":9931}},{"id":11775,"name":"jakkph","slug":"jakkph","bio":null,"avatar":"https:\="" 25721891?v="4","header":null,"created_at":"2023-04-05T19:42:14.000000Z","updated_at":"2023-04-05T19:42:14.000000Z","pivot":{"component_id":366,"user_id":11775}},{"id":11909,"name":"Daviduche03","slug":"daviduche03","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/103164411?v=4","header":null,"created_at":"2023-04-13T16:46:11.000000Z","updated_at":"2023-04-13T16:46:11.000000Z","pivot":{"component_id":366,"user_id":11909}},{"id":12342,"name":"JohannesGilges","slug":"johannesgilges","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/5149727?v=4","header":null,"created_at":"2023-05-13T14:37:11.000000Z","updated_at":"2023-05-13T14:37:11.000000Z","pivot":{"component_id":366,"user_id":12342}},{"id":11947,"name":"raulanto","slug":"raulanto","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/74162376?v=4","header":null,"created_at":"2023-04-16T02:30:35.000000Z","updated_at":"2023-04-16T02:30:35.000000Z","pivot":{"component_id":366,"user_id":11947}},{"id":12474,"name":"204582Huang","slug":"204582huang","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/115692633?v=4","header":null,"created_at":"2023-05-23T05:09:51.000000Z","updated_at":"2023-05-23T05:09:51.000000Z","pivot":{"component_id":366,"user_id":12474}},{"id":12167,"name":"entykey","slug":"entykey","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/89012668?v=4","header":null,"created_at":"2023-05-01T17:14:19.000000Z","updated_at":"2023-05-01T17:14:19.000000Z","pivot":{"component_id":366,"user_id":12167}},{"id":13464,"name":"lewismunday","slug":"lewismunday","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44203993?v=4","header":null,"created_at":"2023-08-01T18:00:58.000000Z","updated_at":"2023-08-01T18:00:58.000000Z","pivot":{"component_id":366,"user_id":13464}},{"id":13658,"name":"ismwzz","slug":"ismwzz","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/01f250fe35c98b7f49e0760edf5be2ae","header":null,"created_at":"2023-08-14T20:02:59.000000Z","updated_at":"2023-08-14T20:02:59.000000Z","pivot":{"component_id":366,"user_id":13658}},{"id":14316,"name":"pannipasra","slug":"pannipasra","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/55582054?v=4","header":null,"created_at":"2023-09-24T03:00:09.000000Z","updated_at":"2023-09-24T03:00:09.000000Z","pivot":{"component_id":366,"user_id":14316}},{"id":11015,"name":"alokdubey01","slug":"alokdubey01","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/72490595?v=4","header":null,"created_at":"2023-02-16T05:50:12.000000Z","updated_at":"2023-02-16T05:50:12.000000Z","pivot":{"component_id":366,"user_id":11015}},{"id":14363,"name":"i3ahaar","slug":"i3ahaar","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7847611?v=4","header":null,"created_at":"2023-09-26T16:46:15.000000Z","updated_at":"2023-09-26T16:46:15.000000Z","pivot":{"component_id":366,"user_id":14363}},{"id":16427,"name":"mfadhill","slug":"mfadhill","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/97650248?v=4","header":null,"created_at":"2024-01-18T09:13:35.000000Z","updated_at":"2024-01-18T09:13:35.000000Z","pivot":{"component_id":366,"user_id":16427}},{"id":11008,"name":"mahmoud-bebars","slug":"mahmoud-bebars","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/66588352?v=4","header":null,"created_at":"2023-02-15T20:21:37.000000Z","updated_at":"2023-02-15T20:21:37.000000Z","pivot":{"component_id":366,"user_id":11008}},{"id":14819,"name":"pig4cloud","slug":"pig4cloud","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1275609899385319430\/huNqFDlg_normal.jpg","header":null,"created_at":"2023-10-22T17:10:10.000000Z","updated_at":"2023-10-22T17:10:10.000000Z","pivot":{"component_id":366,"user_id":14819}},{"id":17053,"name":"push42","slug":"push42","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/96739561?v=4","header":null,"created_at":"2024-02-19T18:16:50.000000Z","updated_at":"2024-02-19T18:16:50.000000Z","pivot":{"component_id":366,"user_id":17053}},{"id":19456,"name":"aiturrizaga","slug":"aiturrizaga","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/20216986?v=4","header":null,"created_at":"2024-06-21T15:55:50.000000Z","updated_at":"2024-06-21T15:55:50.000000Z","pivot":{"component_id":366,"user_id":19456}},{"id":19872,"name":"Igor097","slug":"igor097","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/26531334?v=4","header":null,"created_at":"2024-07-19T11:28:44.000000Z","updated_at":"2024-07-19T11:28:44.000000Z","pivot":{"component_id":366,"user_id":19872}},{"id":20402,"name":"Zahid" hasan","slug":"zahid-hasan","bio":null,"avatar":"https:\="" ab2ee85405265483470459bf8d45cdbf","header":null,"created_at":"2024-09-07t09:29:59.000000z","updated_at":"2024-09-07t09:29:59.000000z","pivot":{"component_id":366,"user_id":20402}},{"id":20416,"name":"ahmed-com","slug":"ahmed-com","bio":null,"avatar":"https:\="" 52245980?v="4","header":null,"created_at":"2024-09-08T18:20:42.000000Z","updated_at":"2024-09-08T18:20:42.000000Z","pivot":{"component_id":366,"user_id":20416}}]}"" :edit="false"> Full screen Preview

Download