Develop Reference

PHP MySQL Multiple file upload with preview for all file types

I am trying to create a PHP file uploader with file preview before uploading. The script below works on multiple file upload for images only but would like to have an image icon for non-images with an image in the directory saying: "File preview not available."
// JavaScript Document
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
else{
$($.parseHTML('<img>')).attr('src', '/assets/img/no_preview.png');
$('.imagepreview').attr('src', '../img/no_preview.png');
}
}
};
$('#prescription-photo-add').on('change', function() {
imagesPreview(this, 'div.prescription');
});
});

You can first check the file extension first. Then display the image of the file if it is an image and display "File preview not available." otherwise
Codes can be found in this answer

Browser crashes when upload file with Angular

I am trying to upload files in JSON using angular and FileReader Api.
The problem is that for files larger than 600 - 700 KB my browser crashes.
As far as I can see the problem occurs when requesting against a resource and not when the file reader reads the file and encode that in base64
Any ideas?
Here is the code:
function readFiles(files) {
var reader = new FileReader();
var data = [];
function readFile(index) {
if (index >= files.length) {
UploadFilesResource.create(JSON.stringify(data), function (successData) {
scope.attachments = successData.data;
scope.showUploadForm = false;
}, function (errorData) {
MessageSrv.setErrorMessage(errorData.error_message)
});
return;
}
var file = files[index];
reader.onload = function(e) {
data.push(prepareFile(file, e.target.result));
readFile(index + 1)
};
reader.readAsDataURL(file);
}
readFile(0);
}
And here is the Resource Code:
crmApp.lazy.factory('UploadFilesResource',
['CrmAppResource', 'CrmAppConfiguration',
function ($resource, CrmAppConfiguration) {
return $resource(
CrmAppConfiguration.apiUrl + 'upload/files/:id',{id:'#id'}
);
}
]);

Thank you #Jeremy and #Jonas
That worked! The problem was JSON.stringify
So I removed that and now everything is OK with the browser!

How can I store a blob in a form and send it to the server when the clicks on submit without Ajax?

This is my function:
FileCropped.prototype.change = function () {
var obj = $(this).data("plugin.file-cropped");
var files = obj.$element[0].files;
var file;
var URL = window.URL || window.webkitURL;
var blobURL;
if (files && files.length) {
file = files[0];
console.log("I have files");
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
obj.$element.val('');
obj.$hidden[0].value = blobURL;
//URL.revokeObjectURL(blobURL);
} else {
window.alert('Please choose an image file.');
}
} else
{
console.log("No files?");
}
}
I am trying right now to attach the blob to an existing form input but it does not work. With the chrome debugger I see the method works fine and follow the expected path, but at the time of submit the server gets nothing.
Any hint?
Edit: of course the function has no value right now. I could just use the normal file input. The goal is to be able to manipulate the blob before attaching it to the form.

You can use FileReader to read the file as data URL
var fileReader = new FileReader();
fileReader.addEventListener('load', function () {
blobURL = fileReader.result;
obj.$hidden[0].value = blobURL;
});
fileReader.readAsDataURL(file);

How to check type of uploaded image through FileReader?

There is the following code which makes preview before uploading on the server:
$(function(){
var preview = $(".preview");
$("#menu_image").change(function(event){
var input = $(event.currentTarget);
var file = input[0].files[0];
var reader = new FileReader();
reader.onload = function(e){
var img = new Image;
img.onload = function() {
if ((img.with != 160) || (img.height != 160)) {
return;
}
preview.attr("src", img.src);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
});
But this code doesn't check file's type. How can I do it? Thanks in advance.

You don't need to load the FileReader to know file type.
Using your code:
var file = input[0].files[0];
is as easy as checking the file.type property.
You can check if the file is an image:
if (file.type.match('image.*')) {
console.log("is an image");
}
And which type of image is:
if (file.type.match('image.*')) {
console.log("is an image");
console.log("Show type of image: ", file.type.split("/")[1]);
}
Note that file.type.split("/")[1] should be an "image"

You can do something similar to check the file extension:
var extension = file.name.substring(file.name.lastIndexOf('.'));
// Only process image files.
var validFileType = ".jpg , .png , .bmp";
if (validFileType.toLowerCase().indexOf(extension) < 0) {
alert("please select valid file type. The supported file types are .jpg , .png , .bmp");
return false;
}

Try using the extension selector like this:
if($('img[src $= "jpg"]')) // if extension is jpg then dosomething
dosomething;

display image selected for uploading in Chrome and mozilla

In one of my web application I have to show the image which selected for uploading before it uploaded to the server , using javascript .
I had this code ... It is working pretty well and fine in Mozilla . But not in Safari or Chrome .. Please help
// Handle file while select a new file
$('#file').change(function(){
$('#img_size').val((this.files[0].size)/1000000);
handleFiles(this.files);
});
// handle files
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img=document.getElementById('fake_img');
img.src = file;
img.onload = function() {
};
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}

This code is working fine in chrome
http://jsfiddle.net/PrNWY/13/
Its shows the selected image in chrome & FF.
update
you can check file reader capability with following code
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
alert('The File APIs are fully supported in this browser.');
} else {
alert('The File APIs are not fully supported in this browser.');
}
In my safari it failed because of it is not supporting file API fully.