Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
File Uploads
Admin file upload forms with removable image media.
Simple Upload Form
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative qm7fm mamhr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body> <div class="w-full m0ph3 ha88l"><!-- Drag 'n Drop --> <div class="nws9a"> <label class="block block pqyx6 hac7f ivg4u b7vor dark:text-neutral-200"> Upload form </label> <div class="lqm88 flex q6rsd v869m dpq4d xaqn2 m2wv4 it6u8 dark:bg-neutral-800 dark:border-neutral-600"> <div class="bx4k9"> <svg class="mmih0 pykwy ha88l dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw p0otm dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw p0otm dark:fill-neutral-800 dark:stroke-neutral-500"/> <rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw p0otm dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="p0otm dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="p0otm dark:stroke-neutral-500"/> </svg> <div class="vr44s flex flex-wrap q6rsd hac7f con0a vr7pv"> <span class="d6ed7 ivg4u b7vor dark:text-neutral-200"> Drop your files here or </span> <label for="@@browseID" class="relative cursor-pointer v869m u2ysm we6nf yptx6 xroga ffypy y9jdg zm895 bw3vs w3kpp rhw98 dark:bg-neutral-800 dark:text-blue-500 dark:hover:text-blue-600"> <span>browse</span> <input id="@@browseID" type="file" class="yps74"> </label> </div> <p class="l4ccc ps4xk pykwy dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --></div> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Drag 'n Drop --> <div class="nws9a"> <label class="block block pqyx6 hac7f ivg4u b7vor dark:text-neutral-200"> Upload form </label> <div class="lqm88 flex q6rsd v869m dpq4d xaqn2 m2wv4 it6u8 dark:bg-neutral-800 dark:border-neutral-600"> <div class="bx4k9"> <svg class="mmih0 pykwy ha88l dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw p0otm dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw p0otm dark:fill-neutral-800 dark:stroke-neutral-500"/> <rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw p0otm dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="p0otm dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="p0otm dark:stroke-neutral-500"/> </svg> <div class="vr44s flex flex-wrap q6rsd hac7f con0a vr7pv"> <span class="d6ed7 ivg4u b7vor dark:text-neutral-200"> Drop your files here or </span> <label for="@@browseID" class="relative cursor-pointer v869m u2ysm we6nf yptx6 xroga ffypy y9jdg zm895 bw3vs w3kpp rhw98 dark:bg-neutral-800 dark:text-blue-500 dark:hover:text-blue-600"> <span>browse</span> <input id="@@browseID" type="file" class="yps74"> </label> </div> <p class="l4ccc ps4xk pykwy dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop -->
Front and Back Upload Group
new
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative qm7fm mamhr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body> <div class="fbpzv w-full m0ph3 ha88l"><!-- Grid --> <div class="cwrq4 i8bnd bg6xe rlpao"> <!-- Upload Form --> <label for="hs-pro-pyoruifr" class="fo082 kjte6 relative cursor-pointer w-full flex dr3q9 q6rsd items-center bx4k9 g7u7z v869m y77ql ezn87 m2wv4 it6u8 e1tdc sbnko roxnn dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50"> <span class="yps74">Browse</span> <span class="vpbnr e1w7f xgqt9 q6rsd items-center qqcm6 b7vor a3ufl oivk8 oor45 dark:bg-neutral-800 dark:text-neutral-300 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="vpbnr ee5m9" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg> </span> <span class="hac7f oxyct dark:text-neutral-500"> Upload the front side of your document </span> <span class="r3twx ivg4u vqur1 h4yt7 dark:text-purple-500"> Choose a file </span> <input id="hs-pro-pyoruifr" type="file" class="yps74" name="hs-pro-pyoruifr"> </label> <!-- End Upload Form --> <!-- Upload Form --> <label for="hs-pro-pyoruibs" class="fo082 kjte6 relative cursor-pointer w-full flex dr3q9 q6rsd items-center bx4k9 g7u7z v869m y77ql ezn87 m2wv4 it6u8 e1tdc sbnko roxnn dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50"> <span class="yps74">Browse</span> <span class="vpbnr e1w7f xgqt9 q6rsd items-center qqcm6 b7vor a3ufl oivk8 oor45 dark:bg-neutral-800 dark:text-neutral-300 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="vpbnr ee5m9" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg> </span> <span class="hac7f oxyct dark:text-neutral-500"> Upload the back side of your document </span> <span class="r3twx ivg4u vqur1 h4yt7 dark:text-purple-500"> Choose a file </span> <input id="hs-pro-pyoruibs" type="file" class="yps74" name="hs-pro-pyoruibs"> </label> <!-- End Upload Form --> </div> <!-- End Grid --></div> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Grid --> <div class="cwrq4 i8bnd bg6xe rlpao"> <!-- Upload Form --> <label for="hs-pro-pyoruifr" class="fo082 kjte6 relative cursor-pointer w-full flex dr3q9 q6rsd items-center bx4k9 g7u7z v869m y77ql ezn87 m2wv4 it6u8 e1tdc sbnko roxnn dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50"> <span class="yps74">Browse</span> <span class="vpbnr e1w7f xgqt9 q6rsd items-center qqcm6 b7vor a3ufl oivk8 oor45 dark:bg-neutral-800 dark:text-neutral-300 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="vpbnr ee5m9" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg> </span> <span class="hac7f oxyct dark:text-neutral-500"> Upload the front side of your document </span> <span class="r3twx ivg4u vqur1 h4yt7 dark:text-purple-500"> Choose a file </span> <input id="hs-pro-pyoruifr" type="file" class="yps74" name="hs-pro-pyoruifr"> </label> <!-- End Upload Form --> <!-- Upload Form --> <label for="hs-pro-pyoruibs" class="fo082 kjte6 relative cursor-pointer w-full flex dr3q9 q6rsd items-center bx4k9 g7u7z v869m y77ql ezn87 m2wv4 it6u8 e1tdc sbnko roxnn dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50"> <span class="yps74">Browse</span> <span class="vpbnr e1w7f xgqt9 q6rsd items-center qqcm6 b7vor a3ufl oivk8 oor45 dark:bg-neutral-800 dark:text-neutral-300 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="vpbnr ee5m9" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg> </span> <span class="hac7f oxyct dark:text-neutral-500"> Upload the back side of your document </span> <span class="r3twx ivg4u vqur1 h4yt7 dark:text-purple-500"> Choose a file </span> <input id="hs-pro-pyoruibs" type="file" class="yps74" name="hs-pro-pyoruibs"> </label> <!-- End Upload Form --> </div> <!-- End Grid -->
Image upload
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative qm7fm mamhr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body> <div class="w-full mw4mj ha88l"><!-- Media Card --> <div class="flex dr3q9 v869m dpq4d jujtl vlqzh it6u8 k8i8d dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="yxmdd f5qiq flex encm3 items-center qy7wn x815m jujtl dark:border-neutral-700"> <h2 class="dxkem u2ysm dt7pj dark:text-neutral-200"> Media </h2> <div class="flex qsj3b items-center wwu1y"> <button type="button" class="fuiju rc0sp xgqt9 items-center x60sp ps4xk ivg4u xroga dpq4d jujtl v869m dt7pj k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="vpbnr fwnpl" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m16 16-4-4-4 4"/></svg> Upload from URL </button> </div> </div> <!-- End Header --> <!-- Body --> <div class="dx5bd emlw3"> <!-- Drag 'n Drop --> <div class="nws9a"> <label class="hidden pqyx6 hac7f ivg4u dt7pj dark:text-neutral-200"> Upload images </label> <div class="lqm88 i3nhp flex q6rsd v869m dpq4d xaqn2 k1wqe it6u8 dark:bg-neutral-800 dark:border-neutral-600"> <div class="bx4k9"> <svg class="mmih0 mms1j ha88l dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> </svg> <div class="vr44s flex flex-wrap q6rsd hac7f con0a ue964"> <span class="d6ed7 ivg4u dt7pj dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer v869m u2ysm kikgv cyhzb xroga ffypy y9jdg zm895 bw3vs vqcsz rhw98 dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="yps74" name="hs-pro-deuuf"> </label> </div> <p class="l4ccc ps4xk mms1j dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="hac7f vej1k dark:text-neutral-500"> Add up to 10 images to your product. </p> </div> <!-- End Body --> </div> <!-- End Media Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Media Card --> <div class="flex dr3q9 v869m dpq4d jujtl vlqzh it6u8 k8i8d dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="yxmdd f5qiq flex encm3 items-center qy7wn x815m jujtl dark:border-neutral-700"> <h2 class="dxkem u2ysm dt7pj dark:text-neutral-200"> Media </h2> <div class="flex qsj3b items-center wwu1y"> <button type="button" class="fuiju rc0sp xgqt9 items-center x60sp ps4xk ivg4u xroga dpq4d jujtl v869m dt7pj k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="vpbnr fwnpl" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m16 16-4-4-4 4"/></svg> Upload from URL </button> </div> </div> <!-- End Header --> <!-- Body --> <div class="dx5bd emlw3"> <!-- Drag 'n Drop --> <div class="nws9a"> <label class="hidden pqyx6 hac7f ivg4u dt7pj dark:text-neutral-200"> Upload images </label> <div class="lqm88 i3nhp flex q6rsd v869m dpq4d xaqn2 k1wqe it6u8 dark:bg-neutral-800 dark:border-neutral-600"> <div class="bx4k9"> <svg class="mmih0 mms1j ha88l dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> </svg> <div class="vr44s flex flex-wrap q6rsd hac7f con0a ue964"> <span class="d6ed7 ivg4u dt7pj dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer v869m u2ysm kikgv cyhzb xroga ffypy y9jdg zm895 bw3vs vqcsz rhw98 dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="yps74" name="hs-pro-deuuf"> </label> </div> <p class="l4ccc ps4xk mms1j dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="hac7f vej1k dark:text-neutral-500"> Add up to 10 images to your product. </p> </div> <!-- End Body --> </div> <!-- End Media Card -->
Image Upload with Removable Media
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative qm7fm mamhr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body> <div class="w-full mw4mj ha88l"><!-- Media Card --> <div class="flex dr3q9 v869m dpq4d jujtl vlqzh it6u8 k8i8d dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="yxmdd f5qiq flex encm3 items-center qy7wn x815m jujtl dark:border-neutral-700"> <h2 class="dxkem u2ysm dt7pj dark:text-neutral-200"> Media </h2> <div class="flex qsj3b items-center wwu1y"> <button type="button" class="fuiju rc0sp xgqt9 items-center x60sp ps4xk ivg4u xroga dpq4d jujtl v869m dt7pj k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="vpbnr fwnpl" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m16 16-4-4-4 4"/></svg> Upload from URL </button> </div> </div> <!-- End Header --> <!-- Body --> <div class="dx5bd emlw3"> <!-- Grid --> <div class="cwrq4 uqcx1 u56oi yru4d"> <!-- Card --> <div id="dismiss-img1" class="relative"> <div class="vpbnr relative it6u8 vlqzh w-full qyytz"> <img class="dg83s absolute utnk6 f8uov xa3ev it6u8" src="https://images.unsplash.com/photo-1549298916-f52d724204b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar"> </div> <div class="absolute dg44h x9dnk nsoag"> <button type="button" class="vugj6 xgqt9 q6rsd items-center x60sp ivg4u hac7f a3ufl dpq4d jujtl v869m ue964 k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img1"> <svg class="vpbnr m5z5i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div id="dismiss-img2" class="relative"> <div class="vpbnr relative it6u8 vlqzh w-full qyytz"> <img class="dg83s absolute utnk6 f8uov xa3ev it6u8" src="https://images.unsplash.com/photo-1549298916-acc8271f8b8d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar"> </div> <div class="absolute dg44h x9dnk nsoag"> <button type="button" class="vugj6 xgqt9 q6rsd items-center x60sp ivg4u hac7f a3ufl dpq4d jujtl v869m ue964 k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img2"> <svg class="vpbnr m5z5i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div id="dismiss-img3" class="relative"> <div class="vpbnr relative it6u8 vlqzh w-full qyytz"> <img class="dg83s absolute utnk6 f8uov xa3ev it6u8" src="https://images.unsplash.com/photo-1549298916-c6c5f85fa167?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar"> </div> <div class="absolute dg44h x9dnk nsoag"> <button type="button" class="vugj6 xgqt9 q6rsd items-center x60sp ivg4u hac7f a3ufl dpq4d jujtl v869m ue964 k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img3"> <svg class="vpbnr m5z5i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div id="dismiss-img4" class="relative"> <div class="vpbnr relative it6u8 vlqzh w-full qyytz"> <img class="dg83s absolute utnk6 f8uov xa3ev it6u8" src="https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar"> </div> <div class="absolute dg44h x9dnk nsoag"> <button type="button" class="vugj6 xgqt9 q6rsd items-center x60sp ivg4u hac7f a3ufl dpq4d jujtl v869m ue964 k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img4"> <svg class="vpbnr m5z5i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> </div> <!-- End Card --> </div> <!-- End Grid --> <!-- Drag 'n Drop --> <div class="nws9a"> <label class="hidden pqyx6 hac7f ivg4u dt7pj dark:text-neutral-200"> Upload images </label> <div class="lqm88 i3nhp flex q6rsd v869m dpq4d xaqn2 k1wqe it6u8 dark:bg-neutral-800 dark:border-neutral-600"> <div class="bx4k9"> <svg class="mmih0 mms1j ha88l dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> </svg> <div class="vr44s flex flex-wrap q6rsd hac7f con0a ue964"> <span class="d6ed7 ivg4u dt7pj dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer v869m u2ysm kikgv cyhzb xroga ffypy y9jdg zm895 bw3vs vqcsz rhw98 dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="yps74" name="hs-pro-deuuf"> </label> </div> <p class="l4ccc ps4xk mms1j dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="hac7f vej1k dark:text-neutral-500"> Add up to 10 images to your product. </p> </div> <!-- End Body --> </div> <!-- End Media Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Media Card --> <div class="flex dr3q9 v869m dpq4d jujtl vlqzh it6u8 k8i8d dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="yxmdd f5qiq flex encm3 items-center qy7wn x815m jujtl dark:border-neutral-700"> <h2 class="dxkem u2ysm dt7pj dark:text-neutral-200"> Media </h2> <div class="flex qsj3b items-center wwu1y"> <button type="button" class="fuiju rc0sp xgqt9 items-center x60sp ps4xk ivg4u xroga dpq4d jujtl v869m dt7pj k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="vpbnr fwnpl" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m16 16-4-4-4 4"/></svg> Upload from URL </button> </div> </div> <!-- End Header --> <!-- Body --> <div class="dx5bd emlw3"> <!-- Grid --> <div class="cwrq4 uqcx1 u56oi yru4d"> <!-- Card --> <div id="dismiss-img1" class="relative"> <div class="vpbnr relative it6u8 vlqzh w-full qyytz"> <img class="dg83s absolute utnk6 f8uov xa3ev it6u8" src="https://images.unsplash.com/photo-1549298916-f52d724204b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar"> </div> <div class="absolute dg44h x9dnk nsoag"> <button type="button" class="vugj6 xgqt9 q6rsd items-center x60sp ivg4u hac7f a3ufl dpq4d jujtl v869m ue964 k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img1"> <svg class="vpbnr m5z5i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div id="dismiss-img2" class="relative"> <div class="vpbnr relative it6u8 vlqzh w-full qyytz"> <img class="dg83s absolute utnk6 f8uov xa3ev it6u8" src="https://images.unsplash.com/photo-1549298916-acc8271f8b8d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar"> </div> <div class="absolute dg44h x9dnk nsoag"> <button type="button" class="vugj6 xgqt9 q6rsd items-center x60sp ivg4u hac7f a3ufl dpq4d jujtl v869m ue964 k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img2"> <svg class="vpbnr m5z5i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div id="dismiss-img3" class="relative"> <div class="vpbnr relative it6u8 vlqzh w-full qyytz"> <img class="dg83s absolute utnk6 f8uov xa3ev it6u8" src="https://images.unsplash.com/photo-1549298916-c6c5f85fa167?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar"> </div> <div class="absolute dg44h x9dnk nsoag"> <button type="button" class="vugj6 xgqt9 q6rsd items-center x60sp ivg4u hac7f a3ufl dpq4d jujtl v869m ue964 k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img3"> <svg class="vpbnr m5z5i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div id="dismiss-img4" class="relative"> <div class="vpbnr relative it6u8 vlqzh w-full qyytz"> <img class="dg83s absolute utnk6 f8uov xa3ev it6u8" src="https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar"> </div> <div class="absolute dg44h x9dnk nsoag"> <button type="button" class="vugj6 xgqt9 q6rsd items-center x60sp ivg4u hac7f a3ufl dpq4d jujtl v869m ue964 k8i8d ze1zv oekgx z50zr sbnko pfxy3 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img4"> <svg class="vpbnr m5z5i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> </div> <!-- End Card --> </div> <!-- End Grid --> <!-- Drag 'n Drop --> <div class="nws9a"> <label class="hidden pqyx6 hac7f ivg4u dt7pj dark:text-neutral-200"> Upload images </label> <div class="lqm88 i3nhp flex q6rsd v869m dpq4d xaqn2 k1wqe it6u8 dark:bg-neutral-800 dark:border-neutral-600"> <div class="bx4k9"> <svg class="mmih0 mms1j ha88l dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> </svg> <div class="vr44s flex flex-wrap q6rsd hac7f con0a ue964"> <span class="d6ed7 ivg4u dt7pj dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer v869m u2ysm kikgv cyhzb xroga ffypy y9jdg zm895 bw3vs vqcsz rhw98 dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="yps74" name="hs-pro-deuuf"> </label> </div> <p class="l4ccc ps4xk mms1j dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="hac7f vej1k dark:text-neutral-500"> Add up to 10 images to your product. </p> </div> <!-- End Body --> </div> <!-- End Media Card -->
File Upload with Checkbox
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative qm7fm mamhr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body> <div class="w-full m0ph3 ha88l"><!-- Import Products Form --> <div class="v869m dpq4d go7xi k8i8d it6u8 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="yxmdd cqbgq flex encm3 items-center x815m jujtl dark:border-neutral-700"> <h3 class="u2ysm dt7pj dark:text-neutral-200"> Add project </h3> </div> <!-- End Header --> <div class="fo082"> <label class="block hac7f vej1k dark:text-neutral-400"> <a class="hac7f kikgv ffypy y9jdg ivg4u sbnko qdamc dark:text-green-400 dark:hover:text-green-500" href="#">Download a sample CSV template</a> to see an example of the format required. </label> <!-- Drag 'n Drop --> <div class="nws9a"> <label class="hidden pqyx6 hac7f ivg4u dt7pj dark:text-neutral-200"> Upload products </label> <div class="lqm88 i3nhp flex q6rsd v869m dpq4d xaqn2 k1wqe it6u8 dark:bg-neutral-800 dark:border-neutral-600"> <div class="bx4k9"> <svg class="mmih0 mms1j ha88l dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> </svg> <div class="vr44s flex flex-wrap q6rsd hac7f con0a ue964"> <span class="d6ed7 ivg4u dt7pj dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-eipb" class="relative cursor-pointer v869m u2ysm kikgv cyhzb xroga ffypy y9jdg zm895 bw3vs vqcsz rhw98 dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-eipb" type="file" class="yps74" name="hs-pro-deuuf"> </label> </div> <p class="l4ccc ps4xk mms1j dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <!-- Checkbox --> <div class="aruu0 flex"> <input type="checkbox" class="wti0w vpbnr k1wqe qourt kikgv kjmk4 oekgx z50zr dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-green-500 dark:checked:border-green-500 dark:focus:ring-offset-neutral-800" id="hs-pro-eipoonch"> <label for="hs-pro-eipoonch" class="hac7f vej1k izvox dark:text-neutral-400"> Overwrite any current products that have the same handle. Existing values will be used for any missing columns. <a class="hac7f kikgv ffypy y9jdg ivg4u sbnko qdamc dark:text-green-400 dark:hover:text-green-500" href="#">Learn more</a> </label> </div> <!-- End Checkbox --> </div></div> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Import Products Form --> <div class="v869m dpq4d go7xi k8i8d it6u8 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="yxmdd cqbgq flex encm3 items-center x815m jujtl dark:border-neutral-700"> <h3 class="u2ysm dt7pj dark:text-neutral-200"> Add project </h3> </div> <!-- End Header --> <div class="fo082"> <label class="block hac7f vej1k dark:text-neutral-400"> <a class="hac7f kikgv ffypy y9jdg ivg4u sbnko qdamc dark:text-green-400 dark:hover:text-green-500" href="#">Download a sample CSV template</a> to see an example of the format required. </label> <!-- Drag 'n Drop --> <div class="nws9a"> <label class="hidden pqyx6 hac7f ivg4u dt7pj dark:text-neutral-200"> Upload products </label> <div class="lqm88 i3nhp flex q6rsd v869m dpq4d xaqn2 k1wqe it6u8 dark:bg-neutral-800 dark:border-neutral-600"> <div class="bx4k9"> <svg class="mmih0 mms1j ha88l dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="scpqw r367e dark:fill-neutral-800 dark:stroke-neutral-500"/> <path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="r367e dark:stroke-neutral-500"/> </svg> <div class="vr44s flex flex-wrap q6rsd hac7f con0a ue964"> <span class="d6ed7 ivg4u dt7pj dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-eipb" class="relative cursor-pointer v869m u2ysm kikgv cyhzb xroga ffypy y9jdg zm895 bw3vs vqcsz rhw98 dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-eipb" type="file" class="yps74" name="hs-pro-deuuf"> </label> </div> <p class="l4ccc ps4xk mms1j dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <!-- Checkbox --> <div class="aruu0 flex"> <input type="checkbox" class="wti0w vpbnr k1wqe qourt kikgv kjmk4 oekgx z50zr dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-green-500 dark:checked:border-green-500 dark:focus:ring-offset-neutral-800" id="hs-pro-eipoonch"> <label for="hs-pro-eipoonch" class="hac7f vej1k izvox dark:text-neutral-400"> Overwrite any current products that have the same handle. Existing values will be used for any missing columns. <a class="hac7f kikgv ffypy y9jdg ivg4u sbnko qdamc dark:text-green-400 dark:hover:text-green-500" href="#">Learn more</a> </label> </div> <!-- End Checkbox --> </div>
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close