Custom Transform Pipeline

Chain multiple file transformations using the transformPipeline option.

(function() {
 var logEl = document.getElementById('log');
 function log(m) { var d = document.createElement('div'); d.className='pkg-log-entry'; d.textContent=m; logEl.appendChild(d); logEl.scrollTop=logEl.scrollHeight; }
 new MultipleUpload('#demo', {
 uploadUrl: '/api/upload',
 multiple: true,
 accept: 'image/*',
 showThumbnails: true,
 transformPipeline: [
 function(file) {
 log('Step 1: Fixing orientation...');
 return MultipleUpload.fixOrientation(file);
 },
 function(file) {
 log('Step 2: Resizing to 1024px...');
 return MultipleUpload.resizeImage(file, 1024, 1024, 0.9);
 },
 function(file) {
 log('Step 3: Adding watermark...');
 return MultipleUpload.addWatermark(file, 'Demo', { fontSize: 24, position: 'bottom-right', color: 'rgba(255,255,255,0.5)' });
 }
 ]
 });
})();

Chaining your own transforms

transformPipeline defaults to null and accepts a function or an array of them. Each receives the file and returns a file, and they run in order before the upload starts, so you can insert steps of your own alongside the built-in resize, compress, rotate and watermark stages.

Every step delays the upload

The pipeline runs on the main thread's timeline, between selection and transfer, so the user is waiting through all of it with nothing visibly happening. Keep the steps cheap, return early when a file does not need them — a PDF should not go through an image transform — and show something while a slow step runs.

A transform that throws stops that file. Handle your own failures and decide whether the original should upload untransformed rather than not at all.