Jump to content

String replacement of file.name


Recommended Posts



I am barely literate in JavaScript, but I have done my best to try figuring this out on my own. 


I am playing with a Drag & Drop uploading script for HTML 5 that i found here: http://www.sitepoint.com/html5-file-drag-and-drop/


I have been able to get the script 95% set up to allow uploads, but it has a problem parsing when it comes to dealing with white space.  If an uploaded file has spaces in the name, the name output stops at the first whitespace.


As I said above, i have gone through many blogs and posts in the past several hours trying to figure the best way to do a string replace, but my ignorance of JS limits me on how to find the proper place for this.  However, I think it has to belong in here:

		// Output link
		"<div class='link'><a href=links/[QuickSeed]" + file.name +">" + file.name + "</a></div>" 


filedrag.js - HTML5 File Drag & Drop demonstration
Featured on SitePoint.com
Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
(function() {

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

// output information
function Output(msg) {
	var m = $id("messages");
	m.innerHTML = msg + m.innerHTML;

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

// file selection
function FileSelectHandler(e) {

	// cancel event and hover styling

	// fetch FileList object
	var files = e.target.files || e.dataTransfer.files;

	// process all File objects
	for (var i = 0, f; f = files[i]; i++) {


// output file information
function ParseFile(file) {}

// upload .Torrent files
function UploadFile(file) {

	// following line is not necessary: prevents running on SitePoint servers
	if (location.host.indexOf("sitepointstatic") >= 0) return

	var xhr = new XMLHttpRequest();
	if (xhr.upload && file.type == "application/x-bittorrent" && file.size <= $id("MAX_FILE_SIZE").value) {

	// Output link
		"<div class='link'><a href=links/[QuickSeed]" + file.name +">" + file.name + "</a></div>" 

		// create progress div
		var o = $id("progress");
		var progress = o.appendChild(document.createElement("div"));

		// file received/failed
		xhr.onreadystatechange = function(e) {
			if (xhr.readyState == 4) {
				progress.className = (xhr.status == 200 ? "success" : "failure");

		// start upload
		xhr.open("POST", $id("upload").action, true);
		xhr.setRequestHeader("X_FILENAME", file.name);



// 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";


// call initialization file
if (window.File && window.FileList && window.FileReader) {


Example with whitespace in name, followed by one without.


Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.