Creates a ZIP archive of selected files and encrypts it with CF-256 using an optional password. It also allows decompressing the encrypted file back into the original files. Everything is client-side โ nothing is sent to servers.
CDN for czip:
Premium removes advertising.
window.Cf256Config = {key: "Key Here"};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CustomEngine File Compression Demo</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
h1 {
color: #333;
}
input, button {
margin: 10px 0;
padding: 8px;
font-size: 16px;
}
input[type="file"] {
width: 100%;
}
input[type="password"] {
width: 100%;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
pre {
background-color: #f4f4f4;
padding: 10px;
overflow-x: auto;
}
</style>
</head>
<body>
<h1>File Compression/Decompression</h1>
<input type="file" id="inputFile" accept="*/*">
<input type="password" id="password" placeholder="Enter password (optional)">
<button onclick="compress()">Compress</button>
<button onclick="decompress()">Decompress</button>
<pre id="output">Result will appear here...</pre>
<!-- CDN -->
<script>window.Cf256Config = {key: "Yours Key Here"};</script>
<script src="https://obfuscatorjs-seven.vercel.app/zip/cdn.min.js"></script>
<script>
async function compress() {
const fileInput = document.getElementById('inputFile');
const password = document.getElementById('password').value;
const output = document.getElementById('output');
if (!fileInput.files[0]) {
output.textContent = 'Please select a file.';
return;
}
const file = fileInput.files[0];
const data = new Uint8Array(await file.arrayBuffer());
const compressor = new CustomEngine.CustomCompressor();
let result = await compressor.compress(data);
if (password) {
result = await CustomEngine.CustomFlow.encryptData(result, password);
}
const blob = new Blob([result], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = file.name + (password ? '.encrypted' : '.compressed');
a.click();
URL.revokeObjectURL(url);
output.textContent = `File compressed${password ? ' and encrypted' : ''}. Download started.`;
}
async function decompress() {
const fileInput = document.getElementById('inputFile');
const password = document.getElementById('password').value;
const output = document.getElementById('output');
if (!fileInput.files[0]) {
output.textContent = 'Please select a file.';
return;
}
const file = fileInput.files[0];
let data = new Uint8Array(await file.arrayBuffer());
const compressor = new CustomEngine.CustomCompressor();
if (password) {
data = await CustomEngine.CustomFlow.decryptData(data, password);
}
const decompressed = await compressor.decompress(data);
const blob = new Blob([decompressed], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = file.name.replace('.compressed', '').replace('.encrypted', '');
a.click();
URL.revokeObjectURL(url);
output.textContent = `File decompressed${password ? ' and decrypted' : ''}. Download started.`;
}
</script>
</body>
</html>
Complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CustomEngine - Compress & Encrypt</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
text-align: center;
color: #333;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.section {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="file"], input[type="password"], button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
.download-button {
background-color: #28a745;
}
.download-button:hover {
background-color: #1e7e34;
}
.status-area {
min-height: 30px;
margin-bottom: 10px;
}
.status.success {
color: green;
}
.status.error {
color: red;
}
.speed {
font-size: 0.9em;
color: #555;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>CustomEngine - File Compression & Encryption</h1>
<div class="container">
<div class="section">
<h2>Compress / Encrypt & Decompress / Decrypt</h2>
<label for="file-input">Select File:</label>
<input type="file" id="file-input">
<label for="password-input">Password (Optional):</label>
<input type="password" id="password-input" placeholder="Enter password for encryption/decryption">
<button onclick="processFile('compress')">Compress / Encrypt</button>
<button onclick="processFile('decompress')">Decompress / Decrypt</button>
<div class="status-area" id="status"></div>
<div class="speed" id="speed">Speed: 0.0 MB/s</div>
<div id="download-area"></div>
</div>
</div>
<!-- Load the script from CDN -->
<script>
// Before importing the CDN
// Optional premium key configuration
window.Cf256Config = {
key: 'Key Here'
};
</script>
<script src="https://obfuscatorjs-seven.vercel.app/zip/cdn.min.js"></script>
<script>
// Function to check if file is encrypted (based on CustomFlow-256 magic number)
async function isEncryptedFile(file) {
const headerBlob = file.slice(0, 6);
const headerData = new Uint8Array(await headerBlob.arrayBuffer());
const magic = Array.from(headerData.slice(0, 5));
const expectedMagic = [0x43, 0x46, 0x32, 0x35, 0x36]; // CF256
return magic.every((b, i) => b === expectedMagic[i]);
}
// Function to extract original filename from encrypted file
async function getOriginalFilename(file) {
const headerBlob = file.slice(0, 83); // Magic (5) + Version (1) + HMAC (32) + Salt (32) + Nonce (12) + FilenameLength (1)
const headerData = new Uint8Array(await headerBlob.arrayBuffer());
let offset = 6 + 32 + 32 + 12; // Skip magic, version, HMAC, salt, nonce
const fileNameLength = headerData[offset];
offset += 1;
const fileNameBytes = headerData.slice(offset, offset + fileNameLength);
return new window.CustomEngine.TextDecoder().decode(fileNameBytes);
}
// Function to process file (compress/encrypt or decompress/decrypt)
async function processFile(mode) {
const fileInput = document.getElementById('file-input');
const passwordInput = document.getElementById('password-input');
const statusElement = document.getElementById('status');
const downloadArea = document.getElementById('download-area');
const speedElement = document.getElementById('speed');
const file = fileInput.files[0];
const password = passwordInput.value;
if (!file) {
window.CustomEngine.showStatus("โ File is required!", true, statusElement);
return;
}
if (mode === 'compress') {
window.CustomEngine.showStatus("๐ Processing file...", false, statusElement);
try {
const reader = new FileReader();
reader.onload = async function() {
const arrayBuffer = reader.result;
let processedData = new Uint8Array(arrayBuffer);
let fileName = file.name;
// Compression
const compressor = new window.CustomEngine.CustomCompressor();
processedData = await compressor.compress(processedData);
fileName = fileName.endsWith('.compressed') ? fileName : fileName + '.compressed';
// Encryption if password is provided
if (password) {
processedData = await window.CustomEngine.CustomFlow.encryptData(processedData, password, speedElement);
fileName = window.CustomEngine.isPremiumActive ? fileName + '.enc' : fileName + '.cf256';
}
const blob = new Blob([processedData], { type: 'application/octet-stream' });
window.CustomEngine.createDownloadButton(blob, fileName, downloadArea);
window.CustomEngine.showStatus(`โ
File processed successfully!`, false, statusElement);
};
reader.readAsArrayBuffer(file);
} catch (error) {
window.CustomEngine.showStatus(`โ Processing failed: ${error.message}`, true, statusElement);
console.error('Processing error:', error);
}
} else if (mode === 'decompress') {
const isEncrypted = await isEncryptedFile(file);
if (isEncrypted && !password) {
window.CustomEngine.showStatus("โ Password is required for encrypted file!", true, statusElement);
return;
}
window.CustomEngine.showStatus("๐ Processing file...", false, statusElement);
try {
const reader = new FileReader();
reader.onload = async function() {
let processedData = new Uint8Array(reader.result);
let fileName = file.name;
// Get original filename if encrypted
if (isEncrypted) {
fileName = await getOriginalFilename(file);
} else {
fileName = fileName.replace(/\.compressed$/, '');
}
// Decryption if password is provided and file is encrypted
if (isEncrypted && password) {
processedData = await window.CustomEngine.CustomFlow.decryptData(processedData, password, speedElement);
}
// Decompression
const compressor = new window.CustomEngine.CustomCompressor();
processedData = await compressor.decompress(processedData);
const mimeType = window.CustomEngine.getMimeType(fileName);
const blob = new Blob([processedData], { type: mimeType });
window.CustomEngine.createDownloadButton(blob, fileName, downloadArea);
window.CustomEngine.showStatus(`โ
File processed successfully!`, false, statusElement);
};
reader.readAsArrayBuffer(file);
} catch (error) {
window.CustomEngine.showStatus(`โ Processing failed: ${error.message}`, true, statusElement);
console.error('Processing error:', error);
}
}
}
</script>
</body>
</html>