Skip to content
This repository was archived by the owner on May 25, 2023. It is now read-only.

Commit fb26b51

Browse files
pablotoledompablotoledom
committed
Added Support to Heic/Heif Image converter on add funcion.
1 parent 0e92a4d commit fb26b51

File tree

4 files changed

+137
-51
lines changed

4 files changed

+137
-51
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@
7878
- **Compatible with any server-side application platform:**
7979
Works with any server-side platform (PHP, Python, Ruby on Rails, Java,
8080
Node.js, Go etc.) that supports standard HTML form file uploads.
81+
- **Automatic image conversion in Heif, Heic format.**
82+
When adding images, these will be intercepted in the add and converted to JPEG.
8183

8284
## Security
8385

‎index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -347,6 +347,8 @@ <h3 class="title"></h3>
347347
<script src="js/jquery.fileupload-validate.js"></script>
348348
<!-- The File Upload user interface plugin -->
349349
<script src="js/jquery.fileupload-ui.js"></script>
350+
<!-- Convert heic to jpeg utility -->
351+
<script src="js/vendor/heic2any.min.js"></script>
350352
<!-- The main application script -->
351353
<script src="js/demo.js"></script>
352354
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->

‎js/jquery.fileupload-ui.js

Lines changed: 132 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -93,55 +93,136 @@
9393
// widget (via file input selection, drag & drop or add API call).
9494
// See the basic file upload widget for more information:
9595
add: function (e, data) {
96-
if (e.isDefaultPrevented()) {
97-
return false;
98-
}
96+
// console.log('add: XXXXXXX', e, data);
9997
var $this = $(this),
10098
that = $this.data('blueimp-fileupload') || $this.data('fileupload'),
10199
options = that.options;
102-
data.context = that
103-
._renderUpload(data.files)
104-
.data('data', data)
105-
.addClass('processing');
106-
options.filesContainer[options.prependFiles ? 'prepend' : 'append'](
107-
data.context
108-
);
109-
that._forceReflow(data.context);
110-
that._transition(data.context);
111-
data
112-
.process(function () {
113-
return $this.fileupload('process', data);
114-
})
115-
.always(function () {
116-
data.context
117-
.each(function (index) {
118-
$(this)
119-
.find('.size')
120-
.text(that._formatFileSize(data.files[index].size));
121-
})
122-
.removeClass('processing');
123-
that._renderPreviews(data);
124-
})
125-
.done(function () {
126-
data.context.find('.edit,.start').prop('disabled', false);
127-
if (
128-
that._trigger('added', e, data) !== false &&
129-
(options.autoUpload || data.autoUpload) &&
130-
data.autoUpload !== false
131-
) {
132-
data.submit();
133-
}
134-
})
135-
.fail(function () {
136-
if (data.files.error) {
137-
data.context.each(function (index) {
138-
var error = data.files[index].error;
139-
if (error) {
140-
$(this).find('.error').text(error);
141-
}
100+
101+
const blobx = data.files[0];
102+
const fileReader = new FileReader();
103+
fileReader.onloadend = function (e) {
104+
const arr = new Uint8Array(e.target.result).subarray(0, 4);
105+
let header = '';
106+
let type = '';
107+
108+
for (var i = 0; i < arr.length; i++) {
109+
header += arr[i].toString(16);
110+
}
111+
112+
switch (header) {
113+
case '89504e47':
114+
type = 'image/png';
115+
break;
116+
case '47494638':
117+
type = 'image/gif';
118+
break;
119+
case 'ffd8ffe0':
120+
case 'ffd8ffe1':
121+
case 'ffd8ffe2':
122+
case 'ffd8ffe3':
123+
case 'ffd8ffe8':
124+
type = 'image/jpeg';
125+
break;
126+
case '00018':
127+
type = 'image/heif';
128+
break;
129+
default:
130+
type = 'unknown'; // Or you can use the blob.type as fallback
131+
break;
132+
}
133+
134+
// console.log(header, type);
135+
136+
if (type !== 'unknown') {
137+
if (type === 'image/heic' || type === 'image/heif') {
138+
const originalName = data.files[0].name;
139+
140+
heic2any({
141+
blob: data.files[0],
142+
toType: 'image/jpeg',
143+
quality: 0.5, // cuts the quality and size by half
144+
}).then((conversionResultBlob) => {
145+
// conversionResult is a BLOB
146+
// of the JPEG formatted image
147+
// with low quality
148+
data.files[0] = new File(
149+
[conversionResultBlob],
150+
originalName
151+
.replace('.heic', '.jpg')
152+
.replace('.heif', '.jpg'),
153+
{
154+
type: conversionResultBlob.type,
155+
}
156+
);
157+
// console.log('Converted to jpeg:', data.files[0]);
158+
// data.submit();
159+
160+
addContinues(data);
142161
});
162+
} else if (
163+
type === 'image/jpeg' ||
164+
type === 'image/gif' ||
165+
type === 'image/png'
166+
) {
167+
addContinues(data);
168+
} else {
169+
console.log('Aborted');
170+
data.abort();
143171
}
144-
});
172+
}
173+
};
174+
175+
fileReader.readAsArrayBuffer(blobx);
176+
177+
function addContinues() {
178+
if (e.isDefaultPrevented()) {
179+
return false;
180+
}
181+
182+
data.context = that
183+
._renderUpload(data.files)
184+
.data('data', data)
185+
.addClass('processing');
186+
options.filesContainer[options.prependFiles ? 'prepend' : 'append'](
187+
data.context
188+
);
189+
that._forceReflow(data.context);
190+
that._transition(data.context);
191+
data
192+
.process(function () {
193+
return $this.fileupload('process', data);
194+
})
195+
.always(function () {
196+
data.context
197+
.each(function (index) {
198+
$(this)
199+
.find('.size')
200+
.text(that._formatFileSize(data.files[index].size));
201+
})
202+
.removeClass('processing');
203+
that._renderPreviews(data);
204+
})
205+
.done(function () {
206+
data.context.find('.edit,.start').prop('disabled', false);
207+
if (
208+
that._trigger('added', e, data) !== false &&
209+
(options.autoUpload || data.autoUpload) &&
210+
data.autoUpload !== false
211+
) {
212+
data.submit();
213+
}
214+
})
215+
.fail(function () {
216+
if (data.files.error) {
217+
data.context.each(function (index) {
218+
var error = data.files[index].error;
219+
if (error) {
220+
$(this).find('.error').text(error);
221+
}
222+
});
223+
}
224+
});
225+
}
145226
},
146227
// Callback for the start of each file upload request:
147228
send: function (e, data) {
@@ -338,13 +419,13 @@
338419
that
339420
._transition($(this).find('.fileupload-progress'))
340421
.done(function () {
341-
$(this)
342-
.find('.progress')
343-
.attr('aria-valuenow', '0')
344-
.children()
345-
.first()
346-
.css('width', '0%');
347-
$(this).find('.progress-extended').html('&nbsp;');
422+
// $(this)
423+
// .find('.progress')
424+
// .attr('aria-valuenow', '0')
425+
// .children()
426+
// .first()
427+
// .css('width', '0%');
428+
// $(this).find('.progress-extended').html('&nbsp;');
348429
deferred.resolve();
349430
});
350431
},

‎js/vendor/heic2any.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)