Invoke the FileAPI from a Bootstrap button

Question

This is my code for invoking the FileAPI, to upload images to the client.

   //Import SVG does not use click triggers as other functions do.

var file = document.getElementById('tool-importSVG');
        file.addEventListener('click', function (event) {
            var files = event.target.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                if (file.type.match('svg')) {
                    project.importSVG(file, function(item) {
                        console.log(item);
                    });
                }
            }
        });
//End of SVG import

and this is the HTML

<li><a href="#"  id="tool-importSVG" >Import SVG</a></li>

Is there a way to use a BUTTON instead to invoke the FileAPI? E.g a Bootstrap button.

@hd1 It seems that I need to pass an event instead which makes it a tad harder for a novice like me, I updated the code above to show my current code — nicholaswmin, May 18 '14 at 06:24
Your current code does not make sense to me; you’re reacting on the click on an `a` element – where from would that have a `files` collection …? — CBroe, May 18 '14 at 06:46
@CBroe I am reacting to a click on the hyperlink "tool-importSVG", am I not? — nicholaswmin, May 18 '14 at 07:12
Yes. And how would a normal link have any `files` that you could then access …? — CBroe, May 18 '14 at 07:14
@CBroe It would just pop-open the File Reader. From what I infer from your suggestions there is no way to use anything other than input type=file, is that correct? — nicholaswmin, May 18 '14 at 07:16
Correct. And with that, your question effectively changes to something like _“how can I use a custom file-upload button?”_ (I presume?), which has been discussed here and on the web quite often already (f.e. http://stackoverflow.com/questions/6461252/custom-upload-button) — CBroe, May 18 '14 at 07:19
I took some time to search but maybe it was not enough or maybe I was using the wrong keywords.Thanks a lot. — nicholaswmin, May 18 '14 at 07:21
@NicholasKyriakides did you want to have bootstrap style button to upload images? If so, you can check my solution. — mohamedrias, May 18 '14 at 08:05
@mohamedrias I'm trying to put it together, if it works it's just what I need. — nicholaswmin, May 18 '14 at 08:07

score 1 · Answer 1 · answered May 18 '14 at 07:37

1

As CBRoe stated above it is impossible to use anything else other than input-type= file. You could style it easily however using CSS

answered May 18 '14 at 07:37

Haris Georgiou

67
1
11

mohamedrias · Accepted Answer · 2014-05-18T09:15:21.923

1

As per your code, you have var file = document.getElementById('tool-importSVG');

But inside the event listening function, again you are using var file = files[i]; It means you are redefining the file variable. I would suggest you to rename that variable.

Now coming to your question:

You can use a bootstrap button to upload files:

<span class="btn btn-success fileinput-button">
         <i class="glyphicon glyphicon-plus"></i>
         <span>Add files...</span>
         <input type="file" name="files[]" multiple="">
 </span>

It will look like below:

enter image description here

CSS:

 .fileinput-button input {
       position: absolute;
       opacity: 0;
       -ms-filter: 'alpha(opacity=0)';
       direction: ltr;
       cursor: pointer;
       margin-top: -25px 0 0 0;
    }

You can change the color as you want :)

edited May 18 '14 at 09:15

answered May 18 '14 at 08:03

mohamedrias

18,326
2
38
47

I have put together your solution in a JSfiddle and it looks like the input is still visibe. http://jsfiddle.net/52VtD/5639/ – nicholaswmin May 18 '14 at 08:12
You need to add some css. I have updated your fiddle http://jsfiddle.net/mohamedrias/52VtD/5640/ – mohamedrias May 18 '14 at 08:15
Thanks, I tried setting the input's visibility to hidden but the js-fiddle illustrates the answer perfectly. Thanks. If I don't get a better answer by tommorow, the bounty goes to you – nicholaswmin May 18 '14 at 08:16
Is there any way to keep the button as a link, just the way the rest of the links are displayed in the dropdown? I can use CSS of course to style it, but is it possible to target a bootstrap class for this and make it work? I'd rather not repeat style code – nicholaswmin May 18 '14 at 08:25
Check this http://jsfiddle.net/mohamedrias/52VtD/5641/ i have made changes to html – mohamedrias May 18 '14 at 08:44
One quick tip: You are using id="tool-placeImageUrlDropdown" multiple times, As IDs need to be unique, change it to class. – mohamedrias May 18 '14 at 08:46
Note taken, sorry for putting you through all this hassle man – nicholaswmin May 18 '14 at 08:46
1

I noticed some error in older CSS, can you check this http://jsfiddle.net/mohamedrias/52VtD/5644/ and update the css for .fileinput-button input – mohamedrias May 18 '14 at 09:17

Invoke the FileAPI from a Bootstrap button

2 Answers2