Any Way to Trigger File Upload from Separate Button?

JavaScript
1

I’m guessing Javascript security shuts me down here, but just thought I’d post this on the off chance a guru here might know.

I’m using ASP.NET AJAX’s new AsyncFileUpload control. Functionality-wise it’s awesome. Appearance-wise my product manager hates it. I’d like to hide it, and trigger its functionality from a button whose appearance I can fully customize.

I tried doing this via calling its click() method, which opens the file selection dialog fine. However, once a file is selected, causing the form to be submitted, the infamous “htmlfile: Access is denied” error rears its head.

Has anyone been able to overcome this mountain of a problem?

2

As you said, for security reasons this is not possible with pure javascript.
But there are plenty of examples out there, which make use of a small flash movie (for example swfupload - pretty nice!!).
There you can style the button the way you like.

3

Yes you can ! Add a fake button which you can style as required. Then position the file upload button on top of the fake button and set the opacity to 0. Another element can be used to display the file selected. Done ! :slight_smile:

4

Fidel, it looks like I’ll be forced to go that route.

5

Thanks for your time, Semantic. I’m aware of that option. However it does not work for me for two reasons:

  1. I need to hide the textbox that displays the name and path of the selected file. Setting the opacity of the entire control to zero would make it invisible, yet leave troublesome white space where the textbox resides.
  2. I would need to enlarge the ‘Browse’ button significantly to meet my product manager’s UI requirements. This exacerbates the hackiness of 1.
6

I have used the method I mentioned and it has worked fine in all the browsers I have tested. I am not sure what white space you are referring to because when you set the opacity to 0 the whole control disappears. Following is the markup you will need


<div class="input_file">
      <input type="file" />
      <p class="value"></p>
      <p class="button"></p>
</div>

p.value will display the name of the file and p.button will the button substitute. The input field will be positioned on top of p.button so when the user click on the button they are actually clicking on the input control. After the file is selected the text of p.value is updated to display the file name. Hope this makes things clear.

Here is another solution.

File upload

7

Basically the only ways that work are all variants of that option so if you can’t get that option to work you are left with no way to do it whatsoever.

Browser access for uploading files is deliberately very restrictive as otherwise it would be possible for web sites to steal files from the computers of the people who visit the site.

Anyway, not all browsers display a text field for a file upload button.

8

Semantic, please correct me if I’m wrong, but requirement 2. in my previous post makes this method infeasible.

The upload control is a single unit - textbox and button. It can be opacity’ed out of visibility, yes. However, if I need to map the control’s invisible ‘Browse’ button to a much larger customized button that sits underneath it, I’m out of luck. Changing the width of the control enlarges the textbox, not the ‘Browse’ button, which always remains at a constant size. Thus the ‘Browse’ button can never be mapped correctly to its fancy customized replacement.

9

Thanks, felgall. I’ll turn to Flash-based solutions if I need to.

10

Rather than argue about this here is a demo. Decide for yourself.

http://dfizz.com/inpfile/

11

Argument over, Semantic. You win.

Can you please leave the page and CSS file up, so that I can study them later? My work demands that I focus on other tasks currently.

12

Sure no problem. :slight_smile:

13

Thanks so much, Semantic.

This technique is effective but I found it very unfriendly. Your example was extremely useful. Is there a way on this site to recommend or applaud another member? It seems I can’t even mark your post as the solution.

14

No, there isn’t, but it’s been/being discussed. You could leave a visitor comment on their profile page, but other than that, posting your gratitude is more than what many members do (alas).

15

Not sure what you meant by unfriendly. Care to explain ?

16

Semantic, I just mean unfriendly in the sense that it’s not as intuitive, neat and elegant an approach as would exist in the perfect world.

On the other hand it’s a magnificently effective solution and again I applaud you.

17

I agree. Sometimes solutions that work are ugly hacks and there is simply no other choice.

For those interested the link has been changed and it degrades gracefully when js support is absent.

http://dfizz.com/jquery_input_file

18

I know that this is a quite old post, but anyway I thought it might save somebody troubles in the future. Another thing that you can do is to make the file field invisible with opacity and position it absolutely, then assign mouseover event to the object that needs to trigger file prompt and move your file field so it would always be underneath the mouse, i.e.:


<script type="text/javascript">
$(document).ready(function () {
	var file = $('.file');
	var obj = $('#img');
	file.css({opacity: 0.2, position: 'absolute'});
	obj.mousemove(function(e) {
		file.css({left: e.pageX - file.width() + 5, top: e.pageY - file.height() + 5});
	});

});
</script>

Cheers!