I am trying to create a form inside a Bootstrap modal. it should contain the input file field and preview a chosen image, so I can use Jcrop to crop the image.

So here is what am I doing now:

<script type="text/javascript">
    $('#new-menu').on('shown.bs.modal', function (event) {
        var modal = $(this);

        var src = modal.find(".modal-body .upload");
        var target = modal.find(".image");

        src.bind("change", function () {
            // fill fr with image data
            modal.find(".jcrop-holder").remove();
            readUrl(modal,target,src);
            initJcrop(target);
        });
    });

    function readUrl(modal,target,src){
        if (src.files && src.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                target.attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
            initJcrop(target, modal);
        }
        else alert(src.files[0]);
    }
    }


    function showCoords(c) {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    }

    function initJcrop(img) {
        jcrop_api = $.Jcrop(img);

        jQuery(img).Jcrop({
            aspectRatio: 16 / 9,
            onChange: showCoords,
            setSelect: [0, 90, 160, 0],
            onSelect: showCoords
        }, function () {
            modal.find(".jcrop-holder").css({
                left: "50%",
                marginLeft: -img.width / 2 + "px"
            });
        });
    }
</script>

But i get this error

'Cannot read property '0' of undefined'

HTML

<form action="place/{id}/new/service/">
   <div class="input-group">
       <img src="" class="image"/>
   </div>
   <div class="input-group">
       <span class="input-group-addon" id="basic-addon1">
          <i class="glyphicon glyphicon-apple"></i>
      </span>
       <input type="text" id="form-name" class="form-control"
              placeholder="Назва" value="" aria-describedby="basic-addon1"/>
   </div>
   <div class="input-group">
       <span class="input-group-addon" id="basic-addon2">
          <i class="fa fa-tag"></i>
      </span>
       <input type="number" id="form-price" class="form-control"
              placeholder="Ціна" value="" aria-describedby="basic-addon1"/>
       <span style="padding:2px 5px" class="input-group-addon"><i>.грн</i></span>
   </div>
   <div class="input-group">
       <textarea class="form-control place_description" style="resize: none" rows="5"
                 placeholder="Короткий опис послуги"></textarea>
   </div>
   <div style="text-align: center">
       <small class="description-info">Залишилося 160 символів</small>
   </div>
   <div class="input-group">
       <input type="file" class="upload"/>
   </div>
   <button id="new-service" class="btn btn-primary" type="submit">Зареєструвати</button>
</form>

I am trying to create a form inside a Bootstrap modal. it should contain the input file field and preview a chosen image, so I can use Jcrop to crop the image.

So here is what am I doing now:

<script type="text/javascript">
    $('#new-menu').on('shown.bs.modal', function (event) {
        var modal = $(this);

        var src = modal.find(".modal-body .upload");
        var target = modal.find(".image");

        src.bind("change", function () {
            // fill fr with image data
            modal.find(".jcrop-holder").remove();
            readUrl(modal,target,src);
            initJcrop(target);
        });
    });

    function readUrl(modal,target,src){
        if (src.files && src.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                target.attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
            initJcrop(target, modal);
        }
        else alert(src.files[0]);
    }
    }


    function showCoords(c) {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    }

    function initJcrop(img) {
        jcrop_api = $.Jcrop(img);

        jQuery(img).Jcrop({
            aspectRatio: 16 / 9,
            onChange: showCoords,
            setSelect: [0, 90, 160, 0],
            onSelect: showCoords
        }, function () {
            modal.find(".jcrop-holder").css({
                left: "50%",
                marginLeft: -img.width / 2 + "px"
            });
        });
    }
</script>

But i get this error

'Cannot read property '0' of undefined'

HTML

<form action="place/{id}/new/service/">
   <div class="input-group">
       <img src="http://placehold.it/160x90" class="image"/>
   </div>
   <div class="input-group">
       <span class="input-group-addon" id="basic-addon1">
          <i class="glyphicon glyphicon-apple"></i>
      </span>
       <input type="text" id="form-name" class="form-control"
              placeholder="Назва" value="" aria-describedby="basic-addon1"/>
   </div>
   <div class="input-group">
       <span class="input-group-addon" id="basic-addon2">
          <i class="fa fa-tag"></i>
      </span>
       <input type="number" id="form-price" class="form-control"
              placeholder="Ціна" value="" aria-describedby="basic-addon1"/>
       <span style="padding:2px 5px" class="input-group-addon"><i>.грн</i></span>
   </div>
   <div class="input-group">
       <textarea class="form-control place_description" style="resize: none" rows="5"
                 placeholder="Короткий опис послуги"></textarea>
   </div>
   <div style="text-align: center">
       <small class="description-info">Залишилося 160 символів</small>
   </div>
   <div class="input-group">
       <input type="file" class="upload"/>
   </div>
   <button id="new-service" class="btn btn-primary" type="submit">Зареєструвати</button>
</form>

• javascript
• twitter-bootstrap
• jcrop

Share Improve this question Follow edited Jul 23, 2017 at 8:56 joanolo 6,35811 gold badge3232 silver badges3939 bronze badges asked Oct 29, 2015 at 0:45 Dmitrij KostyushkoDmitrij Kostyushko 66611 gold badge88 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The src you are passing in function readUrl(modal,target,src) is a jQuery element when you need is to access the DOM element. Have

src.get(0).files && src.get(0).files

Instead of

src.files && src.files[0]