Developer Guide: Multi-Image Upload with Camera Support in Merciglobal Cloud ERP

Merciglobal Cloud ERP allows developers to implement image upload functionality with support for camera input and multiple file selections. This guide walks you through the integration of the feature.

---

1. HTML Setup

Add a container where the image input should appear:

<div class="col-12 newimage mb-5" style="text-align:center;"></div>

---

2. JavaScript Initialization

Create the image input component with support for multiple files and camera:

u.input.create({
  selector: '.newimage',
  type: 'file',
  multiple: true,
  accept: 'image/*;capture=camera',
  inputFileLimit: 250
});

let html = `<button type="button" class="btn btn-outline-dark btn-sm savebtn" onclick="updateItemImg()" style="margin-top:8px;">Update Image</button>`;
$('.newimage').append(html);

---

3. JavaScript Upload Function

Handles the upload logic including base64 resizing and AJAX submission:

function updateItemImg() {
  let desc = $('#desc').val();
  let images = u.input.getFiles('.newimage');

  if (images.length === 0) {
    showerr('No Image Selected/Uploaded');
    return;
  }

  if (!confirm('Upload Images?')) return;

  u.alert.showLoader({
    msg: "Saving...",
    animationUrl: "/apis/js/lottieFiles/loader.json",
    backgroundColor: "#FFA000"
  });

  for (let z = 0; z < images.length; z++) {
    images[z] = resizeBase64Image(images[z]);
  }

  $('.savebtn').hide();

  $.ajax({
    type: 'POST',
    url: '/{project}/{project}.php',
    async: true,
    data: ({ func: 'uploadMyImages', desc, images }),
    cache: false,
    success: function(data) {
      u.alert.hideLoader();
      let { result, reason, rows } = JSON.parse(data);
      if (result === "success") {
        // Handle success if needed
      } else {
        $('.savebtn').show();
        showerr(reason);
      }
    }
  });
}

---

4. PHP Backend Script

Processes the uploaded images and stores them in the file system:

$func = $_POST['func'];

if ($func == 'uploadMyImages') {
  $images = $_POST['images'];

  for ($z = 0; $z < getSize($images); $z++) {
    $ctr = $z + 1;
    $file = "/images/{table}_{$newsr}_$ctr";
    $file = '/images/' . basename(base64_to_file($images[$z], rootPath() . homeFolder() . $file));

    // Store $file in database as needed
  }
}

---

5. Developer Notes

• Supports camera and file uploads (accept: image/*;capture=camera)
• Limit of 250 images per session
• Files are base64 encoded and must be resized before upload
• Ensure resizeBase64Image() function is implemented client-side

---

For questions or assistance, contact your Merciglobal technical lead.

---

#MerciglobalCloudERP #DevGuide #ImageUploadIntegration