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
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative z469n vaohh"> <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 b940u mx-auto"><!-- Drag 'n Drop --> <div class="space-y-2"> <label class="block block bipfe zao2n jet6l l2bgt"> Upload form </label> <div class="hembn flex gaa3v kqamx t8tjb xx8yd o67vx hua1b"> <div class="jr0cl"> <svg class="f832y r3ern f9oih mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/> </svg> <div class="ebmio flex flex-wrap gaa3v tap5i q95gx"> <span class="pv5ji jet6l l2bgt"> Drop your files here or </span> <label for="hs-pro-dactc" class="relative cursor-pointer okamc eitz2 d8utf p864q tp74o q1iu5 tmkca focus-within:outline-hidden hmpu1 t626j kpbo9"> <span>browse</span> <input id="hs-pro-dactc" type="file" class="n2eu3"> </label> </div> <p class="r1so8 uhey0 f9oih"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --></div> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.1"></script> </body> </html>
<!-- Drag 'n Drop --> <div class="space-y-2"> <label class="block block bipfe zao2n jet6l l2bgt"> Upload form </label> <div class="hembn flex gaa3v kqamx t8tjb xx8yd o67vx hua1b"> <div class="jr0cl"> <svg class="f832y r3ern f9oih mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/> </svg> <div class="ebmio flex flex-wrap gaa3v tap5i q95gx"> <span class="pv5ji jet6l l2bgt"> Drop your files here or </span> <label for="hs-pro-dactc" class="relative cursor-pointer okamc eitz2 d8utf p864q tp74o q1iu5 tmkca focus-within:outline-hidden hmpu1 t626j kpbo9"> <span>browse</span> <input id="hs-pro-dactc" type="file" class="n2eu3"> </label> </div> <p class="r1so8 uhey0 f9oih"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop -->
Horizontal File Upload in Card
new
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative z469n vaohh"> <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="x8hcz w-full dzjaq mx-auto"><!-- File Upload --> <div> <label class="block bipfe jet6l zao2n l2bgt"> Banner image </label> <div data-hs-file-upload='{ "yjwrk": "/upload", "extensions": { "default": { "class": "f832y ih023" }, "xls": { "class": "f832y ih023" }, "zip": { "class": "f832y ih023" }, "csv": { "icon": "<svg 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 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m5 12-3 3 3 3\"/><path d=\"m9 18 3-3-3-3\"/></svg>", "class": "f832y ih023" } } }'> <template data-hs-file-upload-preview> <div class="rnorz kqamx t8tjb d6u1h u0h0i tp74o"> <div class="batu8 flex tah6m items-center"> <div class="flex items-center ary0k"> <span class="toggy flex gaa3v items-center t8tjb u0h0i q95gx tp74o" data-hs-file-upload-file-icon> <img class="tp74o hidden" data-dz-thumbnail> </span> <div> <p class="zao2n jet6l l2bgt"> <span class="truncate inline-block q6tw7 fuy6g" data-hs-file-upload-file-name></span>.<span data-hs-file-upload-file-ext></span> </p> <p class="uhey0 q95gx" data-hs-file-upload-file-size></p> </div> </div> <div class="flex items-center c3em3"> <button type="button" class="q95gx yknw6 focus:outline-hidden vn6xi" data-hs-file-upload-remove> <svg class="f832y krmzt" 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="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg> </button> </div> </div> <div class="flex items-center ary0k tfcfu"> <div class="flex w-full xbxp4 yxq8g x66be overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-hs-file-upload-progress-bar> <div class="flex flex-col gaa3v x66be overflow-hidden tc9ah uhey0 rzxzt jr0cl tfcfu ducw2 c82fj ffpc4" style="width: 0" data-hs-file-upload-progress-bar-pane></div> </div> <div class="ca51f n33lg"> <span class="zao2n l2bgt"> <span data-hs-file-upload-progress-bar-value>0</span>% </span> </div> </div> </div> </template> <div class="cursor-pointer fj10a flex u64n3 t8tjb u0h0i tp74o" data-hs-file-upload-trigger> <div class="flex items-center htq96"> <svg class="f832y toggy l2bgt" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/> </svg> <div class="xkklm"> <div class="inline-flex flex-wrap ldlxq tap5i l2bgt"> Drop your image here or <span class="d8utf p864q tp74o q1iu5 tmkca focus-within:outline-hidden hmpu1 qu5y3 kpbo9">browse</span> </div> <p class="uhey0 q95gx"> Image size should be 1200x630px </p> </div> </div> </div> <div class="ebmio space-y-2 ubp4m" data-hs-file-upload-previews></div> </div> </div> <!-- End File Upload --></div> <!-- Dropzone.js --> <script src="../../assets/vendor/lodash/lodash.min.js"></script> <script src="../../assets/vendor/dropzone/dist/dropzone-min.js"></script> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.1"></script> </body> </html> <script> window.addEventListener('load', () => { setTimeout(() => { document.querySelectorAll('.hs-overlay').forEach((el) => HSOverlay.open(el)); }); }); </script>
<!-- File Upload --> <div> <label class="block bipfe jet6l zao2n l2bgt"> Banner image </label> <div data-hs-file-upload='{ "yjwrk": "/upload", "extensions": { "default": { "class": "f832y ih023" }, "xls": { "class": "f832y ih023" }, "zip": { "class": "f832y ih023" }, "csv": { "icon": "<svg 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 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m5 12-3 3 3 3\"/><path d=\"m9 18 3-3-3-3\"/></svg>", "class": "f832y ih023" } } }'> <template data-hs-file-upload-preview> <div class="rnorz kqamx t8tjb d6u1h u0h0i tp74o"> <div class="batu8 flex tah6m items-center"> <div class="flex items-center ary0k"> <span class="toggy flex gaa3v items-center t8tjb u0h0i q95gx tp74o" data-hs-file-upload-file-icon> <img class="tp74o hidden" data-dz-thumbnail> </span> <div> <p class="zao2n jet6l l2bgt"> <span class="truncate inline-block q6tw7 fuy6g" data-hs-file-upload-file-name></span>.<span data-hs-file-upload-file-ext></span> </p> <p class="uhey0 q95gx" data-hs-file-upload-file-size></p> </div> </div> <div class="flex items-center c3em3"> <button type="button" class="q95gx yknw6 focus:outline-hidden vn6xi" data-hs-file-upload-remove> <svg class="f832y krmzt" 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="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg> </button> </div> </div> <div class="flex items-center ary0k tfcfu"> <div class="flex w-full xbxp4 yxq8g x66be overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-hs-file-upload-progress-bar> <div class="flex flex-col gaa3v x66be overflow-hidden tc9ah uhey0 rzxzt jr0cl tfcfu ducw2 c82fj ffpc4" style="width: 0" data-hs-file-upload-progress-bar-pane></div> </div> <div class="ca51f n33lg"> <span class="zao2n l2bgt"> <span data-hs-file-upload-progress-bar-value>0</span>% </span> </div> </div> </div> </template> <div class="cursor-pointer fj10a flex u64n3 t8tjb u0h0i tp74o" data-hs-file-upload-trigger> <div class="flex items-center htq96"> <svg class="f832y toggy l2bgt" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/> </svg> <div class="xkklm"> <div class="inline-flex flex-wrap ldlxq tap5i l2bgt"> Drop your image here or <span class="d8utf p864q tp74o q1iu5 tmkca focus-within:outline-hidden hmpu1 qu5y3 kpbo9">browse</span> </div> <p class="uhey0 q95gx"> Image size should be 1200x630px </p> </div> </div> </div> <div class="ebmio space-y-2 ubp4m" data-hs-file-upload-previews></div> </div> </div> <!-- End File Upload -->
Files Apps: Upload Form
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative z469n vaohh"> <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="pc4wy b940u w-full mx-auto"><!-- Upload Form --> <div class="bzdc7 r3sj5 kclvy relative w-full flex flex-col gaa3v items-center jr0cl eocpi kqamx t8tjb xx8yd o67vx hua1b"> <div class="flex items-center ldlxq"> <span class="jet6l l2bgt"> Drop files here or </span> <label for="hs-pro-dumfct" class="cursor-pointer vzubd p295z decoration d8utf p864q dig6r focus:outline-hidden"> browse files </label> <input id="hs-pro-dumfct" type="file" class="n2eu3" name="hs-pro-dumfct"> </div> <div class="flex flex-wrap gaa3v items-center jggmm"> <!-- Icon Card --> <label for="hs-pro-dumfctflu" class="group i687h pa1wp flex flex-col gaa3v items-center uqtnu kqamx hua1b cursor-pointer ouzu8 focus:outline-hidden"> <span class="flex f832y gaa3v items-center c4aky g4iir spjke x66be"> <svg class="f832y krmzt" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M12 12v6"/><path d="m15 15-3-3-3 3"/></svg> </span> <span class="uhey0 i6gk1"> File upload </span> </label> <input id="hs-pro-dumfctflu" type="file" class="n2eu3" name="hs-pro-dumfctflu"> <!-- End Icon Card --> <!-- Icon Card --> <label for="hs-pro-dumfctfru" class="group i687h pa1wp flex flex-col gaa3v items-center uqtnu kqamx hua1b cursor-pointer ouzu8 focus:outline-hidden"> <span class="flex f832y gaa3v items-center c4aky g4iir spjke x66be"> <svg class="f832y krmzt" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M12 10v6"/><path d="m9 13 3-3 3 3"/></svg> </span> <span class="uhey0 i6gk1"> Folder upload </span> </label> <input id="hs-pro-dumfctfru" type="file" class="n2eu3" name="hs-pro-dumfctfru"> <!-- End Icon Card --> <!-- Icon Card --> <label for="hs-pro-dumfctdnd" class="group i687h pa1wp hidden md:flex flex-col gaa3v items-center uqtnu kqamx hua1b cursor-pointer ouzu8 focus:outline-hidden"> <span class="flex f832y gaa3v items-center c4aky g4iir spjke x66be"> <svg class="f832y krmzt" 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="uhey0 i6gk1"> Drag-n-Drop </span> </label> <input id="hs-pro-dumfctdnd" type="file" class="n2eu3" name="hs-pro-dumfctdnd"> </div> </div> <!-- End Upload Form --></div> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.1"></script> </body> </html>
<!-- Upload Form --> <div class="bzdc7 r3sj5 kclvy relative w-full flex flex-col gaa3v items-center jr0cl eocpi kqamx t8tjb xx8yd o67vx hua1b"> <div class="flex items-center ldlxq"> <span class="jet6l l2bgt"> Drop files here or </span> <label for="hs-pro-dumfct" class="cursor-pointer vzubd p295z decoration d8utf p864q dig6r focus:outline-hidden"> browse files </label> <input id="hs-pro-dumfct" type="file" class="n2eu3" name="hs-pro-dumfct"> </div> <div class="flex flex-wrap gaa3v items-center jggmm"> <!-- Icon Card --> <label for="hs-pro-dumfctflu" class="group i687h pa1wp flex flex-col gaa3v items-center uqtnu kqamx hua1b cursor-pointer ouzu8 focus:outline-hidden"> <span class="flex f832y gaa3v items-center c4aky g4iir spjke x66be"> <svg class="f832y krmzt" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M12 12v6"/><path d="m15 15-3-3-3 3"/></svg> </span> <span class="uhey0 i6gk1"> File upload </span> </label> <input id="hs-pro-dumfctflu" type="file" class="n2eu3" name="hs-pro-dumfctflu"> <!-- End Icon Card --> <!-- Icon Card --> <label for="hs-pro-dumfctfru" class="group i687h pa1wp flex flex-col gaa3v items-center uqtnu kqamx hua1b cursor-pointer ouzu8 focus:outline-hidden"> <span class="flex f832y gaa3v items-center c4aky g4iir spjke x66be"> <svg class="f832y krmzt" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M12 10v6"/><path d="m9 13 3-3 3 3"/></svg> </span> <span class="uhey0 i6gk1"> Folder upload </span> </label> <input id="hs-pro-dumfctfru" type="file" class="n2eu3" name="hs-pro-dumfctfru"> <!-- End Icon Card --> <!-- Icon Card --> <label for="hs-pro-dumfctdnd" class="group i687h pa1wp hidden md:flex flex-col gaa3v items-center uqtnu kqamx hua1b cursor-pointer ouzu8 focus:outline-hidden"> <span class="flex f832y gaa3v items-center c4aky g4iir spjke x66be"> <svg class="f832y krmzt" 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="uhey0 i6gk1"> Drag-n-Drop </span> </label> <input id="hs-pro-dumfctdnd" type="file" class="n2eu3" name="hs-pro-dumfctdnd"> </div> </div> <!-- End Upload Form -->
Front and Back Upload Group
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative z469n vaohh"> <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="pc4wy w-full b940u mx-auto"><!-- Grid --> <div class="gs9zt td3jh wu01n l8c01"> <!-- Upload Form --> <label for="hs-pro-pyoruifr" class="fj10a kclvy relative cursor-pointer w-full flex flex-col gaa3v items-center jr0cl i0bn9 kqamx s5yjr znvs7 asek2 hua1b zwyob focus:outline-hidden mwd92"> <span class="n2eu3">Browse</span> <span class="f832y kmvib inline-flex gaa3v items-center lu76b spjke x66be group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="f832y ih023" 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="zao2n q95gx"> Upload the front side of your document </span> <span class="ue9hi jet6l text-[13px] d8utf"> Choose a file </span> <input id="hs-pro-pyoruifr" type="file" class="n2eu3" name="hs-pro-pyoruifr"> </label> <!-- End Upload Form --> <!-- Upload Form --> <label for="hs-pro-pyoruibs" class="fj10a kclvy relative cursor-pointer w-full flex flex-col gaa3v items-center jr0cl i0bn9 kqamx s5yjr znvs7 asek2 hua1b zwyob focus:outline-hidden mwd92"> <span class="n2eu3">Browse</span> <span class="f832y kmvib inline-flex gaa3v items-center lu76b spjke x66be group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="f832y ih023" 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="zao2n q95gx"> Upload the back side of your document </span> <span class="ue9hi jet6l text-[13px] d8utf"> Choose a file </span> <input id="hs-pro-pyoruibs" type="file" class="n2eu3" name="hs-pro-pyoruibs"> </label> <!-- End Upload Form --> </div> <!-- End Grid --></div> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.1"></script> </body> </html>
<!-- Grid --> <div class="gs9zt td3jh wu01n l8c01"> <!-- Upload Form --> <label for="hs-pro-pyoruifr" class="fj10a kclvy relative cursor-pointer w-full flex flex-col gaa3v items-center jr0cl i0bn9 kqamx s5yjr znvs7 asek2 hua1b zwyob focus:outline-hidden mwd92"> <span class="n2eu3">Browse</span> <span class="f832y kmvib inline-flex gaa3v items-center lu76b spjke x66be group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="f832y ih023" 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="zao2n q95gx"> Upload the front side of your document </span> <span class="ue9hi jet6l text-[13px] d8utf"> Choose a file </span> <input id="hs-pro-pyoruifr" type="file" class="n2eu3" name="hs-pro-pyoruifr"> </label> <!-- End Upload Form --> <!-- Upload Form --> <label for="hs-pro-pyoruibs" class="fj10a kclvy relative cursor-pointer w-full flex flex-col gaa3v items-center jr0cl i0bn9 kqamx s5yjr znvs7 asek2 hua1b zwyob focus:outline-hidden mwd92"> <span class="n2eu3">Browse</span> <span class="f832y kmvib inline-flex gaa3v items-center lu76b spjke x66be group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="f832y ih023" 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="zao2n q95gx"> Upload the back side of your document </span> <span class="ue9hi jet6l text-[13px] d8utf"> Choose a file </span> <input id="hs-pro-pyoruibs" type="file" class="n2eu3" name="hs-pro-pyoruibs"> </label> <!-- End Upload Form --> </div> <!-- End Grid -->
Image upload
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative z469n vaohh"> <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 niyf0 mx-auto"><!-- Media Card --> <div class="flex flex-col u64n3 t8tjb u0h0i overflow-hidden hua1b y9wzu"> <!-- Header --> <div class="xyt5v x2v9d flex tah6m items-center zzhmg jvyn5 ehn35"> <h2 class="inline-block eitz2 l2bgt"> Media </h2> <div class="flex wzdcx items-center c3em3"> <button type="button" class="pz76f d4nlf inline-flex items-center wtg7y uhey0 jet6l tp74o kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy"> <svg class="f832y t6dfr" 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="hpidb space-y-4"> <!-- Drag 'n Drop --> <div class="space-y-2"> <label class="hidden block bipfe zao2n jet6l l2bgt"> Upload images </label> <div class="hembn flex gaa3v kqamx t8tjb xx8yd o67vx hua1b"> <div class="jr0cl"> <svg class="f832y r3ern f9oih mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/> </svg> <div class="ebmio flex flex-wrap gaa3v tap5i q95gx"> <span class="pv5ji jet6l l2bgt"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer okamc eitz2 d8utf p864q tp74o q1iu5 tmkca focus-within:outline-hidden hmpu1 t626j kpbo9"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="n2eu3"> </label> </div> <p class="r1so8 uhey0 f9oih"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="zao2n q95gx"> 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=4.0.1"></script> </body> </html>
<!-- Media Card --> <div class="flex flex-col u64n3 t8tjb u0h0i overflow-hidden hua1b y9wzu"> <!-- Header --> <div class="xyt5v x2v9d flex tah6m items-center zzhmg jvyn5 ehn35"> <h2 class="inline-block eitz2 l2bgt"> Media </h2> <div class="flex wzdcx items-center c3em3"> <button type="button" class="pz76f d4nlf inline-flex items-center wtg7y uhey0 jet6l tp74o kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy"> <svg class="f832y t6dfr" 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="hpidb space-y-4"> <!-- Drag 'n Drop --> <div class="space-y-2"> <label class="hidden block bipfe zao2n jet6l l2bgt"> Upload images </label> <div class="hembn flex gaa3v kqamx t8tjb xx8yd o67vx hua1b"> <div class="jr0cl"> <svg class="f832y r3ern f9oih mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/> </svg> <div class="ebmio flex flex-wrap gaa3v tap5i q95gx"> <span class="pv5ji jet6l l2bgt"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer okamc eitz2 d8utf p864q tp74o q1iu5 tmkca focus-within:outline-hidden hmpu1 t626j kpbo9"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="n2eu3"> </label> </div> <p class="r1so8 uhey0 f9oih"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="zao2n q95gx"> Add up to 10 images to your product. </p> </div> <!-- End Body --> </div> <!-- End Media Card -->
Image Upload with Removable Media
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative z469n vaohh"> <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 niyf0 mx-auto"><!-- Media Card --> <div class="flex flex-col u64n3 t8tjb u0h0i overflow-hidden hua1b y9wzu"> <!-- Header --> <div class="xyt5v x2v9d flex tah6m items-center zzhmg jvyn5 ehn35"> <h2 class="inline-block eitz2 l2bgt"> Media </h2> <div class="flex wzdcx items-center c3em3"> <button type="button" class="pz76f d4nlf inline-flex items-center wtg7y uhey0 jet6l tp74o kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy"> <svg class="f832y t6dfr" 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="hpidb space-y-4"> <!-- Grid --> <div class="gs9zt nus97 rzwf1 jggmm"> <!-- Card --> <div id="dismiss-img1" class="relative"> <div class="f832y relative hua1b overflow-hidden w-full delws"> <img class="nw84h absolute gjs78 y3c38 j1xb8 hua1b" 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 gpdva azn5o ixcl1"> <button type="button" class="xlv2m inline-flex gaa3v items-center wtg7y jet6l zao2n x66be kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy" data-hs-remove-element="#dismiss-img1"> <svg class="f832y krmzt" 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="f832y relative hua1b overflow-hidden w-full delws"> <img class="nw84h absolute gjs78 y3c38 j1xb8 hua1b" 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 gpdva azn5o ixcl1"> <button type="button" class="xlv2m inline-flex gaa3v items-center wtg7y jet6l zao2n x66be kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy" data-hs-remove-element="#dismiss-img2"> <svg class="f832y krmzt" 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="f832y relative hua1b overflow-hidden w-full delws"> <img class="nw84h absolute gjs78 y3c38 j1xb8 hua1b" 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 gpdva azn5o ixcl1"> <button type="button" class="xlv2m inline-flex gaa3v items-center wtg7y jet6l zao2n x66be kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy" data-hs-remove-element="#dismiss-img3"> <svg class="f832y krmzt" 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="f832y relative hua1b overflow-hidden w-full delws"> <img class="nw84h absolute gjs78 y3c38 j1xb8 hua1b" 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 gpdva azn5o ixcl1"> <button type="button" class="xlv2m inline-flex gaa3v items-center wtg7y jet6l zao2n x66be kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy" data-hs-remove-element="#dismiss-img4"> <svg class="f832y krmzt" 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="space-y-2"> <label class="hidden block bipfe zao2n jet6l l2bgt"> Upload images </label> <div class="hembn flex gaa3v kqamx t8tjb xx8yd o67vx hua1b"> <div class="jr0cl"> <svg class="f832y r3ern f9oih mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/> </svg> <div class="ebmio flex flex-wrap gaa3v tap5i q95gx"> <span class="pv5ji jet6l l2bgt"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer okamc eitz2 d8utf p864q tp74o q1iu5 tmkca focus-within:outline-hidden hmpu1 t626j kpbo9"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="n2eu3"> </label> </div> <p class="r1so8 uhey0 f9oih"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="zao2n q95gx"> 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=4.0.1"></script> </body> </html>
<!-- Media Card --> <div class="flex flex-col u64n3 t8tjb u0h0i overflow-hidden hua1b y9wzu"> <!-- Header --> <div class="xyt5v x2v9d flex tah6m items-center zzhmg jvyn5 ehn35"> <h2 class="inline-block eitz2 l2bgt"> Media </h2> <div class="flex wzdcx items-center c3em3"> <button type="button" class="pz76f d4nlf inline-flex items-center wtg7y uhey0 jet6l tp74o kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy"> <svg class="f832y t6dfr" 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="hpidb space-y-4"> <!-- Grid --> <div class="gs9zt nus97 rzwf1 jggmm"> <!-- Card --> <div id="dismiss-img1" class="relative"> <div class="f832y relative hua1b overflow-hidden w-full delws"> <img class="nw84h absolute gjs78 y3c38 j1xb8 hua1b" 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 gpdva azn5o ixcl1"> <button type="button" class="xlv2m inline-flex gaa3v items-center wtg7y jet6l zao2n x66be kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy" data-hs-remove-element="#dismiss-img1"> <svg class="f832y krmzt" 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="f832y relative hua1b overflow-hidden w-full delws"> <img class="nw84h absolute gjs78 y3c38 j1xb8 hua1b" 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 gpdva azn5o ixcl1"> <button type="button" class="xlv2m inline-flex gaa3v items-center wtg7y jet6l zao2n x66be kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy" data-hs-remove-element="#dismiss-img2"> <svg class="f832y krmzt" 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="f832y relative hua1b overflow-hidden w-full delws"> <img class="nw84h absolute gjs78 y3c38 j1xb8 hua1b" 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 gpdva azn5o ixcl1"> <button type="button" class="xlv2m inline-flex gaa3v items-center wtg7y jet6l zao2n x66be kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy" data-hs-remove-element="#dismiss-img3"> <svg class="f832y krmzt" 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="f832y relative hua1b overflow-hidden w-full delws"> <img class="nw84h absolute gjs78 y3c38 j1xb8 hua1b" 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 gpdva azn5o ixcl1"> <button type="button" class="xlv2m inline-flex gaa3v items-center wtg7y jet6l zao2n x66be kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy" data-hs-remove-element="#dismiss-img4"> <svg class="f832y krmzt" 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="space-y-2"> <label class="hidden block bipfe zao2n jet6l l2bgt"> Upload images </label> <div class="hembn flex gaa3v kqamx t8tjb xx8yd o67vx hua1b"> <div class="jr0cl"> <svg class="f832y r3ern f9oih mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/> </svg> <div class="ebmio flex flex-wrap gaa3v tap5i q95gx"> <span class="pv5ji jet6l l2bgt"> Drop your files here or </span> <label for="hs-pro-epdupb" class="relative cursor-pointer okamc eitz2 d8utf p864q tp74o q1iu5 tmkca focus-within:outline-hidden hmpu1 t626j kpbo9"> <span>browse</span> <input id="hs-pro-epdupb" type="file" class="n2eu3"> </label> </div> <p class="r1so8 uhey0 f9oih"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <p class="zao2n q95gx"> Add up to 10 images to your product. </p> </div> <!-- End Body --> </div> <!-- End Media Card -->
File Upload with Checkbox
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative z469n vaohh"> <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 b940u mx-auto"><!-- Import Products Form --> <div class="u64n3 t8tjb u0h0i y9wzu hua1b"> <!-- Header --> <div class="k85z8 bzdc7 flex tah6m items-center jvyn5 sguje"> <h3 class="jet6l l2bgt"> Add project </h3> </div> <!-- End Header --> <div class="fj10a"> <label class="block bipfe zao2n q95gx"> <a class="zao2n d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24" href="#">Download a sample CSV template</a> to see an example of the format required. </label> <!-- Drag 'n Drop --> <div class="space-y-2"> <label class="hidden block bipfe zao2n jet6l l2bgt"> Upload products </label> <div class="hembn flex gaa3v kqamx t8tjb xx8yd o67vx hua1b"> <div class="jr0cl"> <svg class="f832y r3ern f9oih mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/> </svg> <div class="ebmio flex flex-wrap gaa3v tap5i q95gx"> <span class="pv5ji jet6l l2bgt"> Drop your files here or </span> <label for="hs-pro-eipb" class="relative cursor-pointer okamc eitz2 d8utf p864q tp74o q1iu5 tmkca focus-within:outline-hidden hmpu1 t626j kpbo9"> <span>browse</span> <input id="hs-pro-eipb" type="file" class="n2eu3"> </label> </div> <p class="r1so8 uhey0 f9oih"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <!-- Checkbox --> <div class="fc0km flex"> <input type="checkbox" class="cunus f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-eipoonch"> <label for="hs-pro-eipoonch" class="lqheg zao2n q95gx"> Overwrite any current products that have the same handle. Existing values will be used for any missing columns. <a class="zao2n d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24" href="#">Learn more</a> </label> </div> <!-- End Checkbox --> </div></div> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.1"></script> </body> </html>
<!-- Import Products Form --> <div class="u64n3 t8tjb u0h0i y9wzu hua1b"> <!-- Header --> <div class="k85z8 bzdc7 flex tah6m items-center jvyn5 sguje"> <h3 class="jet6l l2bgt"> Add project </h3> </div> <!-- End Header --> <div class="fj10a"> <label class="block bipfe zao2n q95gx"> <a class="zao2n d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24" href="#">Download a sample CSV template</a> to see an example of the format required. </label> <!-- Drag 'n Drop --> <div class="space-y-2"> <label class="hidden block bipfe zao2n jet6l l2bgt"> Upload products </label> <div class="hembn flex gaa3v kqamx t8tjb xx8yd o67vx hua1b"> <div class="jr0cl"> <svg class="f832y r3ern f9oih mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/> </svg> <div class="ebmio flex flex-wrap gaa3v tap5i q95gx"> <span class="pv5ji jet6l l2bgt"> Drop your files here or </span> <label for="hs-pro-eipb" class="relative cursor-pointer okamc eitz2 d8utf p864q tp74o q1iu5 tmkca focus-within:outline-hidden hmpu1 t626j kpbo9"> <span>browse</span> <input id="hs-pro-eipb" type="file" class="n2eu3"> </label> </div> <p class="r1so8 uhey0 f9oih"> CSV, XLS, DOCX </p> </div> </div> </div> <!-- End Drag 'n Drop --> <!-- Checkbox --> <div class="fc0km flex"> <input type="checkbox" class="cunus f832y krmzt okamc asek2 r0l8q y9wzu d8utf uun8o p2c6h checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-eipoonch"> <label for="hs-pro-eipoonch" class="lqheg zao2n q95gx"> Overwrite any current products that have the same handle. Existing values will be used for any missing columns. <a class="zao2n d8utf q1iu5 tmkca jet6l focus:outline-hidden tcf24" href="#">Learn more</a> </label> </div> <!-- End Checkbox --> </div>
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close