├── README.md ├── downloads └── notice.msg ├── uploads └── notice.msg ├── LICENSE ├── api └── compress.zip.php ├── index.html └── src ├── compress.js └── compress.css /README.md: -------------------------------------------------------------------------------- 1 | # zipper 2 | zipper convert multiple files to zip file using languages HTML, css, Javascript && php 3 | -------------------------------------------------------------------------------- /downloads/notice.msg: -------------------------------------------------------------------------------- 1 | # download folder in store converted zip file 2 | 3 | # when user download zip file click on download button 4 | so we are delete the zip file so user download -------------------------------------------------------------------------------- /uploads/notice.msg: -------------------------------------------------------------------------------- 1 | # uploads folder in uploaded media any files 2 | 3 | # zip converting process in first step store files 4 | while converted after zip file 5 | 6 | when zip file converted succesfully so i delete 7 | this all files beacuse no be full web memeory and 8 | height load in my website -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Modassir 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /api/compress.zip.php: -------------------------------------------------------------------------------- 1 | $value ) { 10 | if ( !empty( $value ) ) return false; 11 | } 12 | return true; 13 | } 14 | 15 | $rzipname = "/^[a-zA-Z0-9\-\._ ]+$/"; 16 | 17 | if ( empty( $zipname ) ) { 18 | die( json_encode( array("error"=>"zipname is required. please enter your zipname?") ) ); 19 | } 20 | else if ( !preg_match( $rzipname, $zipname ) ) { 21 | die( json_encode( array("error"=>"Invalid zipname you cannot use '".$zipname."' zipname") ) ); 22 | } 23 | 24 | if ( isEmptyFile( $files ) ) { 25 | die( json_encode( array("error"=>"We cannot create zip. plase select your file") ) ); 26 | } 27 | 28 | $dir = "../downloads/"; 29 | $zipSetup = $dir.$zipname.".zip"; 30 | $status = "error"; 31 | 32 | $zip = new ZipArchive(); 33 | $zip->open( $zipSetup, ZipArchive::CREATE); 34 | foreach( $files["name"] as $index=>$value ) { 35 | // get file tmp_name 36 | $tmp_name = $files["tmp_name"][ $index ]; 37 | 38 | if ( move_uploaded_file( $tmp_name, "../uploads/".$value ) ) { 39 | $zip->addFile( "../uploads/".$value ); 40 | $status = "success"; 41 | } 42 | } 43 | $zip->close(); 44 | 45 | // now delete/remove before uploaded files 46 | foreach( $files["name"] as $key=>$filename ) { 47 | if ( file_exists( "../uploads/".$filename ) ) { 48 | unlink( "../uploads/".$filename ); 49 | } 50 | } 51 | 52 | function sizeFormat( $size ) { 53 | $sizes = array( " Bytes", " KB", " MB", " GB" ); 54 | if ( $size === 0 ) { 55 | return ('n/a'); 56 | } else { 57 | return ( round( $size / pow( 1024, ( $i = floor( log( $size, 1024 ) ) ) ), 2 ) . $sizes[ $i ] ); 58 | } 59 | } 60 | 61 | $formatSize = sizeFormat( filesize( $zipSetup ) ); 62 | die( json_encode( array($status=>"'".$zipname."' converted zip successfully!", "zipname"=>$zipname, "size"=>$formatSize) ) ); 63 | } 64 | 65 | if ( isset( $_GET["rmv"] ) ) { 66 | $rmv_file_setup = "../downloads/".$_GET["rmv"].".zip"; 67 | if ( file_exists( $rmv_file_setup ) ) { 68 | unlink( $rmv_file_setup ); 69 | } 70 | die("success"); // die success status 71 | } 72 | ?> -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Convert files to zip 8 | 9 | 10 | 11 |
12 |

Compress multiple files to zip format

13 |
14 | 25 |
26 | 27 |
28 |
29 |
30 | 31 | 32 | 33 |
34 |

Drag file here to compress them your zip

