This project is archived and is in readonly mode.

#664 ✓resolved
ronin-12242 (at lighthouseapp)

toQueryString() and input[type=file]

Reported by ronin-12242 (at lighthouseapp) | May 7th, 2009 @ 12:28 PM | in 1.2.3

This ticket is related to #188.

The problem

When using Element.toQueryString() on a form element, mootools does not ignore (when it should; see explanation) file input elements:

Long & boring backstory

This is what made me look into these problem. I made a mootools class that enhances standard input[type=file]. The current state (names, types, etc of the files already uploaded) is stored in hidden inputs of the same name as file input + [file_number] + [file_attribute].

This worked perfectly fine in all browsers until I had to submit a form via XHR and the file list state (e.g. "...images[0][name]=image.png...") was overwritten by empty string that toQueryString() found in the file input it should have ignored.

Story conclusion

Why doesn't toQueryString()ignore file inputs, like all browsers do?

Solution

Check if el.type == 'file' and ignore those:


toQueryString: function(){
		var queryString = [];
		this.getElements('input, select, textarea', true).each(function(el){
			if (!el.name || el.disabled || el.type == 'file') return;
			var value = (el.tagName.toLowerCase() == 'select') ? Element.getSelected(el).map(function(opt){
				return opt.value;
			}) : ((el.type == 'radio' || el.type == 'checkbox') && !el.checked) ? null : el.value;
			$splat(value).each(function(val){
				if (typeof val != 'undefined') queryString.push(el.name + '=' + encodeURIComponent(val));
			});
		});
		return queryString.join('&');
	}

Related thoughts

toQueryString()should probably ignore input[type=submit], input[type=reset] and maybe others (see #188 for instance).

I have consulted with HTML specification version 4.01 and here what I found (see 17.13.2 Successful controls):

re: file inputs (emphasis theirs):

The current value of a file select is a list of one or more file names. Upon submission of the form, the contents of each file are submitted with the rest of the form data. The file contents are packaged according to the form's content type.

re: reset buttons:

Furthermore, user agents should not consider the following controls successful: * Reset buttons.

re: submit buttons:

If a form contains more than one submit button, only the activated submit button is successful.

Comments and changes to this ticket

  • Sebastian Markbåge

    Sebastian Markbåge June 21st, 2009 @ 07:10 PM

    • Assigned user set to “Sebastian Markbåge”
    • State changed from “new” to “resolved”
    • Milestone changed from 2.0 to 1.2.3

    file, submit and reset types are now ignored.

    This could break existing solutions that assumed that submit should be included in the request. Using methods such as $('form').send(). Such solutions should use a hidden field to append those values.

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

People watching this ticket

Referenced by

Pages