File Manager

Editing: addproduct.php

<!DOCTYPE html>
<html lang="en">
<head>
    
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z6RR2PMZW4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

gtag('config', 'G-Z6RR2PMZW4');
</script>

/* Hide scrollbar in Chrome/Safari */
  #preview::-webkit-scrollbar {
  display: none;
}
 
/* Modal Style */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Transparent background */
    justify-content: center;
    align-items: center;
}

/* Modal Content */
.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Progress Bar */
#progressBarContainer {
    width: 100%;
    background: #f3f3f3;
    height: 20px;
    margin-top: 20px;
}

#progressBar {
    width: 0;
    background: green;
    height: 100%;
    text-align: center;
    color: white;
    line-height: 20px;
}

.phone-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phone-input select,
.phone-input input {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.phone-input select {
    width: 150px;
}

.phone-input input {
    flex: 1;
}

</style>

</head>
<body>
 
     <?php include 'header.php'; ?>
     
    <br><br><br>
     <form class="sellform" action="/processproduct" method="POST" enctype="multipart/form-data">
    <h2>Sell on Eizon</h2>
    
    <label for="images">Product Images (3) Images:</label>
    <input type="file" id="images" name="images[]" accept="image/*" multiple required style="background-color:white;padding:5px;color:black;">
    <div id="preview"></div>

<label for="name">Product Name:</label>
    <input type="text" id="name" name="name" placeholder="Eg: SAA YA MKONONI" required>

<label for="description">Short Description:</label>
    <textarea id="description" name="description" rows="4" placeholder="Eg: BRAND: LOREX, saa kali sana" required></textarea>

<label for="state">Condition:</label>
    <select id="state" name="state" required>
        <option class="option" value="" disabled selected>Condition</option>
        <option class="option" value="NEW">NEW</option>
        <option class="option" value="REFURBISHED">REFURBISHED</option>
        <option class="option" value="USED">USED</option>
    </select>

<label for="region">Location:</label>
    <input type="text" id="region" name="region" placeholder="Eg: ARUSHA" required>

<label for="price">Price (TZS):</label>
    <input type="number" id="price" name="price" min="0" placeholder="Eg: 15000" required>
  
    <label for="contact">WhatsApp number:</label>
        <div class="phone-input">
            <select id="country-code" name="country_code" required style="width:40%;">
                <option value="+255" selected>Tz (+255)</option>
                <option value="+254">Keny (+254)</option>
                <option value="+256">Uga (+256)</option>
                <option value="+250">Rwnd (+250)</option>
                <option value="+1">USA (+1)</option>
                <option value="+44">UK (+44)</option>
            </select>
            <input type="tel" id="contact" name="contacts" placeholder="711***675" required pattern="[0-9]{6,15}" style="width:40%;">
        </div><br>

<label for="category">Category:</label>
    <select id="category" name="category" required>
        <option class="option" value="" disabled selected>Select a category</option>
        <option class="option" value="Electronics">Electronics</option>
        <option class="option" value="Fashion and Beauty">Fashion & Beauty</option>
        <option class="option" value="Home Accessories">Home Accessories</option>
        <option class="option" value="Decorations">Decorations</option>
        <option class="option" value="Food and Nutrition">Food & Nutrition</option>
        <option class="option" value="transport">Transport</option>
        <option class="option" value="Services">Services</option>
        <option class="option" value="Other">Other</option>
    </select>

<button type="submit">Add Product</button>
</form>

<div id="addProductModal" class="modal">
    <div class="modal-content">
        <p>Adding your product, please wait...</p>
        
        <div id="progressBarContainer" style="width: 100%; background: #ddd; height: 20px; margin-top: 10px;">
            <div id="progressBar" style="height: 100%; width: 0; background: green;"></div>
        </div>
        <p>Create Account to share your products on WhatsApp!</p>
    </div>
</div>
    <br><br>
    
     
     <?php include 'footer.php'; ?>
     
   
    <script src="e-commerce.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>
<script>
    const input = document.getElementById('images'); // Image input
    const preview = document.getElementById('preview'); // Image preview container
    let processedFiles = []; // To store compressed and converted files

input.addEventListener('change', function (event) {
        const files = Array.from(event.target.files); // Get selected files
        processedFiles = []; // Reset processed files
        preview.innerHTML = ""; // Clear previous previews

// Check if more than 3 images are selected
        if (files.length < 3) {
            alert("Please upload 3 images of your product.");
            input.value = ""; // Clear input
            return;
        }
         if (files.length > 3) {
            alert("Please upload only 3 images of your product.");
            input.value = ""; // Clear input
            return;
        }

files.forEach((file, index) => {
            // Compress and convert each file
            new Compressor(file, {
                quality: 0.6, // Adjust compression quality (0 to 1)
                convertTypes: ['image/jpeg'], // Convert to JPEG
                convertSize: 0, // Convert regardless of the original file size
                success(compressedFile) {
                    processedFiles.push(compressedFile);

// Create and display thumbnail preview
                    const img = document.createElement('img');
                    img.src = URL.createObjectURL(compressedFile);
                    img.alt = `Image ${index + 1}`;
                    img.style.maxWidth = "100px";
                    img.style.margin = "5px";
                    preview.appendChild(img);

// Replace the original file input with processed files once all are done
                    if (processedFiles.length === files.length) {
                        const dataTransfer = new DataTransfer();
                        processedFiles.forEach(file => dataTransfer.items.add(file));
                        input.files = dataTransfer.files;
                    }
                },
                error(err) {
                    console.error("Compression or conversion failed:", err.message);
                },
            });
        });
    });
</script>

// Regular expression to allow only digits with a length between 6 and 15
    const phoneRegex = /^[0-9]{6,15}$/;

if (!phoneRegex.test(phoneNumber)) {
        contactError.style.display = "block";
        contactError.textContent = "Please enter a valid phone number (digits only, 6-15 characters).";
        e.preventDefault(); // Prevent form submission if invalid
        return;
    } else {
        contactError.style.display = "none"; // Hide error if validation passes
    }

// Create a hidden input for the full phone number
    const fullNumber = `${countryCode}${phoneNumber}`;
    const hiddenInput = document.createElement("input");
    hiddenInput.type = "hidden";
    hiddenInput.name = "full_contact";
    hiddenInput.value = fullNumber;
    this.appendChild(hiddenInput);
});

