Single file upload

JavaScript
1

I found this very nice article from Craig Buckler. It is really working flawlessly. I have one question though. In the article it is used for multiple files. Fore a sudden page I would like to use it for just a single file. I took the multiple out of the input file and the brackets away after the file name, but I am still able to add more files. What hould I adjust in JS to actually restrict the upload to just one image.

Thank you in advance

2

HTML code:

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">

<fieldset>
<legend>HTML File Upload</legend>

<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />

<div>
	<label for="fileselect">Files to upload:</label>
	<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
	<div id="filedrag">or drop files here</div>
</div>

<div id="submitbutton">
	<button type="submit">Upload Files</button>
</div>

</fieldset>

</form>

<div id="messages">
<p>Status Messages</p>
</div>

CSS code:

#filedrag
{
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 1em 0;
	margin: 1em 0;
	color: #555;
	border: 2px dashed #555;
	border-radius: 7px;
	cursor: default;
}

#filedrag.hover
{
	color: #f00;
	border-color: #f00;
	border-style: solid;
	box-shadow: inset 0 3px 4px #888;
}

JS code:

var filesArray=new Array();

// getElementById
function $id(id) {
	return document.getElementById(id);
}

//
// output information
function Output(msg) {
	var m = $id("messages");
	m.innerHTML = msg + m.innerHTML;
}
///////////////////////////////
// call initialization file
if (window.File && window.FileList && window.FileReader) {
	Init();
}

//
// initialize
function Init() {

	var fileselect = $id("fileselect"),
		filedrag = $id("filedrag"),
		submitbutton = $id("submitbutton");

	// file select
	fileselect.addEventListener("change", FileSelectHandler, false);

	// is XHR2 available?
	var xhr = new XMLHttpRequest();
	if (xhr.upload) {
	
		// file drop
		filedrag.addEventListener("dragover", FileDragHover, false);
		filedrag.addEventListener("dragleave", FileDragHover, false);
		filedrag.addEventListener("drop", FileSelectHandler, false);
		filedrag.style.display = "block";
		
		// remove submit button
		submitbutton.style.display = "none";
	}

}

///////////////////////////////

// file drag hover
function FileDragHover(e) {
	e.stopPropagation();
	e.preventDefault();
	e.target.className = (e.type == "dragover" ? "hover" : "");
}
//////////////////////////////////////////

// file selection
function FileSelectHandler(e) {

	// cancel event and hover styling
	FileDragHover(e);

	// fetch FileList object
	var files = e.target.files || e.dataTransfer.files;
  filesArray.push(files[0]); 
  if(filesArray.length<=1){
  	// process all File objects
	for (var i = 0, f; f = files[i]; i++) {

 
		ParseFile(f);
   
	}
  }else{
  alert('You have excited the max number of upload files')
  }

}
//////////////////////////////////////////

function ParseFile(file) {

	Output(
		"<p>File information: <strong>" + file.name +
		"</strong> type: <strong>" + file.type +
		"</strong> size: <strong>" + file.size +
		"</strong> bytes</p>"
	);
	
}

JSFiddle sample here

1 Like
3

@liontas76 Very very nice, thank a lot

4

Thanks @liontas76. Your solution prevents anyone adding more than one file. @donboe, you should probably consider changing the UI once that happens, e.g. hide the upload form or whatever.

The only downside: a user can drag any number of files into their browser. The first received (probably a random one) will be chosen.

2 Likes
5

@liontas76 and @ceeb I have one last question regarding this gadget. I try to use jQuery AJAX to submit the form but for some reason the function:

$("#headerForm").on("submit", function(e) {
	$.ajax({
		url        : "/admin/media/add_photo",
		type       : "post",
		data       : new FormData( this ),
        processData: false,
        contentType: false,
		cache: false,
		success: function(data){
			// Success handling 
		},
		error: function(data){
			// Error handling  			
		}
	});
	e.preventDefault();
});

is not executed. Intead the form action is.

action="/admin/media/add_photo"

Could the order be the problem? I have the jQuery function placed underneath Craig Buckler’s drag script

6

Try with this:

$("#headerForm").on("submit", function(e) {
e.preventDefault();
	$.ajax({
		url        : "/admin/media/add_photo",
		type       : "post",
		data       : new FormData( this ),
        processData: false,
        contentType: false,
		cache: false,
		success: function(data){
			// Success handling 
		},
		error: function(data){
			// Error handling  			
		}
	});
	
});

Also check the url

7

@liontas76 That didn’t change anything? Not sure what is wrong with it. I even took the url out of the action, but without result

8

Is the data format an object?How do you trigger the php script?

9

@liontas76 I am not sure what you mean? I trigger PHP in the jQuery function:

url        : "/admin/media/add_gallery_photos",

if that is what you mean

10

Could you post an image the output of the console and network?(Developer tools F-12)

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.