CODEWITHSUNDEEP
javascripthtmljquery
nonutt
nonutt

Reputation: 155

How to get value id in a function in jQuery?

I have upload picture function along with cropper js function I have problem with displaying the file name even though I have declare the variable and the input already have value. But when I tried to pass and display the name. It did not show any value for that file name. enter image description here

At first I tried to put it under the photo.type condition like this

if (photo.type == 'image/jpg' || photo.type == 'image/png' || photo.type == 'image/jpeg') {
  let file = $('#logo').val();
  var filename = file.substr(file.lastIndexOf('\\') + 1, file.length);
}

But then I'm not sure on how to pass the name so I put it under case and I still don't get the file name. How do I solve this problem ?

<div class="col-sm-3 text-center">
  <button type="button" class="btn btn-info w-30 choose_logo" id="b_logo">upload</button>
  <input type="file" id="logo" hidden>
</div>

$(".choose_logo").click(function() {
  $("#logo").click();
});

$("#logo").change(function() {
  let width = 0;
  let height = 0;
  let photo = $(this).prop("files")[0];
  
  if (photo.type == 'image/jpg' || photo.type == 'image/png' || photo.type == 'image/jpeg') {
    $("#btn_saveCrop").attr("data-operation", "logo");
    $("#parentContainer_cropper").html(`<img id="image-container-croppr" src="${URL.createObjectURL(photo)}"/>`)
    $("#cropper_js_banner").modal('show');
    $('#image-container-croppr').cropper({
      aspectRatio: 1,
      minContainerWidth: 500,
      minContainerHeight: 500,
      background: false,
      modal: true,
    });
    $(this).val('');
  } 
  else {
    Swal.fire({
      icon: 'error',
      title: 'error',
      text: 'ONLY JPEG, JPG and PNG Are allowed'
    });
  }
});

$("#btn_saveCrop").click(function() {
  var operation = $(this).attr("data-operation");
  let index

  $('#image-container-croppr').cropper('getCroppedCanvas').toBlob(function(blob) {
    switch (operation) {
      case "logo":
        let file = $('#logo').val();
        var filename = file.substr(file.lastIndexOf('\\') + 1, file.length);

        console.log(filename);
        index = logo_temp.push({
          "file": blob
        }) - 1;
        
        if (index == 0) {
          var defaultphoto = "show";
        } else {
          var defaultphoto = "hidden";
        }
        
        $("#cropper_js_banner").modal('hide');
        $("#logoAttach").append(`
            <div class="tab-content col-12 mt-4" id="myTabContent-2">
                <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
                    <div class="media-support-info ml-3">
                        <a class="font-size-12 font-weight-600" href="${URL.createObjectURL(blob)}"  target="_blank" style="color:black;">
                        <p class="mb-0 font-size-12"> Filename : ${filename}</p></a>
                    </div>
                </div>
            </div> 
        `);
        break;
    }
    
    $('.modal').css('overflow-y', 'auto');
  });
});

Upvotes: 0

Views: 83

Answers (1)

TechVision
TechVision

Reputation: 269

You can try this,

var uploadedFileInfo = null;
    $("#logo").change(function(e) {
    uploadedFileInfo = e.target.files[0];
});

and now you will have the uploaded file object,

var filename = uploadedFileInfo.name;

Upvotes: 1

Related Questions