You are viewing limited content. For full access, please sign in.

Question

Question

Opening an uploaded image file in Chrome modal window

Forms
Updated August 19, 2021
asked on August 18, 2021 • Show version history

I've noticed an issue in Chrome when you click on an uploaded image file in a form, Chrome will download it instead of opening it in a new tab.  I can get Firefox to open an image in a new tab but I can't seem to find a setting in Chrome that allows this.  I did see the right-click context menu with the option "open link in new tab" but it doesn't work with image files. 

Is there a way to force an image file (that was uploaded to an LF form) to open in a new modal window, perhaps using jQuery?

 

@████████- have you done this before?

 

Thanks.

 

 

0 0

Replies

replied on August 18, 2021

I only use Chrome, which always downloads when clicking on an upload. I did not realize Firefox could simply view certain documents in a new tab, are you sure it is not downloading with an instant open in Firefox command? This would create the appearance of opening in a new tab.

0 0
View 9 previous replies
replied on August 18, 2021

Firefox initially asks if you want to save the file or open it in Photos; you then have the option of using another program to  open it and I chose Firefox.  I don't know if it's doing a download & open type of process or not. I know Chrome can open a PDF in a new tab, but I was hoping that it could open image files this way too, or at least maybe we could look at a jquery option of opening the image in a pop-up modal window?

0 0
replied on August 18, 2021

It just sounds to me like Firefox can open photos and Chrome can not. Try dragging a photo to your chrome window and see if it opens a new tab.

If you want to access it with javascript you would need to enable preview, so that the image is available in the browser.

By default the upload is not in the browser, only a link to retrieve it from the database.

0 0
replied on August 18, 2021

When I drag a photo to Chrome it opens in a tab in the browser. So, it appears that Chrome should be able to handle opening photos.  Perhaps it can't deal with the mime type as LF has it stored in a database?

0 0
replied on August 18, 2021

Try setting your default application for that file extension to Chrome, then you can just open the file and it should open in a new tab.

0 0
replied on August 18, 2021 • Show version history

I did already try that; unfortunately, it looks like Windows won't let me change the default app to a web browser.  It only gives me choices for image viewers such as Photos, IrfanView, Paint, Paint 3D, etc.

Edit:  just did a different approach by right-clicking on a jpg file and used the Open With dialog to look for other programs.  Although I was successful in changing the default app to Chrome for a jpg file, when I click on the link to the attachment in an LF form, it still does a download instead of opening directly in Chrome.  The only difference is that now the downloaded file has a Chrome icon on it and when I click on the downloaded file to open it, it opens in Chrome.  If I right-click on the link and choose 'open link in new tab', it downloads.  If I right-click on the preview image and choose 'open image in new tab', it downloads.

 

 

0 0
replied on August 18, 2021

Note: I have enabled preview for the uploaded file in the LF form, so if there's a way to handle this in jquery I would appreciate any assistance you could provide for that approach.

 

 

0 0
replied on August 19, 2021

Figured it out with the preview. I used the picker from the dev tools to see that a class is assigned to the preview, with a src attribute that contains the URL.

The class name is previewImage.

So you can get the URL this way

let imageURL = $('.previewImage').attr('src');

To open it in a new tab use:

window.open(imageURL);

If you want to hide the preview, you can use

$('.previewImage').hide();

This is assuming only one uploaded image exists on the form, otherwise you would have to cycle though each and handle them individually.

0 0
replied on August 19, 2021 • Show version history

Very cool.  Yes, there could be multiple images in the table since this is an expense report form with a table that could have multiple rows with an image in each. Could the window.open action be within a 'click' action so that when the user clicks the link for the uploaded file, the window.open action happens?

0 0
replied on August 19, 2021

Or...maybe even better...can we show the user a link to click that would open all attachments in new tabs or modal windows?

0 0
replied on August 19, 2021 • Show version history

If you execute the function from a button or any element within the row, then you could get only the element on that row by finding the parent tr element and then finding the child imagePreview element

IE:

$(this).closest('tr').find('.imagePreview').attr('src');

*the closest method searches up the hierarchy and the find method searches down

That should do the trick. You can create buttons using the custom HTML with this code:

<button onclick="myFunction()">Click me</button>

Make sure to log everything to the console to make sure it is picking things up right IE:

console.log(imageURL);

 

0 0
replied on August 19, 2021

I'm trying the following, and getting an "Unexpected token ')'" error.  Can you advise please?

 

function openImages() {
  $('.cf-table-block tbody tr').each(function()
  {
    let imageURL = $('.previewImage').attr('src');
    window.open(imageURL);
    console.log(imageURL));
	
  }

 

0 0
replied on August 19, 2021 • Show version history

There is an extra ) in the console.log call and a missing one to close out the .each method

This will open a tab for every image in the table.

Edit: Also don't forget to use $(this).find('.previewImage') to ensure your only working with the existing row

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...