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
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 y56xt lcvuk"> <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="q0mum v3ope yob35"><!-- Drag 'n Drop --> <div class="fqu9e"> <label class="block block np1k4 ibyb7 mwwf4 i6scm dark:text-neutral-200"> Upload form </label> <div class="rowtr flex t2j25 lx3ar aesap ykoc7 yuuoo xfco6 dark:bg-neutral-800 dark:border-neutral-600"> <div class="ojv0p"> <svg class="g9ufp xuytq yob35 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="g3njg n21eg 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="g3njg n21eg 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="g3njg n21eg 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="n21eg dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="n21eg dark:stroke-neutral-500"/> </svg> <div class="tx6at flex flex-wrap t2j25 ibyb7 dqobv hjfyg"> <span class="mv5d1 mwwf4 i6scm dark:text-neutral-200"> Drop your files here or </span> <label for="@@browseID" class="relative cursor-pointer lx3ar a66ko w3gzo q4hk7 klofg cp4xc v91gt opeac xt22b e8esb pxcaq dark:bg-neutral-800 dark:text-blue-500 dark:hover:text-blue-600"> <span>browse</span> <input id="@@browseID" type="file" class="l14y8"> </label> </div> <p class="sunl2 zlgt1 xuytq 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="fqu9e"> <label class="block block np1k4 ibyb7 mwwf4 i6scm dark:text-neutral-200"> Upload form </label> <div class="rowtr flex t2j25 lx3ar aesap ykoc7 yuuoo xfco6 dark:bg-neutral-800 dark:border-neutral-600"> <div class="ojv0p"> <svg class="g9ufp xuytq yob35 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="g3njg n21eg 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="g3njg n21eg 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="g3njg n21eg 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="n21eg dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="n21eg dark:stroke-neutral-500"/> </svg> <div class="tx6at flex flex-wrap t2j25 ibyb7 dqobv hjfyg"> <span class="mv5d1 mwwf4 i6scm dark:text-neutral-200"> Drop your files here or </span> <label for="@@browseID" class="relative cursor-pointer lx3ar a66ko w3gzo q4hk7 klofg cp4xc v91gt opeac xt22b e8esb pxcaq dark:bg-neutral-800 dark:text-blue-500 dark:hover:text-blue-600"> <span>browse</span> <input id="@@browseID" type="file" class="l14y8"> </label> </div> <p class="sunl2 zlgt1 xuytq dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop -->
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 y56xt lcvuk"> <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="q0mum sfmpx yob35"><!-- Media Card --> <div class="flex egjkw lx3ar aesap jjcbq ca7mt xfco6 peu41 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="gtgfz aezid flex qj8qf items-center zeqcc hxiry jjcbq dark:border-neutral-700"> <h2 class="fip28 a66ko pp2dy dark:text-neutral-200"> Media </h2> <div class="flex zmyke items-center syne5"> <button type="button" class="kun15 cz3ro jqzvs items-center qk6gn zlgt1 mwwf4 klofg aesap jjcbq lx3ar pp2dy peu41 tzeei j01y2 otank wh5re t5bje dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="ylm2u enx0e" 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="jjx2u wuzx9"> <!-- Drag 'n Drop --> <div class="fqu9e"> <label class="hidden np1k4 ibyb7 mwwf4 pp2dy dark:text-neutral-200"> Upload images </label> <div class="rowtr s0ph4 flex t2j25 lx3ar aesap ykoc7 kxg45 xfco6 dark:bg-neutral-800 dark:border-neutral-600"> <div class="ojv0p"> <svg class="g9ufp p4wnv yob35 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="g3njg b3tqk 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="g3njg b3tqk 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="g3njg b3tqk 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="b3tqk dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="b3tqk dark:stroke-neutral-500"/> </svg> <div class="tx6at flex flex-wrap t2j25 ibyb7 dqobv mxe4o"> <span class="mv5d1 mwwf4 pp2dy dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer lx3ar a66ko zkd6r e5o11 klofg cp4xc v91gt opeac xt22b fkc7o pxcaq dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="l14y8" name="hs-pro-deuuf"> </label> </div> <p class="sunl2 zlgt1 p4wnv dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="ibyb7 bgdh8 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 egjkw lx3ar aesap jjcbq ca7mt xfco6 peu41 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="gtgfz aezid flex qj8qf items-center zeqcc hxiry jjcbq dark:border-neutral-700"> <h2 class="fip28 a66ko pp2dy dark:text-neutral-200"> Media </h2> <div class="flex zmyke items-center syne5"> <button type="button" class="kun15 cz3ro jqzvs items-center qk6gn zlgt1 mwwf4 klofg aesap jjcbq lx3ar pp2dy peu41 tzeei j01y2 otank wh5re t5bje dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="ylm2u enx0e" 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="jjx2u wuzx9"> <!-- Drag 'n Drop --> <div class="fqu9e"> <label class="hidden np1k4 ibyb7 mwwf4 pp2dy dark:text-neutral-200"> Upload images </label> <div class="rowtr s0ph4 flex t2j25 lx3ar aesap ykoc7 kxg45 xfco6 dark:bg-neutral-800 dark:border-neutral-600"> <div class="ojv0p"> <svg class="g9ufp p4wnv yob35 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="g3njg b3tqk 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="g3njg b3tqk 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="g3njg b3tqk 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="b3tqk dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="b3tqk dark:stroke-neutral-500"/> </svg> <div class="tx6at flex flex-wrap t2j25 ibyb7 dqobv mxe4o"> <span class="mv5d1 mwwf4 pp2dy dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer lx3ar a66ko zkd6r e5o11 klofg cp4xc v91gt opeac xt22b fkc7o pxcaq dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="l14y8" name="hs-pro-deuuf"> </label> </div> <p class="sunl2 zlgt1 p4wnv dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="ibyb7 bgdh8 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 y56xt lcvuk"> <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="q0mum sfmpx yob35"><!-- Media Card --> <div class="flex egjkw lx3ar aesap jjcbq ca7mt xfco6 peu41 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="gtgfz aezid flex qj8qf items-center zeqcc hxiry jjcbq dark:border-neutral-700"> <h2 class="fip28 a66ko pp2dy dark:text-neutral-200"> Media </h2> <div class="flex zmyke items-center syne5"> <button type="button" class="kun15 cz3ro jqzvs items-center qk6gn zlgt1 mwwf4 klofg aesap jjcbq lx3ar pp2dy peu41 tzeei j01y2 otank wh5re t5bje dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="ylm2u enx0e" 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="jjx2u wuzx9"> <!-- Grid --> <div class="bd993 mpjax cttzq nax65"> <!-- Card --> <div id="dismiss-img1" class="relative"> <div class="ylm2u relative xfco6 ca7mt q0mum csopq"> <img class="te00u absolute ztbkf y3vpw qegpc xfco6" 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 fvfyt dwz5w bk6sw"> <button type="button" class="sj82x jqzvs t2j25 items-center qk6gn mwwf4 ibyb7 drtn2 aesap jjcbq lx3ar mxe4o peu41 tzeei j01y2 otank wh5re t5bje 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="ylm2u yaf2e" 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="ylm2u relative xfco6 ca7mt q0mum csopq"> <img class="te00u absolute ztbkf y3vpw qegpc xfco6" 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 fvfyt dwz5w bk6sw"> <button type="button" class="sj82x jqzvs t2j25 items-center qk6gn mwwf4 ibyb7 drtn2 aesap jjcbq lx3ar mxe4o peu41 tzeei j01y2 otank wh5re t5bje 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="ylm2u yaf2e" 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="ylm2u relative xfco6 ca7mt q0mum csopq"> <img class="te00u absolute ztbkf y3vpw qegpc xfco6" 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 fvfyt dwz5w bk6sw"> <button type="button" class="sj82x jqzvs t2j25 items-center qk6gn mwwf4 ibyb7 drtn2 aesap jjcbq lx3ar mxe4o peu41 tzeei j01y2 otank wh5re t5bje 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="ylm2u yaf2e" 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="ylm2u relative xfco6 ca7mt q0mum csopq"> <img class="te00u absolute ztbkf y3vpw qegpc xfco6" 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 fvfyt dwz5w bk6sw"> <button type="button" class="sj82x jqzvs t2j25 items-center qk6gn mwwf4 ibyb7 drtn2 aesap jjcbq lx3ar mxe4o peu41 tzeei j01y2 otank wh5re t5bje 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="ylm2u yaf2e" 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="fqu9e"> <label class="hidden np1k4 ibyb7 mwwf4 pp2dy dark:text-neutral-200"> Upload images </label> <div class="rowtr s0ph4 flex t2j25 lx3ar aesap ykoc7 kxg45 xfco6 dark:bg-neutral-800 dark:border-neutral-600"> <div class="ojv0p"> <svg class="g9ufp p4wnv yob35 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="g3njg b3tqk 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="g3njg b3tqk 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="g3njg b3tqk 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="b3tqk dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="b3tqk dark:stroke-neutral-500"/> </svg> <div class="tx6at flex flex-wrap t2j25 ibyb7 dqobv mxe4o"> <span class="mv5d1 mwwf4 pp2dy dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer lx3ar a66ko zkd6r e5o11 klofg cp4xc v91gt opeac xt22b fkc7o pxcaq dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="l14y8" name="hs-pro-deuuf"> </label> </div> <p class="sunl2 zlgt1 p4wnv dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="ibyb7 bgdh8 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 egjkw lx3ar aesap jjcbq ca7mt xfco6 peu41 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="gtgfz aezid flex qj8qf items-center zeqcc hxiry jjcbq dark:border-neutral-700"> <h2 class="fip28 a66ko pp2dy dark:text-neutral-200"> Media </h2> <div class="flex zmyke items-center syne5"> <button type="button" class="kun15 cz3ro jqzvs items-center qk6gn zlgt1 mwwf4 klofg aesap jjcbq lx3ar pp2dy peu41 tzeei j01y2 otank wh5re t5bje dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="ylm2u enx0e" 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="jjx2u wuzx9"> <!-- Grid --> <div class="bd993 mpjax cttzq nax65"> <!-- Card --> <div id="dismiss-img1" class="relative"> <div class="ylm2u relative xfco6 ca7mt q0mum csopq"> <img class="te00u absolute ztbkf y3vpw qegpc xfco6" 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 fvfyt dwz5w bk6sw"> <button type="button" class="sj82x jqzvs t2j25 items-center qk6gn mwwf4 ibyb7 drtn2 aesap jjcbq lx3ar mxe4o peu41 tzeei j01y2 otank wh5re t5bje 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="ylm2u yaf2e" 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="ylm2u relative xfco6 ca7mt q0mum csopq"> <img class="te00u absolute ztbkf y3vpw qegpc xfco6" 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 fvfyt dwz5w bk6sw"> <button type="button" class="sj82x jqzvs t2j25 items-center qk6gn mwwf4 ibyb7 drtn2 aesap jjcbq lx3ar mxe4o peu41 tzeei j01y2 otank wh5re t5bje 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="ylm2u yaf2e" 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="ylm2u relative xfco6 ca7mt q0mum csopq"> <img class="te00u absolute ztbkf y3vpw qegpc xfco6" 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 fvfyt dwz5w bk6sw"> <button type="button" class="sj82x jqzvs t2j25 items-center qk6gn mwwf4 ibyb7 drtn2 aesap jjcbq lx3ar mxe4o peu41 tzeei j01y2 otank wh5re t5bje 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="ylm2u yaf2e" 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="ylm2u relative xfco6 ca7mt q0mum csopq"> <img class="te00u absolute ztbkf y3vpw qegpc xfco6" 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 fvfyt dwz5w bk6sw"> <button type="button" class="sj82x jqzvs t2j25 items-center qk6gn mwwf4 ibyb7 drtn2 aesap jjcbq lx3ar mxe4o peu41 tzeei j01y2 otank wh5re t5bje 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="ylm2u yaf2e" 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="fqu9e"> <label class="hidden np1k4 ibyb7 mwwf4 pp2dy dark:text-neutral-200"> Upload images </label> <div class="rowtr s0ph4 flex t2j25 lx3ar aesap ykoc7 kxg45 xfco6 dark:bg-neutral-800 dark:border-neutral-600"> <div class="ojv0p"> <svg class="g9ufp p4wnv yob35 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="g3njg b3tqk 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="g3njg b3tqk 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="g3njg b3tqk 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="b3tqk dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="b3tqk dark:stroke-neutral-500"/> </svg> <div class="tx6at flex flex-wrap t2j25 ibyb7 dqobv mxe4o"> <span class="mv5d1 mwwf4 pp2dy dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer lx3ar a66ko zkd6r e5o11 klofg cp4xc v91gt opeac xt22b fkc7o pxcaq dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="l14y8" name="hs-pro-deuuf"> </label> </div> <p class="sunl2 zlgt1 p4wnv dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="ibyb7 bgdh8 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 y56xt lcvuk"> <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="q0mum v3ope yob35"><!-- Import Products Form --> <div class="lx3ar aesap kd06y peu41 xfco6 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="gtgfz dzc0w flex qj8qf items-center hxiry jjcbq dark:border-neutral-700"> <h3 class="a66ko pp2dy dark:text-neutral-200"> Add project </h3> </div> <!-- End Header --> <div class="dbwuq"> <label class="block ibyb7 bgdh8 dark:text-neutral-400"> <a class="ibyb7 zkd6r cp4xc v91gt mwwf4 wh5re dlixe 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="fqu9e"> <label class="hidden np1k4 ibyb7 mwwf4 pp2dy dark:text-neutral-200"> Upload products </label> <div class="rowtr s0ph4 flex t2j25 lx3ar aesap ykoc7 kxg45 xfco6 dark:bg-neutral-800 dark:border-neutral-600"> <div class="ojv0p"> <svg class="g9ufp p4wnv yob35 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="g3njg b3tqk 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="g3njg b3tqk 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="g3njg b3tqk 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="b3tqk dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="b3tqk dark:stroke-neutral-500"/> </svg> <div class="tx6at flex flex-wrap t2j25 ibyb7 dqobv mxe4o"> <span class="mv5d1 mwwf4 pp2dy dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-eipb" class="relative cursor-pointer lx3ar a66ko zkd6r e5o11 klofg cp4xc v91gt opeac xt22b fkc7o pxcaq dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-eipb" type="file" class="l14y8" name="hs-pro-deuuf"> </label> </div> <p class="sunl2 zlgt1 p4wnv dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <!-- Checkbox --> <div class="k8or9 flex"> <input type="checkbox" class="s37o5 ylm2u kxg45 e4ige zkd6r bz6ln j01y2 otank 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="ibyb7 bgdh8 zmzew dark:text-neutral-400"> Overwrite any current products that have the same handle. Existing values will be used for any missing columns. <a class="ibyb7 zkd6r cp4xc v91gt mwwf4 wh5re dlixe 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="lx3ar aesap kd06y peu41 xfco6 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="gtgfz dzc0w flex qj8qf items-center hxiry jjcbq dark:border-neutral-700"> <h3 class="a66ko pp2dy dark:text-neutral-200"> Add project </h3> </div> <!-- End Header --> <div class="dbwuq"> <label class="block ibyb7 bgdh8 dark:text-neutral-400"> <a class="ibyb7 zkd6r cp4xc v91gt mwwf4 wh5re dlixe 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="fqu9e"> <label class="hidden np1k4 ibyb7 mwwf4 pp2dy dark:text-neutral-200"> Upload products </label> <div class="rowtr s0ph4 flex t2j25 lx3ar aesap ykoc7 kxg45 xfco6 dark:bg-neutral-800 dark:border-neutral-600"> <div class="ojv0p"> <svg class="g9ufp p4wnv yob35 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="g3njg b3tqk 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="g3njg b3tqk 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="g3njg b3tqk 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="b3tqk dark:stroke-neutral-500"/> <circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="b3tqk dark:stroke-neutral-500"/> </svg> <div class="tx6at flex flex-wrap t2j25 ibyb7 dqobv mxe4o"> <span class="mv5d1 mwwf4 pp2dy dark:text-neutral-200"> Drop your files here or </span> <label for="hs-pro-eipb" class="relative cursor-pointer lx3ar a66ko zkd6r e5o11 klofg cp4xc v91gt opeac xt22b fkc7o pxcaq dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600"> <span>browse</span> <input id="hs-pro-eipb" type="file" class="l14y8" name="hs-pro-deuuf"> </label> </div> <p class="sunl2 zlgt1 p4wnv dark:text-neutral-400"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <!-- Checkbox --> <div class="k8or9 flex"> <input type="checkbox" class="s37o5 ylm2u kxg45 e4ige zkd6r bz6ln j01y2 otank 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="ibyb7 bgdh8 zmzew dark:text-neutral-400"> Overwrite any current products that have the same handle. Existing values will be used for any missing columns. <a class="ibyb7 zkd6r cp4xc v91gt mwwf4 wh5re dlixe 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