Output multiple input file to a different id with a single button

Question

In a nutshell,

Below is what I am trying to accomplish: http://jsfiddle.net/n3r8conn/8/

but as shown I am having issues, it would work as follow: User clicks on button once, the file gets selected from input and then display in the files_1 id, user clicks on button again, file gets selected, and then output into files_id2,

This part only shows the upload part, in other words, everything mention above beside displaying the image on screen.

Html COde:

 <button id="uploadDevice" class="button button-block button-positive">
            <i class="icon ion-android-mail"></i> &nbsp; <text id="textBtn1">From Device </text>
</button>
                <input type="file" class="uploadDevice" id="files_1" name="image_file_arr[]" multiple>
                <input type="file" class="uploadDevice" id="files_2" name="image_file_arr[]" multiple>
                <input type="file" class="uploadDevice" id="files_3" name="image_file_arr[]" multiple>

JavaScript Code:

$('#uploadDevice').click(function(){
    myGlobalCounter++;
   $( '#files_' +myGlobalCounter ).val('Secret text ' + myGlobalCounter);
});

CSS code:

 .uploadDevice{
     visibility : hidden;
  }

Update:

<ion-content>
    <ion-slide-box id="uploadedPictures" on-slide-changed="slideHasChanged($index)">
          <ion-slide>

<output id="profilePic1"></output>

  </ion-slide>
          <ion-slide>
<output id="profilePic2"></output>

  </ion-slide>
          <ion-slide>
<output id="profilePic3"></output>

  </ion-slide>
</ion-slide-box>


<div class="row">
<div class="col col-50">
     <button id="uploadFacebook" class="button button-block button-positive">
         <i class="icon ion-social-facebook"></i> &nbsp; <text id="textBtn1"> From Facebook 
</button>
</div>         



<div class="col col-50"><a href="javascript:void(0)" id="buttonFile" href=""> 
 <button id="uploadDevice" class="button button-block button-positive">
            <i class="icon ion-android-mail"></i> &nbsp; <text id="textBtn1">From Device </text>
</button></a>
                <input type="file" class="uploadDevice" id="files" name="image_file_arr[]" multiple>


    </div>
  </div>

  <style>
  .uploadDevice{
     visibility : hidden;
  }
  </style>

  <script>
  $("#buttonFile").click(function(){
        $("#files").trigger('click');
    });

    </script>

script

function handleFileSelect(evt) {
    var $fileUpload = $("input#files[type='file']");
    if (this.files.length > 4) {
        alert("You can only upload a maximum of 5 files");
        evt.preventDefault();
        evt.stopPropagation();
        return false;
    }
    var files = this.files;
    for (var i = 0, f; f = files[i]; i++) {
            if (!f.type.match('image.*')) {
                continue;
            }
        (function(i){
            var reader = new FileReader();

            reader.onload = (function (theFile) {
                return function (e) {
                    var span = document.createElement('span');
                    span.innerHTML = ['<img id="userPictures" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
                    document.getElementById('profilePic' + (i + 1)).appendChild(span);
                };
            })(f);

            reader.readAsDataURL(f);
        })(i);
    }
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Answer 1

Here's another version of the 3rd answer.

This one just moves each FILE INPUT after you click on it, so you can see that the next FILE INPUT is now in place to be clicked.

Basically, instead of using z-index to rotate the just-clicked FILE INPUT to the bottom of the stack, I am moving it down the page so you can visually see what is happening.

jsFiddle Demo

Code:

var xx, global_cnt = 1;

$('#clicker').button(); //use jQueryUI to auto-style the button

$('div').click(function(){
    xx = global_cnt * 60;
    $('#real_uploader_' +global_cnt).css({'position':'absolute','top':xx+'px'});
    global_cnt++;

    if ( $('#real_uploader_' +global_cnt).length ){
        $('#real_uploader_' +global_cnt).css('z-index','2');
    }
});

Answer 2

Something like this?

jsFiddle Demo

HTML:

<input type="text" class="th" id="typeHidden_1" />
<input type="text" class="th" id="typeHidden_2" />
<input type="text" class="th" id="typeHidden_3" />
<input type="text" class="th" id="typeHidden_4" />
<input type="button" id="mybutt" value="Show Me" />
<input type="button" id="nutherbutt" value="Read Hidden Field" />

javasccript/jQuery:

var myGlobalCounter = 0;

$('#mybutt').click(function(){
    myGlobalCounter++;
   $( '#typeHidden_' +myGlobalCounter ).val('Secret text ' + myGlobalCounter);
});

$('#nutherbutt').click(function(){
    for (n=1; n<= myGlobalCounter; n++){
        var tmp = $('#typeHidden_' +n).val();
        alert( tmp );
    }
});

Answer 3

I apologize -- I did not read your answer carefully enough the first time.

The <input type="file" /> element is special. For security reasons, there is very little you can do with javascript to control a file input element. You cannot set the filename programmatically, and you cannot click the button programmatically.

However, there is a work-around that is frequently proposed:

HTML:

<div>
    <button><a href="javascript: void(0)">Upload File</a></button>
    <input type="file" id="upload_input" name="upload" />
</div>

CSS:

div{display:block;width:100px;height:20px;overflow:hidden;}

button{width:110px;height:30px;position:relative;top:-5px;left:-5px;}

input{font-size:50px;width:120px;opacity:0;filter:alpha(opacity:0); position:relative;top:-40px;left:-20px;background:yellow;}

non-working jsFiddle with code

---

References:

In JavaScript can I make a "click" event fire programmatically for a file input element?

Programmatically set the value of a type="file" input HTML element?

Answer 4

Let me try again.

I was having some difficulty understanding what you need. If I can get my head around that, then I'm pretty sure I can help.

Please check if this is what you need.

This code has 3 <input type="file" > elements. All 3 are "invisible" (using opacity, to they remain where they are on screen, they are just invisible).

The FILE inputs are also stacked on top of each other. At the start, input_1 is on top --- but it is invisible, so all you see is the BUTTON underneath it.

When "the button" (really, input_1) is clicked, three things happen:

(1) the OPEN dialog (Choose a file to upload) is displayed for input_1

(2) global_cnt is used to move input_1 to the back (using z-index)

(3) global_cnt is incremented, and then used again to move input_2 to the front

(4) global_cnt is now at the correct number to move input_2 to back when it is clicked

Each time the user clicks "the button" (really, they are clicking an invisible input type="file" element), a different input element is moved to the top. Therefore, by clicking the same "button", the user keeps uploading to a different file input.

Note: this works because when you click input_1, the div also gets the click event (through event bubbling).

jsFiddle Demo code

Code:

HTML:

<div>
    <input type="button" id="clicker" value="Upload File" />
    <input type="file" class="hidden_uploaders" id="real_uploader_1" name="upload_1" />
    <input type="file" class="hidden_uploaders" id="real_uploader_2" name="upload_2" />
    <input type="file" class="hidden_uploaders" id="real_uploader_3" name="upload_3" />
</div>

javascript/jQuery:

var global_cnt = 1;

$('#clicker').button(); //use jQueryUI to auto-style the button

$('div').click(function(){
    if ( $('real_uploader_' +global_cnt).length ) $('real_uploader_' +global_cnt).css('z-index','-1');
    global_cnt++;
    if ( $('real_uploader_' +global_cnt).length ) $('real_uploader_' +global_cnt).css('z-index','2');
});

still working on this