Skip to main content

max / makenotwork

7.5 KB · 170 lines History Blame Raw
1 {% include "wizards/partials/step_nav.html" %}
2
3 <div class="wizard-step">
4 <h2 class="subtitle-h2">Item Basics</h2>
5 <p class="step-description">Title, description, and cover image for your item.</p>
6 <p class="form-hint">An <strong>item</strong> is an individual piece of content &mdash; a song, episode, chapter, download, or release. Fans purchase or access items directly.</p>
7
8 <form hx-post="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/basics"
9 hx-target="#wizard-step" hx-swap="innerHTML"
10 hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/content">
11 <div class="form-group">
12 <label for="wiz-item-title">Title</label>
13 <input type="text" id="wiz-item-title" name="title" required
14 value="{{ title }}"
15 placeholder="Episode 1, Chapter 1, Track 1..." autocomplete="off">
16 </div>
17
18 <div class="form-group">
19 <label for="wiz-item-desc">Description</label>
20 <textarea id="wiz-item-desc" name="description" rows="5"
21 placeholder="Describe this item...">{{ description }}</textarea>
22 </div>
23
24 <div class="form-group">
25 <label>Cover Image <span class="wizard-optional-tag">(optional)</span></label>
26
27 <div class="project-image-upload" id="image-upload-area">
28 <div class="project-image-dropzone" id="image-dropzone">
29 {% if let Some(url) = cover_image_url %}
30 <div class="project-image-current" id="image-current">
31 <img src="{{ url }}" alt="Item image" class="wizard-cover-img">
32 </div>
33 {% else %}
34 <div class="project-image-placeholder" id="image-placeholder">
35 <p>Square, at least 400x400px</p>
36 <p class="hint">JPG, PNG, or WebP. Max 10 MB.</p>
37 </div>
38 {% endif %}
39 <input type="file" id="image-file-input" accept="image/jpeg,image/png,image/webp" class="sr-only">
40 </div>
41
42 <button type="button" class="btn-secondary" id="choose-image-btn"
43 onclick="document.getElementById('image-file-input').click()">Choose File</button>
44
45 <div class="upload-status" id="image-upload-status">
46 <div class="upload-progress-inline hidden" id="image-upload-progress">
47 <span id="image-upload-filename"></span>
48 <span id="image-upload-percent">0%</span>
49 <div class="progress-bar-container">
50 <div class="progress-bar" id="image-progress-bar"></div>
51 </div>
52 </div>
53 <div class="upload-error-inline hidden" id="image-upload-error">
54 <span class="error-message" id="image-error-message"></span>
55 </div>
56 </div>
57 </div>
58
59 <input type="hidden" name="cover_image_url" id="cover-image-url"
60 value="{% if let Some(url) = cover_image_url %}{{ url }}{% endif %}">
61 </div>
62
63 <div class="wizard-actions">
64 <button type="button" class="btn-secondary"
65 hx-get="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/type"
66 hx-target="#wizard-step" hx-swap="innerHTML"
67 hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/type">Back</button>
68 <button type="submit" class="btn-primary">Continue</button>
69 </div>
70 </form>
71 </div>
72
73 <script>
74 (function() {
75 var itemId = '{{ item_id }}';
76 var dropzone = document.getElementById('image-dropzone');
77 var fileInput = document.getElementById('image-file-input');
78 var hiddenUrl = document.getElementById('cover-image-url');
79 var progressEl = document.getElementById('image-upload-progress');
80 var errorEl = document.getElementById('image-upload-error');
81 var placeholder = document.getElementById('image-placeholder');
82 var currentImg = document.getElementById('image-current');
83 var chooseBtn = document.getElementById('choose-image-btn');
84
85 var uploader = new S3Uploader({
86 filenameEl: document.getElementById('image-upload-filename'),
87 percentEl: document.getElementById('image-upload-percent'),
88 progressBar: document.getElementById('image-progress-bar'),
89 });
90
91 initDropzone(dropzone, fileInput, function(file) {
92 uploadItemImage(file);
93 });
94
95 function uploadItemImage(file) {
96 errorEl.classList.add('hidden');
97 progressEl.classList.remove('hidden');
98 chooseBtn.disabled = true;
99
100 fetch('/api/items/image/presign', {
101 method: 'POST',
102 headers: { 'Content-Type': 'application/json', ...csrfHeaders() },
103 body: JSON.stringify({
104 item_id: itemId,
105 file_name: file.name,
106 content_type: file.type || 'image/jpeg'
107 })
108 })
109 .then(function(res) {
110 if (!res.ok) return res.text().then(function(body) {
111 try { var d = JSON.parse(body); throw new Error(d.error || 'Failed to get upload URL'); }
112 catch(e) { if (e.message && e.message !== body) throw e; throw new Error('Failed to get upload URL'); }
113 });
114 return res.json();
115 })
116 .then(function(data) {
117 return uploader.upload(data.upload_url, file, data.s3_key, file.type || 'image/jpeg', data.cache_control);
118 })
119 .then(function(s3Key) {
120 return fetch('/api/items/image/confirm', {
121 method: 'POST',
122 headers: { 'Content-Type': 'application/json', ...csrfHeaders() },
123 body: JSON.stringify({
124 item_id: itemId,
125 s3_key: s3Key
126 })
127 });
128 })
129 .then(function(res) {
130 if (!res.ok) return res.text().then(function(body) {
131 try { var d = JSON.parse(body); throw new Error(d.error || 'Failed to confirm upload'); }
132 catch(e) { if (e.message && e.message !== body) throw e; throw new Error('Failed to confirm upload'); }
133 });
134 return res.json();
135 })
136 .then(function(data) {
137 hiddenUrl.value = data.image_url;
138 progressEl.classList.add('hidden');
139 chooseBtn.disabled = false;
140 showUploadedImage(data.image_url);
141 })
142 .catch(function(err) {
143 progressEl.classList.add('hidden');
144 chooseBtn.disabled = false;
145 showError(err.message || 'Upload failed. Please try again.');
146 });
147 }
148
149 function showUploadedImage(url) {
150 if (placeholder) placeholder.classList.add('hidden');
151 if (currentImg) {
152 currentImg.querySelector('img').src = url;
153 currentImg.classList.remove('hidden');
154 } else {
155 var div = document.createElement('div');
156 div.className = 'project-image-current';
157 div.id = 'image-current';
158 div.innerHTML = '<img src="' + url + '" alt="Item image" class="wizard-cover-img">';
159 dropzone.insertBefore(div, fileInput);
160 currentImg = div;
161 }
162 }
163
164 function showError(message) {
165 errorEl.classList.remove('hidden');
166 document.getElementById('image-error-message').textContent = message;
167 }
168 })();
169 </script>
170