I have been trying to implement various logics found on the internet. But the issue is that if I change the extension of any file it shows Okay. My code is as below:
'use strict';
$("#myfiles").on('change',function(){
var files = $('#myfiles').get(0).files;
if (files.length > 0) {
var file = files[0];
var fileReader = new FileReader();
fileReader.onloadend = function (e) {
var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
var header = '';
for (var i = 0; i < arr.length; i++) {
header += arr[i].toString(16);
}
alert(header);
var type = 'unknown';
switch (header) {
case '89504e47':
type = 'image/png';
break;
case '47494638':
type = 'image/gif';
break;
case 'ffd8ffe0':
case 'ffd8ffe1':
case 'ffd8ffe2':
type = 'image/jpeg';
break;
case '25504446':
type = 'application/pdf';
break;
}
//if(type=='image/jpeg') { alert('Its JPEG/JPG'); } else { alert('Its Not'); }
//alert(type);
if (type!=='image/png' && type!=='image/gif' && type!=='image/jpeg' && type!=='application/pdf' ) {
alert("File Type Not Allowed");
} else {
$('#myfile_mydrive').fileupload({
downloadTemplateId: 'template-download-gallery',
uploadTemplateId: 'template-upload-gallery',
paramName: 'files[]',
url: 'mydrive-upload.php',
dataType: 'json',
autoUpload: true,
maxNumberOfFiles: 10,
acceptFileTypes: /(\.|\/)(pdf|doc|docx|xls|ppt|zip|gif|jpe?g|png)$/i
});
}
};
fileReader.readAsArrayBuffer(file);
}
});
So I implemented the code above. But it shows okay for once or twice then it uploads the file even after showing that file type is not supported.
Atlast found the work around. If anybody needs for mime check in blueimp jquery upload
$('#myfile_mydrive').fileupload({
add: function(e, data) {
var uploadErrors = [];
var control = document.getElementById("myfiles");
control.addEventListener("change", function(event) {
var files = event.target.files[0];
for (var i = 0; i < files.length; i++) {
console.log("Filename: " + files[i].name);
console.log("Type: " + files[i].type);
console.log("Size: " + files[i].size + " bytes");
}
}, false);
var files = event.target.files[0];
var fileReader = new FileReader();
fileReader.onload = function(e) {
var int32View = new Uint8Array(e.target.result);
var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
var header = "";
for(var i = 0; i < arr.length; i++) {
header += arr[i].toString(16);
}
if(header!=='89504e47' && header!=='47494638' && header!=='ffd8ffe0' && header!=='ffd8ffe1' && header!=='ffd8ffe2' && header!=='25504446') { // Check for jpg/jpeg/png/gif/pdf
alert("File Type Mismatch");
return;
} else {
data.submit();
}
};
fileReader.readAsArrayBuffer(files);
},
downloadTemplateId: 'template-download-gallery',
uploadTemplateId: 'template-upload-gallery',
paramName: 'files[]',
url: 'mydrive-upload.php',
dataType: 'json',
autoUpload: false,
maxNumberOfFiles: 10,
acceptFileTypes: /(\.|\/)(pdf|gif|jpe?g|png)$/i,
});
The HTML part of my code
<div id="myfile_mydrive" class="fileupload">
<div class="fileinput-button btn btn-success btn-sm">
<i class="fa fa-paperclip"></i>
<span>Browser Files </span >
<input type="file" id="myfiles" name="myfiles">
</div>
<table role="presentation" class="table table-striped">
<tbody class="files"></tbody>
</table>
</div>
As you can see the issue I faced earlier was:-
Therefore, you may see the workaround is 'add' function under the 'fileupload'
Hope that clarifies any doubt about the solution.