Upload two different file in one form

Question

Having a hard time fixing my two upload file.My Problem is when i upload a photo in the first form file, the preview displays same photo both in the two form for file and ngo_logo and the same as when i upload photo in the second form file for ngo_logo, it displays the same photo both in the form.The first one is always overridden.Anyone could help me out here is much appreciated.

<div class="col-md-6">
         <div class="form-group">
              <label class="control-label">Proof of Accreditation<em>(Upload File)</em>:</label>
            {!! Form::file('file',['class'=>'form‐control','id'=>'file'  ]) !!}
          </div> 
         <div class="form-group">
              <img id="fil" src="#" name="file"  class="img-responsive well" alt="Image" />
          </div>
    </div>
    <div class="col-md-6">
         <div class="form-group">
             <label class="control-label">Organizational Logo:</label>
             {!! Form::file('ngo_logo',['class'=>'form‐control','id'=>'ngo_logo'  ]) !!}
           </div> 
    <div class="form-group">
          <img id="logo" src="#" name="ngo_logo"  class="img-responsive well" alt=" Your Image" />
             </div>
     </div>

/Javascript/

<script type="text/javascript">

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#fil').attr('src', e.target.result);
                //$('#logo').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#logo').attr('src', e.target.result);

            }
            reader.readAsDataURL(input.files[0]);
        }



    }/**end of function readURL(input)**/
        $("#file").change(function(){
            readURL(this);       
        });
        $("#ngo_logo").change(function(){
            readURL(this);       
        });

</script>

Answer 1

{!! Form::file('file',['class'=>'form‐control','id'=>'file'  ]) !!}

Replace id=>file with id=>fil because your image id is fil.

<img id="fil" src="#" name="file" class="img-responsive well" alt="Image" />

Answer 2

You don't need to read file twice, just need to target correct element and set src.

You can use DOM relationship to target the desired element and set the SRC. there are various methods to traverse DOM with current element context i.e. event.target

function readURL(event) {
    var input = event.target;
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(event.target)
            .closest('form-group') //Target parent form control div
            .next() //Target sibling of parent form control 
            .find('img') //Target Ima
            .attr('src', e.target.result); //Set image
        } 
        reader.readAsDataURL(input.files[0]);
    }
}

$("#file, #ngo_logo").change(readURL);

References

1. .closest()
2. .find()
3. .next()

---

As an alternative, you can associate the element using data-* prefixed attributes.

{!! Form::file('file',['class'=>'form‐control','id'=>'file', data-target=>'#fil' ]) !!}
{!! Form::file('ngo_logo',['class'=>'form‐control','id'=>'ngo_logo', data-target=>'#logo' ]) !!}

and in the event handler read it using $.fn.data() or Element.dataset property.

function readURL(event) {
    var input = event.target;
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(event.target).data('target').attr('src', e.target.result);
            //$(event.target.dataset.target).attr('src', e.target.result);
        } 
        reader.readAsDataURL(input.files[0]);
    }
}