Product: FILE uploads

This commit is contained in:
Thanakorn S
2026-04-21 11:31:51 +07:00
parent 3b8f94f011
commit 8834d672ba
7 changed files with 138 additions and 40 deletions
+50 -13
View File
@@ -48,22 +48,34 @@
<input type="number" class="form-control" id="min_stock" placeholder="0" required>
</div>
</div>
<div class="mb-3">
<label for="category" class="form-label">Category</label>
<select class="form-select" id="category" required> </select>
</div>
<div class="mb-3">
<label for="product_image" class="form-label">Product Image</label>
<input type="file" class="form-control" id="product_image" accept="image/*">
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="category" class="form-label">Category</label>
<select class="form-select" id="category" required> </select>
</div>
<div class="col-md-6 mb-3">
<!-- Remove d-none from file input so it shows by default -->
<div class="mb-3">
<label class="form-label">Product Image</label>
<div id="current_image_display" class="d-none">
<div class="d-flex align-items-center gap-2">
<div class='input-group'>
<span class='btn btn-outline-secondary' type='button' id='change_image_btn'>Change</span>
<input type='text' class='form-control' id='current_file_label' disabled>
</div>
</div>
</div>
<input type="file" class="form-control" id="product_image" accept="image/*">
</div>
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea class="form-control" id="description" rows="4"
placeholder="Enter product description"></textarea>
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary" onclick="add_product();">Create</button>
<button type="submit" class="btn btn-primary" onclick="manage_product();">Create</button>
</div>
</div>
</div>
@@ -81,13 +93,24 @@
<?php require "../include_ending.php";?>
<script>
function add_product() {
function manage_product() {
let formData = new FormData();
// Append the file (single image, not array)
let imageFile = $('#product_image')[0].files[0];
if (imageFile) {
formData.append('product_image', imageFile);
}
formData.append('keep_files', $('#current_file_label').val())
return ajax_request({
url: "<?php echo $server_url?>inventory/api/engine/manage_product.php",
autoPrepare: true,
checkRequired: 0,
debugMode: 0,
debugMode: 1,
formData: formData,
action: 'manage',
onSuccess: function(res) {
@@ -133,7 +156,21 @@
onSuccess: function(res) {
$.each(res.output, function(key, item) {
$(`#${key}`).val(item);
let el = $(`#${key}`);
if (el.attr('type') === 'file') return; // skip file inputs
el.val(item);
});
// Handle image field
if (res.output.product_image) {
$('#current_file_label').val(res.output.product_image);
$('#current_image_display').removeClass('d-none'); // show filename + change btn
$('#product_image').addClass('d-none'); // hide file input
}
$('#change_image_btn').on('click', function() {
$('#current_image_display').addClass('d-none');
$('#product_image').removeClass('d-none');
});
$(`button[type=submit]`).text('Update');