Html 5 drag and drop file uploads fallback

[andrew_biggart]

Apologies in advance, but I didn't know if I should post this issue in the PHP or Javascript section.

 

http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/

 

I am currently using the above tutorial and trying to create a fallback feature for the bane of my life I.E.

 

In the tutorial the author mentions that the php file included can be used to also accept uploads from a simple file input, which is what I'm trying to achieve.

 

Can anyone point me in the right direction to create a fallback form when html 5 uploading is not available?

 

Thanks.

[xyph]

http://stackoverflow.com/questions/2856262/detecting-html5-drag-and-drop-support-in-javascript

[andrew_biggart]

Detecting if it is supported isn't the issue as such. I would like to be able to display a form and regular file input instead of the your browser doesn't support html 5 uploads error message.

 

I have got this working by adding changing a few things as you will see below. :

 

$(function(){

var dropbox = $('#dropbox'),
	message = $('.message', dropbox);

dropbox.filedrop({
	// The name of the $_FILES entry:
	paramname:'pic',

	maxfiles: 10,
    	maxfilesize: 2,
	url: 'media-upload-save.php',

	uploadFinished:function(i,file,response){
		$.data(file).addClass('done');
		// response is the JSON object that post_file.php returns
	},

    	error: function(err, file) {
		switch(err) {
			case 'BrowserNotSupported':
				showForm('<span class="message">Your browser does not support drag and drop uploads!</span><form method="post"><input type="file" name="pic" id="pic" /><input type="submit" value="Upload" /></form>');
				break;
			case 'TooManyFiles':
				alert('Too many files! Please select 5 at most!');
				break;
			case 'FileTooLarge':
				alert(file.name+' is too large! Please upload files up to 2mb.');
				break;
			default:
				break;
		}
	},

	// Called before each upload is started
	beforeEach: function(file){
		if(!file.type.match(/^image\//) && !file.type.match(/^application\//)){
			alert('Only images and pdfs are allowed!');

			// Returning false will cause the
			// file to be rejected
			return false;
		}
	},

	uploadStarted:function(i, file, len){
		createImage(file);
	},

	progressUpdated: function(i, file, progress) {
		$.data(file).find('.progress').width(progress);
	}
    	 
});

var template = '<div class="preview">'+
					'<span class="imageHolder">'+
						'<img />'+
						'<span class="uploaded"></span>'+
					'</span>'+
					'<div class="progressHolder">'+
						'<div class="progress"></div>'+
					'</div>'+
				'</div>'; 


function createImage(file){

	var preview = $(template), 
		image = $('img', preview);

	var reader = new FileReader();

	image.width = 100;
	image.height = 100;

	reader.onload = function(e){

		// e.target.result holds the DataURL which
		// can be used as a source of the image:
		if (file.type == "application/pdf"){
			image.attr('src','images/pdf.png');
		}
		else {
			image.attr('src',e.target.result);
		}
	};

	// Reading the file as a DataURL. When finished,
	// this will trigger the onload function above:
	reader.readAsDataURL(file);

	message.hide();
	preview.appendTo(dropbox);

	// Associating a preview container
	// with the file, using jQuery's $.data():

	$.data(file,preview);
}

function showMessage(msg){
	message.html(msg);
}

function showForm(html){
	dropbox.html(html);
}

});

 

However I struggling to figure out how to trigger the same process the drag and drop uploads have, but when ever the standard form is submitted.

[andrew_biggart]

Someone has already tried to explain including a fallback, however I'm struggling to make sense of it, and it seems like some of the code is missing.

 

http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/#comment-21395

[andrew_biggart]

Ok I have made a few modifications to the tutorial code.

 

The firs one being that I changed the html around abit to as follows:

 

<div id="dropbox">
    <span class="not-dropable"><form method="post" action="media-upload-save.php" enctype="multipart/form-data" multiple=""><input type="file" id="pic" name="pic[]" multiple><input type="submit" value="Upload" /></form><br />Select a file to upload.</span>
    <span class="dropable">Drop images here to upload.<br /> <i>(You can drop up to 5 images at any one time. With a maximum filesize of 2MB)</i></span>
</div><!-- / dropbox -->

 

and then secondarily I added a check in the javascript to decide which part of html to show, depending on wether the users browser support drag and drop file uploads.

 

if('draggable' in document.createElement('span')) {
	$(".not-dropable").hide();
	$(".dropable").show();
}
else {
	$(".dropable").hide();
	$(".not-dropable").show();
}

 

So how would I go about using the same php file with the standard file upload input? Every time I try and send the data to the php file normally I get the following error from the php file. From what I can gather it's not liking the method I am sending the data to the file. Do I have to use javascript to send both forms?

 

(Something went wrong with your upload!)