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

Merciglobal Cloud ERP enables developers to incorporate a feature-rich image upload mechanism, complete with support for multiple file selections and direct camera input. This guide outlines the complete implementation process, from frontend setup to backend processing.

---

1. HTML Setup

Prepare a container element where the image input field will be rendered:

<div class="newimage"></div>

---

2. JavaScript Initialization

Dynamically create the image input component that supports both multiple image selection and camera capture:

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

let html = `Update Image`;
$('.newimage').append(html);

---

3. JavaScript Upload Function

Implement the logic to handle image uploads, including optional resizing and sending data via AJAX:

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 actions
      } else {
        $('.savebtn').show();
        showerr(reason);
      }
    }
  });
}

---

4. PHP Backend Script

Process and store uploaded images on the server using the PHP backend:

$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 path in the database as needed
  }
}

---

Developer Notes

• Supports both file and camera uploads using: accept: image/*;capture=camera
• Allows a maximum of 250 images per session
• Images must be base64 encoded and resized using resizeBase64Image() before upload
• Ensure the resizeBase64Image() utility is properly implemented on the client side

---

For assistance or further customization, please contact your Merciglobal technical lead.

---

#MerciglobalCloudERP #DeveloperGuide #ImageUploadIntegration #MultipleImageUpload #CameraSupport