Custom file picker without using <input type="file"/>

Question

I am working on a java-based (webwork framework) web-app where the file to be uploaded needs to be compressed first. Since there's no way to set the value of "input type='file'" element via javascript, I decided to take the route of an embedded applet. Basically this applet compresses the chosen file, then uploads the compressed file to the server via scp.

It worked well, but I have issues regarding the rendering of the web page itself. I am thinking instead of implementing the file picker within the applet, if there's an existing file picker that I can use instead. Of course without putting any "input type='file'".

Links to these existing custom web file pickers will be very much appreciated.

TheRealChx101 · Accepted Answer · 2013-09-27 21:01:49Z

4

This always works.

<div id="input_container" style="width: 0px; height: 0px; overflow: hidden"><input type="file" id="inputfile" /></div>
<div class="button" onclick="upload();">Upload file</div>

And your script

function upload(){
 document.getElementById('inputfile').click();
}

Your CSS

.button {
   /*button style here*/
}

answered Sep 27, 2013 at 21:01

TheRealChx101

1,5741 gold badge24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taha Jahangir · Accepted Answer · 2013-02-26 11:02:40Z

2

Due to security restrictions the only way to select a file with HTML is adding an <input type=file> to document. Then user should selects a file with real clicks.

Note that javascript is able (in modern browsers) to read the content of file, so it should not be able to select arbitrary file and read it.

edited Feb 26, 2013 at 11:02

answered Feb 26, 2013 at 10:52

Taha Jahangir

4,9322 gold badges44 silver badges52 bronze badges

1 Comment

user2110793 Over a year ago

Yeah, that's why I took the applet route and used jFileChooser. However, the rendering is so slow.

Collectives™ on Stack Overflow

Custom file picker without using <input type="file"/>

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related