${attr.attribute_name} (${isMandatory ? 'Mandatory' : 'Optional'}):
`; const chipContainer = el('div', 'chips-container'); attr.possible_values.forEach(value => { const chip = el('label', 'attribute-chip'); // Checkbox input is hidden, but drives the selection state const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.value = value; checkbox.name = `${p.item_id}-${attr.attribute_name}`; // Set initial state checkbox.checked = initialSelected.includes(value); // The visual part of the chip const span = el('span'); span.textContent = value; chip.appendChild(checkbox); chip.appendChild(span); chipContainer.appendChild(chip); }); // Use event delegation on the container for performance chipContainer.addEventListener('change', updateCallback); wrapper.appendChild(chipContainer); return wrapper; } // --- Main Select Checkbox (Product Selection) --- const right = el('label', 'select'); const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = isProductSelected(p.item_id); const lbl = el('span'); lbl.textContent = 'Select Product'; right.appendChild(cb); right.appendChild(lbl); // --- Dynamic Attribute Selects --- const attrContainer = el('div', 'attribute-selectors'); // Find all mandatory and non-mandatory attributes for this product const mandatoryAttributes = p.product_type_details?.filter(a => a.is_mandatory === 'Yes') || []; const optionalAttributes = p.product_type_details?.filter(a => a.is_mandatory !== 'Yes') || []; // Helper to update the main state object with all current selections const updateProductState = () => { const isSelected = cb.checked; const currentSelections = {}; if (isSelected) { // Iterate over all attribute groups (Mandatory and Optional) attrContainer.querySelectorAll('.attribute-chip-group').forEach(group => { const attrName = group.dataset.attrName; // Collect selected chip values const selectedOptions = Array.from(group.querySelectorAll('input[type="checkbox"]:checked')) .map(checkbox => checkbox.value); if (selectedOptions.length > 0) { currentSelections[attrName] = selectedOptions; } }); } toggleProductSelection(p.item_id, isSelected, currentSelections); row.classList.toggle('selected', isSelected); }; // Attach listener to main checkbox cb.addEventListener('change', () => { attrContainer.classList.toggle('disabled', !cb.checked); updateProductState(); }); // --- Render Mandatory Attributes --- if (mandatoryAttributes.length > 0) { const manTitle = el('p', "pSelectRight mandatory-title"); manTitle.innerHTML = "Mandatory Attributes:"; attrContainer.appendChild(manTitle); mandatoryAttributes.forEach(attr => { const initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values; const chipGroup = createAttributeChips(p, attr, initialSelected, true, updateProductState); attrContainer.appendChild(chipGroup); }); } // --- Render Optional Attributes --- if (optionalAttributes.length > 0) { const br = el('br'); const optTitle = el('p', "pSelectRight optional-title"); optTitle.innerHTML = "Optional Attributes:"; attrContainer.appendChild(br); attrContainer.appendChild(optTitle); optionalAttributes.forEach(attr => { const initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values; const chipGroup = createAttributeChips(p, attr, initialSelected, false, updateProductState); attrContainer.appendChild(chipGroup); }); } // Initialize attribute selectors' enabled state and state data attrContainer.classList.toggle('disabled', !cb.checked); // Initial state setup if the product was already selected (e.g., after a re-render) if (cb.checked) { // This is important to set the initial state correctly on load // We defer this until all selects are mounted, or ensure the initial state is correct. // For simplicity, we assume the data from PRODUCT_BASE already includes selected attributes if a selection exists // (which it won't in this case, so they default to all/empty) } const inline = el('div', 'attr-inline'); inline.dataset.pid = p.item_id; // use item_id for mapping row.appendChild(left); row.appendChild(mid); row.appendChild(attrContainer); // Append the new attribute selectors container row.appendChild(right); // if (p.mandatoryAttributes && p.mandatoryAttributes.length > 0) { // const hr = el('hr'); // row.appendChild(hr); // row.appendChild(attri); // row.appendChild(secondRight); // } row.appendChild(inline); return row; } // Cards layout function renderProductsCards(items = getCurrentSlice()) { const cards = document.getElementById('cardsContainer'); cards.innerHTML = ''; if(items.length > 0){ items.forEach(p => cards.appendChild(createProductCard(p))); }else{ cards.innerHTML = "No Products Found.
" } } // --- Table layout --- function createMiniThumb(p) { const mt = el('div', 'mini-thumb'); const img = new Image(); img.src = mediaUrl+p.image_path || p.image || ''; img.alt = `${p.product_name} image`; console.log("img",img); img.onerror = () => { img.src = mediaUrl+"media/images/no-product.png" }; // img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); mt.appendChild(fb); }; mt.appendChild(img); return mt; } // Table layout // function renderProductsTable(items = getCurrentSlice()) { // const wrap = document.getElementById('tableContainer'); // wrap.innerHTML = ''; // const table = document.createElement('table'); // const thead = document.createElement('thead'); const trh = document.createElement('tr'); // ['Select', 'Image', 'Product', 'SKU', 'Type', 'Short Description'].forEach(h => { // const th = document.createElement('th'); th.textContent = h; trh.appendChild(th); // }); // thead.appendChild(trh); table.appendChild(thead); // const tbody = document.createElement('tbody'); // if(items.length > 0 ){ // items.forEach(p => { // const tr = document.createElement('tr'); tr.id = `row-${p.id}`; // const tdSel = document.createElement('td'); tdSel.className = 'select-cell'; // const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.item_id); // cb.addEventListener('change', () => { setChecked(p.item_id, cb.checked); tr.classList.toggle('selected', cb.checked); }); // tdSel.appendChild(cb); tr.appendChild(tdSel); // const tdImg = document.createElement('td'); tdImg.className = 'thumb-cell'; tdImg.appendChild(createMiniThumb(p)); tr.appendChild(tdImg); // const tdName = document.createElement('td'); tdName.textContent = p.product_name || '—'; tr.appendChild(tdName); // const tdSku = document.createElement('td'); tdSku.textContent = p.item_id || '—'; tr.appendChild(tdSku); // const tdType = document.createElement('td'); const b = document.createElement('span'); b.className = 'badge'; b.textContent = p.product_type || '—'; tdType.appendChild(b); tr.appendChild(tdType); // const tdDesc = document.createElement('td'); tdDesc.textContent = p.product_short_description || ''; tr.appendChild(tdDesc); // tr.addEventListener('click', (e) => { if (e.target.tagName.toLowerCase() !== 'input') { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); } }); // tbody.appendChild(tr); // }); // }else{ // const tr = el('tr'); // // tr.id = `row-${p.id}`; // const tdName = el('td'); // tdName.colSpan = 6; // tdName.innerHTML = "No Products Found." // tr.appendChild(tdName); // // tr.colspan = 6; // // tr.innerHTML // tbody.appendChild(tr); // } // table.appendChild(tbody); // wrap.appendChild(table); // } // NOTE: Ensure getProductStateUpdater and generateAttributeUI functions are defined globally or accessible here. /** * Returns a closure function that updates the global selectedProductsWithAttributes state * based on the current selections (chips) found in the DOM for a specific product. * This is used for both card and table views. * * @param {Object} p - The product object. * @param {HTMLElement} cb - The main product selection checkbox element. * @param {HTMLElement} tr - The main row/card element (used for toggling 'selected' class). * @returns {function} A function to be used as the attribute change handler. */ const getProductStateUpdater = (p, cb, tr) => () => { const isSelected = cb.checked; const currentSelections = {}; // Find the attribute container using its unique ID, which is the same structure // used in both card and table detail views (e.g., 'attr-container-124353498' or just the main card element). // For card view, the container is often the attrContainer element itself. // For table view, we use the explicit ID. const attrContainer = document.getElementById(`attr-container-${p.item_id}`) || tr.querySelector('.attribute-selectors'); if (isSelected && attrContainer) { // Iterate over all attribute groups (Mandatory and Optional) within the container attrContainer.querySelectorAll('.attribute-chip-group').forEach(group => { const attrName = group.dataset.attrName; // Collect selected chip values const selectedOptions = Array.from(group.querySelectorAll('input[type="checkbox"]:checked')) .map(checkbox => checkbox.value); // Only add to the selection if at least one option is selected if (selectedOptions.length > 0) { currentSelections[attrName] = selectedOptions; } }); } // Update the global state array (selectedProductsWithAttributes) toggleProductSelection(p.item_id, isSelected, currentSelections); // Update the visual status of the row/card tr.classList.toggle('selected', isSelected); }; /** * Generates the full attribute selection UI (chips) for a given product. * NOTE: Assumes el(), createAttributeChips(), and getSelectedAttributes() are defined globally. * @param {Object} p - The product object from PRODUCT_BASE. * @param {function} updateProductState - The callback to run on chip changes. * @param {HTMLElement} attrContainer - The container to append the UI to. */ function generateAttributeUI(p, updateProductState, attrContainer) { // Clear the container first, just in case attrContainer.innerHTML = ''; const mandatoryAttributes = p.product_type_details?.filter(a => a.is_mandatory === 'Yes') || []; const optionalAttributes = p.product_type_details?.filter(a => a.is_mandatory !== 'Yes') || []; // --- Render Mandatory Attributes --- if (mandatoryAttributes.length > 0) { // Use a general title for the section header const manTitle = el('p', "pSelectRight mandatory-title"); manTitle.innerHTML = "Mandatory Attributes:"; attrContainer.appendChild(manTitle); mandatoryAttributes.forEach(attr => { const initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values; // The createAttributeChips function must be globally available const chipGroup = createAttributeChips(p, attr, initialSelected, true, updateProductState); attrContainer.appendChild(chipGroup); }); } // --- Render Optional Attributes --- if (optionalAttributes.length > 0) { // Add visual separation using the optional-title class const optTitle = el('p', "pSelectRight optional-title"); optTitle.innerHTML = "Optional Attributes:"; // Append the title for separation attrContainer.appendChild(optTitle); optionalAttributes.forEach(attr => { const initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values; const chipGroup = createAttributeChips(p, attr, initialSelected, false, updateProductState); attrContainer.appendChild(chipGroup); }); } } /** * Creates the HTML structure for a single attribute group using chip/checkbox labels. * Assumes the helper function 'el' is available. * * @param {Object} p - The product object. * @param {Object} attr - The specific attribute detail object. * @param {string[]} initialSelected - Array of values that should be pre-checked. * @param {boolean} isMandatory - True if the attribute is mandatory. * @param {function} updateCallback - The function to call when a chip selection changes. * @returns {HTMLElement} The attribute chip group container (div). */ function createAttributeChips(p, attr, initialSelected, isMandatory, updateCallback) { const wrapper = el('div', 'attribute-chip-group'); wrapper.dataset.attrName = attr.attribute_name; // Determine the header text based on structure preference (e.g., just the name) const statusText = isMandatory ? ' (Mandatory)' : ' (Optional)'; wrapper.innerHTML = `${attr.attribute_name}${statusText}:
`; const chipContainer = el('div', 'chips-container'); attr.possible_values.forEach(value => { const chip = el('label', 'attribute-chip'); // Checkbox input is hidden, but drives the selection state const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.value = value; // Ensure the name is unique per product/attribute group checkbox.name = `${p.item_id}-${attr.attribute_name}`; // Set initial state checkbox.checked = initialSelected.includes(value); // The visual part of the chip const span = el('span'); span.textContent = value; chip.appendChild(checkbox); chip.appendChild(span); chipContainer.appendChild(chip); }); // Attach listener to the container using event delegation chipContainer.addEventListener('change', updateCallback); wrapper.appendChild(chipContainer); return wrapper; } function renderProductsTable(items = getCurrentSlice()) { const wrap = document.getElementById('tableContainer'); wrap.innerHTML = ''; const table = document.createElement('table'); table.classList.add('table', 'table-striped', 'table-bordered'); const thead = document.createElement('thead'); const trh = document.createElement('tr'); // Table Headers ['Select', 'Image', 'Product', 'SKU', 'Type', 'Short Description', 'Attributes'].forEach(h => { const th = document.createElement('th'); th.textContent = h; trh.appendChild(th); }); thead.appendChild(trh); table.appendChild(thead); const tbody = document.createElement('tbody'); if (items.length > 0) { items.forEach(p => { const tr = document.createElement('tr'); tr.id = `row-${p.id}`; if (isProductSelected(p.item_id)) tr.classList.add('selected'); // --- Define Checkbox (cb) and State Updater --- const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = isProductSelected(p.item_id); // The state updater function is bound to this specific row/checkbox const updateProductState = getProductStateUpdater(p, cb, tr); // --- Select Cell --- const tdSel = document.createElement('td'); tdSel.className = 'select-cell'; tdSel.appendChild(cb); tr.appendChild(tdSel); // --- Other Cells --- const tdImg = document.createElement('td'); tdImg.className = 'thumb-cell'; tdImg.appendChild(createMiniThumb(p)); tr.appendChild(tdImg); const tdName = document.createElement('td'); tdName.textContent = p.product_name || '—'; tr.appendChild(tdName); const tdSku = document.createElement('td'); tdSku.textContent = p.item_id || '—'; tr.appendChild(tdSku); const tdType = document.createElement('td'); const b = document.createElement('span'); b.className = 'badge'; b.textContent = p.product_type || '—'; tdType.appendChild(b); tr.appendChild(tdType); const tdDesc = document.createElement('td'); tdDesc.textContent = p.product_short_description || ''; tr.appendChild(tdDesc); // --------------------------------------------- // --- ATTRIBUTE SELECTION IMPLEMENTATION --- // --------------------------------------------- // 1. DETAIL ROW STRUCTURE const detailRow = document.createElement('tr'); detailRow.classList.add('attribute-detail-row'); // Custom class for styling detailRow.style.display = 'none'; // Initially hidden detailRow.id = `detail-row-${p.id}`; const detailCell = document.createElement('td'); detailCell.colSpan = 7; // Must span all columns const attrContainer = document.createElement('div'); attrContainer.id = `attr-container-${p.item_id}`; // Unique ID for targeting by updateProductState attrContainer.classList.add('attribute-selectors', 'table-selectors'); // 2. GENERATE CHIPS UI generateAttributeUI(p, updateProductState, attrContainer); // Initially disable the chips if the product is not selected attrContainer.classList.toggle('disabled', !cb.checked); detailCell.appendChild(attrContainer); detailRow.appendChild(detailCell); // 3. TOGGLE BUTTON (in the main row) const tdAttr = document.createElement('td'); const toggleButton = document.createElement('button'); toggleButton.textContent = 'Configure'; toggleButton.classList.add('btn', 'btn-sm', 'btn-info', 'attribute-toggle-btn'); tdAttr.appendChild(toggleButton); tr.appendChild(tdAttr); // 4. EVENT LISTENERS // a) Toggle Button Logic toggleButton.addEventListener('click', (e) => { e.stopPropagation(); // Stop row click event const isHidden = detailRow.style.display === 'none'; detailRow.style.display = isHidden ? '' : 'none'; // Toggle visibility toggleButton.textContent = isHidden ? 'Hide Attributes' : 'Configure'; toggleButton.classList.toggle('btn-info', !isHidden); toggleButton.classList.toggle('btn-secondary', isHidden); }); // b) Main Checkbox Change Logic cb.addEventListener('change', () => { updateProductState(); // Update state on check/uncheck attrContainer.classList.toggle('disabled', !cb.checked); // Enable/Disable chips }); // c) Row Click Listener (Updated to ignore button clicks) tr.addEventListener('click', (e) => { const tag = e.target.tagName.toLowerCase(); if (tag !== 'input' && tag !== 'button') { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); } }); // 5. Append Rows to TBODY tbody.appendChild(tr); tbody.appendChild(detailRow); // Append the detail row right after the main row }); } else { const tr = el('tr'); const tdName = el('td'); tdName.colSpan = 7; tdName.innerHTML = "No Products Found."; tr.appendChild(tdName); tbody.appendChild(tr); } table.appendChild(tbody); wrap.appendChild(table); } function renderInlineForCards() { const api = FAKE_API_RESPONSE; // Clear all inline sections first document.querySelectorAll('.attr-inline').forEach(div => div.innerHTML = ''); PRODUCT_BASE.forEach((p, idx) => { const inline = document.querySelector(`.attr-inline[data-pid="${p.item_id}"]`); if (!inline) return; // --- CHANGE HERE: Use the new helper function --- if (!isProductSelected(p.item_id)) return; // only show for selected const res = findApiResultForProduct(p, idx, api); const pid = p.item_id; if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map() }); const mem = lastSeen.get(pid); // Build sections const manTitle = el('div', 'section-title'); manTitle.innerHTML = 'Mandatory'; const manChips = el('div', 'chips'); const addTitle = el('div', 'section-title'); addTitle.innerHTML = 'Additional'; const addChips = el('div', 'chips'); const mandCount = renderChips(manChips, res?.mandatory || {}, mem.mandatory); const addCount = renderChips(addChips, res?.additional || {}, mem.additional); const counts = el('div'); counts.style.display = 'flex'; counts.style.gap = '8px'; counts.style.margin = '8px 0 0'; const c1 = el('span', 'pill'); c1.textContent = `Mandatory: ${mandCount}`; const c2 = el('span', 'pill'); c2.textContent = `Additional: ${addCount}`; counts.appendChild(c1); counts.appendChild(c2); inline.appendChild(manTitle); inline.appendChild(manChips); inline.appendChild(addTitle); inline.appendChild(addChips); inline.appendChild(counts); }); // Update summary $('#statTotal').textContent = api.total_products ?? 0; $('#statOk').textContent = api.successful ?? 0; $('#statKo').textContent = api.failed ?? 0; $('#api-summary').style.display = 'block'; } // ----------------------------------------------------------- function renderInlineForTable() { const api = FAKE_API_RESPONSE; const table = $('#tableContainer'); if (!table) return; // Remove existing detail rows table.querySelectorAll('tr.detail-row').forEach(r => r.remove()); PRODUCT_BASE.forEach((p, idx) => { // --- CHANGE HERE: Use the new helper function --- if (!isProductSelected(p.item_id)) return; const res = findApiResultForProduct(p, idx, api); const pid = p.item_id; if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map() }); const mem = lastSeen.get(pid); const tbody = table.querySelector('tbody'); // NOTE: The table rendering uses p.id for the row ID: `row-${p.id}`. // Assuming p.id is still valid for finding the base row, as your original code used it. const baseRow = tbody.querySelector(`#row-${p.id}`); if (!baseRow) return; const detail = el('tr', 'detail-row'); const td = el('td'); td.colSpan = 6; // number of columns const content = el('div', 'detail-content'); const manTitle = el('div', 'section-title'); manTitle.innerHTML = 'Mandatory'; const manChips = el('div', 'chips'); const addTitle = el('div', 'section-title'); addTitle.innerHTML = 'Additional'; const addChips = el('div', 'chips'); const mandCount = renderChips(manChips, res?.mandatory || {}, mem.mandatory); const addCount = renderChips(addChips, res?.additional || {}, mem.additional); const counts = el('div'); counts.style.display = 'flex'; counts.style.gap = '8px'; counts.style.margin = '8px 0 0'; const c1 = el('span', 'pill'); c1.textContent = `Mandatory: ${mandCount}`; const c2 = el('span', 'pill'); c2.textContent = `Additional: ${addCount}`; counts.appendChild(c1); counts.appendChild(c2); content.appendChild(manTitle); content.appendChild(manChips); content.appendChild(addTitle); content.appendChild(addChips); content.appendChild(counts); td.appendChild(content); detail.appendChild(td); // insert after base row baseRow.insertAdjacentElement('afterend', detail); }); // Update summary $('#statTotal').textContent = api.total_products ?? 0; $('#statOk').textContent = api.successful ?? 0; $('#statKo').textContent = api.failed ?? 0; } function renderInlineAttributes() { if (layoutMode === 'cards') renderInlineForCards(); else renderInlineForTable(); } // --- Main rendering --- function renderProducts() { if (layoutMode === 'cards') { $('#cardsContainer').style.display = ''; $('#tableContainer').style.display = 'none'; console.log("PRODUCT_BASE",PRODUCT_BASE); renderProductsCards(); } else { $('#cardsContainer').style.display = 'none'; $('#tableContainer').style.display = ''; renderProductsTable(); } updateSelectionInfo(); renderPagination(); // If there is a selection, re-render inline attributes (persist across toggle) if (selectedIds.size > 0) renderInlineAttributes(); } // --- Submit & Reset --- function submitAttributes() { // Check the length of the new array if (selectedProductsWithAttributes.length === 0) { alert('Please select at least one product.'); return; } // if (selectedIds.size === 0) { alert('Please select at least one product.'); return; } console.log("selectedIds",selectedIds); jQuery('#full-page-loader').show(); // let inputArray = { // "product_ids" : [...selectedIds] // } const extractAdditional = document.getElementById('extract_additional').checked; const processImage = document.getElementById('process_image').checked; // Transform the new state array into the required API format const itemIds = selectedProductsWithAttributes.map(p => p.item_id); // Create the mandatory_attrs map: { item_id: { attr_name: [values] } } // NOTE: The backend API you showed expects a flattened list of "mandatory_attrs" // like: { "color": ["color", "shade"], "size": ["size", "fit"] } // It seems to ignore the selected product-specific values and uses a general list of synonyms. // Assuming the request needs a general map of *all unique* selected attributes across all selected products: let mandatoryAttrsMap = {}; selectedProductsWithAttributes.forEach(product => { // Merge attributes from all selected products Object.assign(mandatoryAttrsMap, product.mandatory_attrs); }); // If the API expects the complex, product-specific payload from your Q1 example: const payloadForQ1 = selectedProductsWithAttributes.map(p => ({ item_id: p.item_id, mandatory_attrs: p.mandatory_attrs })); let inputArray = { "products": payloadForQ1, "model": "llama-3.1-8b-instant", "extract_additional": extractAdditional, "process_image": processImage } let raw = JSON.stringify(inputArray); fetch('/attr/batch-extract/', { method: 'POST', // or 'POST' if your API expects POST headers: { 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || '', 'Content-Type': "application/json" }, body: raw }) .then(response => response.json()) .then(data => { console.log("response data",data); FAKE_API_RESPONSE = data; renderInlineAttributes(); jQuery('#full-page-loader').hide(); }); } function resetAll() { selectedProductsWithAttributes = []; // Reset the main array // selectedIds.clear(); lastSeen.clear(); renderProducts(); // Clear summary document.getElementById('statTotal').textContent = '0'; document.getElementById('statOk').textContent = '0'; document.getElementById('statKo').textContent = '0'; $('#api-summary').style.display = 'none'; } function setLayout(mode) { layoutMode = mode; const btnCards = document.getElementById('btnCards'); const btnTable = document.getElementById('btnTable'); if (mode === 'cards') { btnCards.classList.add('active'); btnCards.setAttribute('aria-selected', 'true'); btnTable.classList.remove('active'); btnTable.setAttribute('aria-selected', 'false'); } else { btnTable.classList.add('active'); btnTable.setAttribute('aria-selected', 'true'); btnCards.classList.remove('active'); btnCards.setAttribute('aria-selected', 'false'); } renderProducts(); } // Upload elements (Bootstrap modal version) const uploadModalEl = document.getElementById('uploadModal'); const dropzone = document.getElementById('dropzone'); const uploadFiles = document.getElementById('uploadFiles'); const fileInfo = document.getElementById('fileInfo'); const uploadBar = document.getElementById('uploadBar'); const uploadStatus = document.getElementById('uploadStatus'); // Reset modal on show uploadModalEl.addEventListener('shown.bs.modal', () => { uploadStatus.textContent = ''; uploadStatus.className = ''; // clear success/error class uploadBar.style.width = '0%'; uploadBar.setAttribute('aria-valuenow', '0'); uploadFiles.value = ''; uploadFiles.setAttribute('accept', ACCEPT_TYPES); fileInfo.textContent = 'No files selected.'; }); function describeFiles(list) { if (!list || list.length === 0) { fileInfo.textContent = 'No files selected.'; return; } const names = Array.from(list).map(f => `${f.name} (${Math.round(f.size/1024)} KB)`); fileInfo.textContent = names.join(', '); } // Drag & drop feedback ['dragenter','dragover'].forEach(evt => { dropzone.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); dropzone.classList.add('drag'); }); }); ['dragleave','drop'].forEach(evt => { dropzone.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); dropzone.classList.remove('drag'); }); }); // Handle drop dropzone.addEventListener('drop', e => { uploadFiles.files = e.dataTransfer.files; describeFiles(uploadFiles.files); }); // Click to browse // dropzone.addEventListener('click', () => uploadFiles.click()); // Picker change uploadFiles.addEventListener('change', () => describeFiles(uploadFiles.files)); function startUpload() { const files = uploadFiles.files; if (!files || files.length === 0) { alert('Please select file(s) to upload.'); return; } jQuery('#full-page-loader').show(); uploadStatus.textContent = 'Uploading...'; uploadStatus.className = ''; // neutral uploadBar.style.width = '0%'; uploadBar.setAttribute('aria-valuenow', '0'); const form = new FormData(); Array.from(files).forEach(f => form.append('file', f)); // form.append('uploaded_by', 'Vishal'); // example extra field const xhr = new XMLHttpRequest(); xhr.open('POST', UPLOAD_API_URL, true); // If you need auth: // xhr.setRequestHeader('Authorization', 'Bearer