Add value to <input type="file">

JavaScript
1

My form has 3 images to be uploaded…more often then not the 3 images are named something like this image_S image_M image_L

so i was writing a function to auto fill the _M and _L once i selected the _S image.

here is my function

function auto_images() {
	input_box=confirm("Auto-fill _MD and _LG images??");
	if (input_box==true){
		// Output when OK is clicked
		var SM = document.forms.form1.product_image_sm.value;
		if(SM.indexOf('_S.')){
			var MD_a = SM.split('_S.');
			var MD = MD_a.join('_M.');
			var LG_a = SM.split('_S.');
			var LG = LG_a.join('_L.');
			alert(MD);
			document.forms.form1.product_image_md.value = MD;
			document.forms.form1.product_image_lg.value = LG;
		}
	}else{
		// Output when Cancel is clicked
	}
}

everything works except the part where I try to fill in the inputs value

document.forms.form1.product_image_md.value = MD;
does not work…can someone please advice the right way to do that?

THANKS

2

In javascript, inputs of type=file are read only.

3

thats stupid…i think what I am trying to do is a completely legitament reason why it shouldn’t be read-only…

ok so in that case is there a way I can use javascript to erase the input field and then write a completely new input field with the value?

or just overite the entire input field?

I would really like to figure out a way to make these images auto-fill…I am often adding around 100 products at a time. and hunting for 100 images in a folder filled with several images would be significantly more time efficient then hunting for 300.

4

ok I changed my function to overight the input field with a new one with the value=“” set but apperently the value=“” atribute does not work on input files either.:injured:

5

ok i guess my best solution is to innerhtml the string i want to insert into the input file right next to it and then just copy and paste it in.

thanks.

6

It’s a security measure. If file-inputs were writable I would be able to do something like this:


var input = document.createElement('input');
input.type="file";
input.value="Path/To/Your/Passwords";
myForm.appendChild(input);
myForm.submit();

Your best option is probably just uploading the images as-is and saving them on the server-side with a different name.

7

thanks IZE i guess thats why I can’t find a hack to get it to work lol.

writting it next to it and copy and pasting is close enough i guess lol.

maybe what you said about server side is better anyways…they always the same picture just different sizes…i wonder if I can change the size as well as the name via php?..off to the php forums to find out…

thanks.

8

That’s certainly possible using PHP’s GD Library :slight_smile:
But you’re right, that’s best discussed over there :wink: