file-generator/zip.html at main · gbitcode/file-generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
---
layout: generator
title: "ZIP Archive Generator"
subtitle: "Generate ZIP archive with custom configuration"
tab_id: "ZIP"
generator_script: "/js/generators/zip.js"
redirect_from:
    - /zip.html
---

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<h2 class="text-2xl font-bold mb-4">ZIP Archive Generator</h2>
<form id="form-zip" class="space-y-4">
    <div class="form-control">
        <label class="label">
            <span class="label-text">Archive Size</span>
        </label>
        <div class="flex flex-col sm:flex-row gap-2">
            <input
                type="number"
                name="size"
                value="50"
                min="0.5"
                step="0.1"
                class="input input-bordered"
                required
            />
            <select name="sizeUnit" class="select select-bordered">
                <option value="KB" selected>KB</option>
                <option value="MB">MB</option>
            </select>
        </div>
    </div>

    <div class="form-control">
        <label class="label">
            <span class="label-text">Size Type</span>
        </label>
        <div class="flex flex-col sm:flex-row gap-3">
            <label class="label cursor-pointer gap-2">
                <input
                    type="radio"
                    name="sizeType"
                    value="after"
                    class="radio radio-primary"
                    checked
                />
                <span class="label-text">After ZIP (compressed)</span>
            </label>
            <label class="label cursor-pointer gap-2">
                <input
                    type="radio"
                    name="sizeType"
                    value="before"
                    class="radio radio-primary"
                />
                <span class="label-text">Before ZIP (uncompressed)</span>
            </label>
        </div>
    </div>

    <div class="form-control">
        <label class="label cursor-pointer justify-start gap-2">
            <input
                type="checkbox"
                name="hiddenFiles"
                class="checkbox checkbox-primary"
            />
            <span class="label-text">Include Hidden Files</span>
        </label>
    </div>

    <div class="form-control">
        <label class="label cursor-pointer justify-start gap-2">
            <input
                type="checkbox"
                name="longFilenames"
                class="checkbox checkbox-primary"
            />
            <span class="label-text">Use Long Filenames</span>
        </label>
    </div>

    <div class="form-control">
        <label class="label">
            <span class="label-text">Folder Depth</span>
        </label>
        <select name="depth" class="select select-bordered w-full">
            <option value="1">1 Level</option>
            <option value="2">2 Levels</option>
            <option value="3">3 Levels</option>
        </select>
    </div>

    <button type="submit" class="btn btn-primary w-full">
        Generate & Download
    </button>
</form>

<script>
    document
        .getElementById("form-zip")
        .addEventListener("submit", async (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            const config = {
                size: parseFloat(formData.get("size")),
                sizeUnit: formData.get("sizeUnit"),
                sizeType: formData.get("sizeType"),
                hiddenFiles: formData.get("hiddenFiles") === "on",
                longFilenames: formData.get("longFilenames") === "on",
                depth: parseInt(formData.get("depth")),
            };

            try {
                const blob = await generateZIP(config);
                logToUI("Preparing file...");
                const shareTitle = `ZIP archive ${config.size} ${config.sizeUnit}`;
                const filename = `ZIP_archive_${config.size}_${config.sizeUnit}.zip`;
                const result = await downloadOrShareFile(blob, filename, "zip", shareTitle);
                if (result.method === 'download') {
                    logToUI("✓ Download complete!");
                }

                // Track in Google Analytics
                gtag("event", "generate_zip", {
                    event_category: "file_generation",
                    event_label: config.sizeType,
                    size_type: config.sizeType,
                    depth: config.depth,
                    hidden_files: config.hiddenFiles ? "yes" : "no",
                    long_filenames: config.longFilenames ? "yes" : "no",
                });
            } catch (error) {
                logToUI(`❌ Error: ${error.message}`);
                showError("ZIP generation failed: " + error.message);
                hideProgress();
            }
        });
</script>