+ Better Mobile Compatibility + Intuitive Upload UI

This community thread discusses the feature or improvement: + Better Mobile Compatibility + Intuitive Upload UI.

Feature Details

What happens when people using mobile devices can't navigate your forums? What happens when people trying to attach files couldn't find the upload butto...

How APG vNext Handles Feature Requests

Feature requests and suggestions are tracked through the community forum. The development team reviews popular requests and incorporates the most-requested improvements into upcoming releases.

Vote for features by upvoting the original post in the forum thread
Add details about your use case to help prioritize the request
Check the release blog for updates on upcoming features

See the full feature set on the Features page or browse all community discussions.

Better Mobile Compatibility and Intuitive Upload UI in APG vNext

APG vNext's post editor and file upload interface underwent a major mobile overhaul in version 4.3. The previous upload UI relied on a Flash-based component that was entirely non-functional on iOS and Android. The replacement introduced a native HTML5 file input with drag-and-drop on desktop and a touch-optimised tap-to-select flow on mobile.

Key Mobile Upload Improvements

File picker now triggers the native iOS/Android file browser (camera roll + files app)
Multiple file selection supported on Android Chrome and iOS Safari 15+
Upload progress bar renders correctly at all viewport widths
Paste-from-clipboard image support on Chrome mobile (Android 12+)

Touch-Optimised Upload Button CSS

/* APG vNext skin — mobile-optimised upload trigger */
.apg-upload-trigger {
  display:     inline-flex;
  align-items: center;
  gap:         .5rem;
  min-height:  44px;  /* Apple HIG minimum touch target */
  min-width:   44px;
  padding:     .75rem 1.25rem;
  font-size:   1rem;
  border-radius: 8px;
  cursor:      pointer;
  touch-action: manipulation;
}
@media (max-width: 640px) {
  .apg-upload-trigger { width: 100%; justify-content: center; }
}

Enabling Camera Capture on Mobile

<!-- Allow direct camera capture on mobile devices -->
<input type="file"
       id="apg-upload-input"
       accept="image/*,video/*,.pdf,.docx"
       capture="environment"
       multiple />

The capture="environment" attribute opens the rear camera directly on mobile browsers. Remove it to allow both camera and file browser choice.

Responsive Rich Text Editor on Mobile

The post editor in APG vNext uses a customised version of the TinyMCE rich text editor. On mobile devices, the full toolbar is collapsed into a compact icon-only mode to fit the narrow viewport. Ensure your skin's TinyMCE configuration enables the mobile-optimised toolbar:

// APG vNext TinyMCE mobile config (in skin JS):
tinymce.init({
  selector: '#apg-post-editor',
  mobile: {
    theme: 'mobile',
    plugins: ['autosave', 'lists', 'autolink'],
    toolbar: ['undo','bold','italic','styleselect','link','unlink']
  },
  // Ensure paste from clipboard works on mobile Chrome:
  paste_data_images: true,
  images_upload_handler: apgUploadHandler
});

Disable Rich Editor for Low-Power Devices

On very low-end Android devices, the rich text editor can cause lag. APG vNext supports falling back to a plain textarea on such devices:

<add key="APG.Editor.FallbackOnSlowDevices" value="true" />
<!-- APG vNext detects low hardware concurrency (navigator.hardwareConcurrency < 2)
     and switches to the plain textarea editor automatically -->

Upload Progress and Feedback on Mobile

Mobile connections are often slower and less reliable than desktop connections. APG vNext's upload UI provides real-time feedback to prevent members from abandoning uploads that are in progress:

Per-file progress bars with percentage and estimated time remaining
Pause and resume support for large file uploads on mobile
Automatic retry on connection drop (up to 3 attempts)
Toast notification on successful upload completion

Configuring Upload Retry Behaviour

<add key="APG.Upload.RetryAttempts"     value="3" />
<add key="APG.Upload.RetryDelaySeconds" value="2" />
<!-- Exponential backoff: 2s, 4s, 8s between retries -->

Testing Mobile Upload on a Real Device

Browser DevTools device emulation does not accurately replicate mobile upload behaviour — especially for camera capture and file picker interactions. Test on a physical iOS device (Safari) and an Android device (Chrome) to verify that the upload button, progress bar, and completion notification work as expected on your specific APG vNext skin and configuration.

Managing Mobile Upload Queue Size

Mobile connections drop frequently. APG vNext processes uploads in a queue that persists upload intent even when the connection drops temporarily. Configure the queue size to balance server memory with the number of concurrent mobile uploads your community handles:

<add key="APG.Upload.QueueSize"           value="50" />
<add key="APG.Upload.ChunkSizeKB"         value="512" />
<!-- 512KB chunks work well on 4G connections -->
<add key="APG.Upload.MaxConcurrent"       value="3" />
<!-- Per-member concurrent upload limit -->

Handling Interrupted Uploads

When a mobile upload is interrupted (network drop, screen lock, browser tab switch), APG vNext stores the partial upload state for up to 24 hours. Members returning to the post editor will see a prompt to resume the interrupted upload, rather than having to start over — a critical UX improvement for members on unstable mobile connections.

Accessibility of the Upload Interface

The upload interface must be accessible via keyboard and screen readers. APG vNext's upload button uses a visually-hidden native file input beneath a styled button, ensuring compatibility with assistive technologies while maintaining a custom appearance. Avoid replacing the native file input entirely with a custom element, as this breaks screen reader support on many mobile browsers.

Related Resources

Managing Mobile Upload Queue Size

<add key="APG.Upload.QueueSize"           value="50" />
<add key="APG.Upload.ChunkSizeKB"         value="512" />
<!-- 512KB chunks work well on 4G connections -->
<add key="APG.Upload.MaxConcurrent"       value="3" />
<!-- Per-member concurrent upload limit -->

Handling Interrupted Uploads

Accessibility of the Upload Interface

Looking for more help? Browse the support forum or check the Knowledge Base.