Light gallery image download issue

Question

When I am opening an image using lightgallery and I tried to download it. It works on the local server but when I'm trying to do same in production. The image opens up in a new tab.

• Product Server secure with https
• Image url comes from amazon s3 server

HTML :

<div class="col-lg-offset-3 col-lg-9 col-md-offset-2 col-md-10 col-sm-10" style="padding-left:10px">
  <div id="customPreviews" style="border: 1px dashed rgba(0, 0, 0, 0.3);padding: 40px 40px;">
    <ul id="lightgallery" class="list-unstyled row"></ul>
  </div>
</div>

Javascript :

var lg = $('#lightgallery').lightGallery({
  iframeMaxWidth: '80%'
});

function reinitGallery() {
  lg.data('lightGallery').destroy(true);
  lg = $('#lightgallery').lightGallery({
    iframeMaxWidth: '80%'
  });
}

function renderAllImage() {
  $('#lightgallery').html("");
  setTimeout(function() {
    reinitGallery();
  }, 500);
  for (i = 0; i < fileArr.length; i++) {
    addFileToPreviewContainer(fileArr[i]);
  }
}

function addFileToPreviewContainer(data, reInit, append) {
  if (isThumb == true) {
    var newTemplate = templateText + '</ul></div></li>';
  } else {
    var newTemplate = templateListText;
  }
  var templateObj = $($.parseHTML(newTemplate));
  if (data.file_type == 'jpg' || data.file_type == 'JPG' || data.file_type == 'jpeg' || data.file_type == 'JPEG' || data.file_type == 'png' || data.file_type == 'PNG' || data.file_type == 'gif' || data.file_type == 'GIF')
    templateObj.attr('data-iframe', false);

  var date;
  if (data.created_at.date) {
    date = data.created_at.date;
  } else {
    date = data.created_at;
  }
  templateObj.attr('data-src', data.data_src);
  templateObj.attr('data-sub-html', '<h4>' + data.original_filename + '</h4>');
  templateObj.find('.a-thumb').attr('src', data.path_thumbnail);
  templateObj.find('.a-thumb').attr('alt', (data.file_name) ? data.file_name : data.filename);
  templateObj.find('.a-link-filename').text(data.original_filename);
  templateObj.find('.a-info').text(date + " - " + data.size + ' kb');
  templateObj.find('.a-id').val(data.original_filename);
  if (append == false) {
    $('#lightgallery').html('');
    $('#lightgallery').append(templateObj);
  } else {
    $('#lightgallery').append(templateObj);
  }


  if (reInit) {
    setTimeout(function() {
      reinitGallery();
    }, 500);
  }
}

Here is the screenshot for better understanding

Answer 1

you need to add metadata while uploading an image into s3 server

add this metadata

['ContentDisposition' => 'attachment']