// Handle form submission with progress bar and AJAX
const addProductForm = document.querySelector('.sellform');
const addProductModal = document.getElementById('addProductModal');
const progressBar = document.getElementById('progressBar');
const progressBarContainer = document.getElementById('progressBarContainer');

addProductForm.addEventListener('submit', function (event) {
    event.preventDefault(); // Prevent normal form submission

// Show modal with progress bar
    addProductModal.style.display = 'flex';
    progressBar.style.width = '0%';
    progressBar.textContent = '0%';

let progress = 0;
    const simulateProgressInterval = setInterval(() => {
        progress += 5; // Simulated progress
        progressBar.style.width = `${progress}%`;
        progressBar.textContent = `${progress}%`;

if (progress >= 99) {
            clearInterval(simulateProgressInterval); // Stop simulation when done
        }
    }, 500);

// Prepare form data for AJAX
    const formData = new FormData(addProductForm);

// Perform AJAX request
    const xhr = new XMLHttpRequest();
    xhr.open('POST', addProductForm.action, true);

// Update progress bar during upload
    xhr.upload.addEventListener('progress', (e) => {
        if (e.lengthComputable) {
            const percentage = (e.loaded / e.total) * 100;
            progressBar.style.width = `${percentage}%`;
            progressBar.textContent = `${Math.round(percentage)}%`;
        }
    });

// Handle AJAX response
    xhr.onload = function () {
        if (xhr.status === 200) {
            // Success response
            setTimeout(() => {
                addProductModal.style.display = 'none'; // Hide modal
                alert('Product added successfully!\n It is much easier with an ACCOUNT!');
                window.location.href = '/home'; // Redirect to all products page
            }, 500); // Short delay before redirect
        } else {
            // Error handling
            alert('Error adding product. Please try again.');
            addProductModal.style.display = 'none';
        }
    };

// Send form data
    xhr.send(formData);
});

</script>
 
 
</body>
</html>

⬅ Back