35 | Or 36 | 37 |
38 |
39 |
40 | 41 |
42 |
43 | 50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /src/compress.js: -------------------------------------------------------------------------------- 1 | 2 | var dragArea = document.querySelector(".cdd"), 3 | inputFile = document.querySelector("#files"), 4 | fileCounter = document.querySelector(".file-counter"); 5 | 6 | dragArea.addEventListener("dragover", function( e ) { 7 | e.preventDefault(); 8 | this.classList.add("ready"); 9 | } ); 10 | 11 | dragArea.addEventListener("dragleave", function( e ) { 12 | e.preventDefault(); 13 | this.classList.remove("ready"); 14 | } ); 15 | 16 | dragArea.addEventListener("drop", function( e ) { 17 | e.preventDefault(); 18 | 19 | var files = e.dataTransfer.files, 20 | len = files.length; 21 | 22 | inputFile.files = files; 23 | fileCounter.innerHTML = len + ( len === 1 ? " File" : " Files" ); 24 | } ); 25 | 26 | inputFile.addEventListener("change", function( e ) { 27 | var files = e.target.files, 28 | len = files.length; 29 | 30 | fileCounter.innerHTML = len + ( len === 1 ? " File" : " Files" ); 31 | } ); 32 | 33 | 34 | function errorOrSuccessHandling( msg ) { 35 | const error = document.querySelector(".errors"), 36 | errotText = error.querySelector("span"); 37 | 38 | if ( typeof msg === "string" ) { 39 | error.style.display = ""; 40 | errotText.innerHTML = msg; 41 | return error; 42 | } 43 | 44 | error.style.display = "none"; 45 | return error; 46 | } 47 | 48 | // handling download options 49 | function showDownloadOption( bool, zipname, size ) { 50 | var downloadOpt = document.querySelector(".download-zip"); 51 | var zipName = downloadOpt.querySelector(".zipname"); 52 | var filesize = downloadOpt.querySelector(".size"); 53 | 54 | if ( typeof bool === "boolean" && bool ) { 55 | downloadOpt.style.display = ""; 56 | document.forms[ 0 ].style.display = "none"; 57 | zipName.innerHTML = zipname; // set zipname 58 | filesize.innerHTML = size; // set filesize 59 | return downloadOpt; 60 | } 61 | 62 | downloadOpt.style.display = "none"; 63 | document.forms[ 0 ].style.display = ""; 64 | return downloadOpt; 65 | } 66 | 67 | document.forms[ 0 ].addEventListener("submit", function( e ) { 68 | e.preventDefault(); 69 | 70 | const error = document.querySelector(".errors"); 71 | const formData = new FormData( this ); 72 | 73 | 74 | var compressBtn = document.querySelector(".compress-button"); 75 | compressBtn.innerHTML = "Compressing..."; 76 | compressBtn.classList.add("progress"); 77 | compressBtn.disabled = true; 78 | 79 | var xhr = new window.XMLHttpRequest(); 80 | xhr.open("POST", "./api/compress.zip.php", true ); 81 | xhr.onload = function() { 82 | if ( xhr.readyState === xhr.DONE && ( xhr.status >= 200 && xhr.status < 300 ) ) { 83 | 84 | try { 85 | this.jsonData = JSON.parse( this.response ); 86 | } catch( e ) { 87 | errorOrSuccessHandling( "Parsererror: Faild creation zip soemthing went problem?" ); 88 | return; 89 | } 90 | 91 | const jsonData = this.jsonData; 92 | 93 | setTimeout( function() { 94 | 95 | if ( jsonData["error"] ) { 96 | errorOrSuccessHandling( jsonData["error"] ).classList.add("show-danger"); 97 | error.classList.remove("show-success"); 98 | } 99 | else { 100 | errorOrSuccessHandling( jsonData["success"] ).classList.add("show-success"); 101 | error.classList.remove("show-danger"); 102 | 103 | showDownloadOption( true, jsonData["zipname"], jsonData["size"] ); 104 | } 105 | 106 | compressBtn.innerHTML = "Compress zip"; 107 | compressBtn.classList.remove("progress"); 108 | compressBtn.disabled = false; 109 | }, 1000); 110 | } 111 | } 112 | xhr.send( formData ); 113 | } ); 114 | 115 | // download zip file on click handler 116 | document.querySelector(".download").addEventListener("click", function() { 117 | var zipname = document.querySelector(".zipname").textContent; 118 | 119 | // creating downlod link 120 | var link = document.createElement("a"); 121 | link.href = "./downloads/" + zipname + ".zip"; 122 | link.download = zipname; 123 | 124 | link.click(); 125 | 126 | // let's start xhr 127 | var xhr = new window.XMLHttpRequest(); 128 | xhr.open("GET", "./api/compress.zip.php?rmv=" + zipname, true); 129 | xhr.onload = function() { 130 | if ( xhr.readyState === xhr.DONE && ( xhr.status >= 200 && xhr.status < 300 ) ) { 131 | if ( this.response === "success" ) { 132 | document.forms[ 0 ].reset(); 133 | showDownloadOption( false ); // hide downlod option 134 | fileCounter.innerHTML = ""; // reset file counter 135 | } 136 | } 137 | } 138 | xhr.send(); 139 | } ); -------------------------------------------------------------------------------- /src/compress.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; 6 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 7 | } 8 | 9 | html, body { 10 | width: 100%; 11 | height: 100%; 12 | display: -webkit-box; 13 | display: -ms-flexbox; 14 | display: flex; 15 | -webkit-box-orient: vertical; 16 | -webkit-box-direction: normal; 17 | -ms-flex-direction: column; 18 | flex-direction: column; 19 | -webkit-box-align: center; 20 | -ms-flex-align: center; 21 | align-items: center; 22 | padding: 4% 2% 2% 2%; 23 | background-color: #203266; 24 | } 25 | 26 | .compresser { 27 | position: relative; 28 | background-color: #fff; 29 | border-radius: 6px; 30 | padding: 15px; 31 | width: 560px; 32 | -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); 33 | box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); 34 | } 35 | 36 | @media only screen and (max-width: 590px) { 37 | .compresser { 38 | width: 100%; 39 | } 40 | } 41 | 42 | h1 { 43 | font-weight: 500; 44 | font-size: 26px; 45 | padding: 8px 0px; 46 | margin-bottom: 11px; 47 | border-bottom: 1px solid #e9e5e5; 48 | } 49 | 50 | .cff button, input { 51 | width: 100%; 52 | height: 30px; 53 | position: relative; 54 | outline: none; 55 | border: 1px solid #ccc; 56 | border-radius: 5px; 57 | } 58 | 59 | .errors { 60 | width: 100%; 61 | padding: 5px 11px; 62 | margin-bottom: 11px; 63 | font-size: 14px; 64 | border-radius: 4px; 65 | } 66 | 67 | .errors, .errors > div { 68 | display: -webkit-box; 69 | display: -ms-flexbox; 70 | display: flex; 71 | -webkit-box-align: center; 72 | -ms-flex-align: center; 73 | align-items: center; 74 | } 75 | 76 | svg { 77 | display: block; 78 | } 79 | 80 | .errors { 81 | border-left: 3px solid #0ca80c; 82 | } 83 | 84 | svg.danger { 85 | color: #dd3030; 86 | display: none; 87 | } 88 | 89 | svg.success { 90 | color: #0ca80c; 91 | display: none; 92 | } 93 | 94 | .errors.show-danger svg.danger { 95 | display: block; 96 | } 97 | 98 | .errors.show-success svg.success { 99 | display: block; 100 | } 101 | 102 | .errors.show-danger { 103 | color: #f51414; 104 | } 105 | 106 | .errors.show-success { 107 | color: #0ca80c; 108 | } 109 | 110 | .compress-button { 111 | background-color: #203266; 112 | color: #fff; 113 | font-weight: 500; 114 | cursor: pointer; 115 | border: 1px solid #394b81 !important; 116 | } 117 | 118 | .compress-button.progress { 119 | color: #c3b8b8; 120 | background-color: #3d4868; 121 | border: 1px solid #323d5e !important; 122 | } 123 | 124 | .compress-button.progress:hover { 125 | color: #c3b8b8; 126 | background-color: #3d4868; 127 | border: 1px solid #323d5e !important; 128 | } 129 | 130 | .compress-button:hover { 131 | color: #fcf7f7; 132 | background-color: #1a2b5f; 133 | } 134 | 135 | #zipname { 136 | padding-left: 8px; 137 | font-weight: 500; 138 | margin-bottom: 11px; 139 | } 140 | 141 | #zipname:focus { 142 | border-color: #2141a3; 143 | } 144 | 145 | #zipname:focus::-webkit-input-placeholder { 146 | color: #ccc; 147 | } 148 | 149 | #zipname:focus:-ms-input-placeholder { 150 | color: #ccc; 151 | } 152 | 153 | #zipname:focus::-ms-input-placeholder { 154 | color: #ccc; 155 | } 156 | 157 | #zipname:focus::placeholder { 158 | color: #ccc; 159 | } 160 | 161 | .cdd { 162 | position: relative; 163 | width: 100%; 164 | height: 200px; 165 | margin-bottom: 11px; 166 | display: -webkit-box; 167 | display: -ms-flexbox; 168 | display: flex; 169 | -webkit-box-orient: vertical; 170 | -webkit-box-direction: normal; 171 | -ms-flex-direction: column; 172 | flex-direction: column; 173 | -webkit-box-align: center; 174 | -ms-flex-align: center; 175 | align-items: center; 176 | border-radius: 5px; 177 | -webkit-box-pack: center; 178 | -ms-flex-pack: center; 179 | justify-content: center; 180 | text-align: center; 181 | border: 1px dashed #203266; 182 | } 183 | 184 | .cdd:hover { 185 | background-color: #d3c8c829; 186 | } 187 | 188 | .cdd .file-counter { 189 | position: absolute; 190 | bottom: 0; 191 | right: 0; 192 | margin: 11px; 193 | font-size: 14px; 194 | text-transform: capitalize; 195 | font-weight: 500; 196 | color: #808080; 197 | } 198 | 199 | .cdd h4 { 200 | font-weight: 500; 201 | } 202 | 203 | .cdd span { 204 | font-size: 14px; 205 | margin-top: 5px; 206 | } 207 | 208 | .cdd span label { 209 | font-weight: 500; 210 | color: #203266; 211 | margin-left: 3px; 212 | cursor: pointer; 213 | } 214 | 215 | .cdd span label:hover { 216 | text-decoration: underline; 217 | } 218 | 219 | .cdd.ready { 220 | border: 2px dashed #2e427e; 221 | } 222 | 223 | .download-zip { 224 | display: -webkit-box; 225 | display: -ms-flexbox; 226 | display: flex; 227 | -webkit-box-align: center; 228 | -ms-flex-align: center; 229 | align-items: center; 230 | padding: 8px 0px; 231 | -webkit-box-pack: justify; 232 | -ms-flex-pack: justify; 233 | justify-content: space-between; 234 | } 235 | 236 | .download-zip .zipname, .download-zip span { 237 | font-weight: 500; 238 | overflow: hidden; 239 | white-space: nowrap; 240 | text-overflow: ellipsis; 241 | } 242 | 243 | .download-zip .zipname { 244 | max-width: 260px; 245 | } 246 | 247 | .download-zip span { 248 | font-size: 14px; 249 | } 250 | 251 | .download-zip button { 252 | outline: none; 253 | padding: 5px 11px; 254 | border-radius: 4px; 255 | color: #fff; 256 | font-weight: 500; 257 | border: 1px solid #1c3681 !important; 258 | background-color: #203266; 259 | cursor: pointer; 260 | } 261 | 262 | .download-zip button:hover { 263 | color: #fcf7f7; 264 | background-color: #1a2b5f; 265 | } --------------------------------------------------------------------------------