Open attachment in browser

[ThaiAn_Vu]

Hi all,

I have a form showing list attachments from SharePoint List. When I click on the attachment, it saved to my computer. My tasks required me to open alot of attachment and i could not save them all to my computer and delete them at the end of the day, Are there anyway to click on the attachment and it opens on the new tab of the browser or display them in Sharepoint ? 

[vwyankee]

@soraiataipa - What do you mean the "preview image"?

@LynetteJH - I know it was a bit ago, but I'm guessing the spacing is in part to the use of the flexible height gallery.

For anyone - Seeing my own question above I should've come back after figuring out how to do this. You can insert an image control in the gallery and reference Microsoft's UI fabric icons for the file types. 

First, add this fabric UI component to your app and then you can use the SVG code as your image Image property. Example of what we're using for the image property:

//Excel file types
If(".xls" in htmlAttachments.HtmlText,
    	"data:image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M2048 1573v-1445q0 -27 -10 -50t-27.5 -40.5t-40.5 -27.5t-50 -10h-1280q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-397q-24 0 -44.5 9t-36.5 25t-25 36.5t-9 44.5v922q0 24 9 44.5t25 36.5t36.5 25t44.5 9h397v384q0 27 10 50t27.5 40.5t40.5 27.5t50 10h933q26 0 49.5 -9.5t41.5 -27.5l347 -347q18 -18 27.5 -41.5t9.5 -49.5zM1664 1829v-165h165zM261 624h189q2 4 12.5 23t24.5 45t29.5 55t29 53.5t23 41l9.5 16.5q27 -59 60.5 -118t64.5 -116h187l-209 339l205 333h-179q-31 -57 -60.5 -114t-62.5 -112q-29 57 -57 113t-57 113h-191l199 -335zM640 128h1280v1408h-256q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-896v-384h397q24 0 44.5 -9t36.5 -25t25 -36.5t9 -44.5v-922q0 -24 -9 -44.5t-25 -36.5t-36.5 -25t-44.5 -9h-397v-256zM1280 1152v128h512v-128h-512zM1280 896v128h512v-128h-512zM1280 640v128h512v-128h-512z' />
	  </g>
	
	</svg>"
),
//Word file types
If(".doc" in htmlAttachments.HtmlText,
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M2048 1573v-1445q0 -27 -10 -50t-27.5 -40.5t-40.5 -27.5t-50 -10h-1280q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-397q-24 0 -44.5 9t-36.5 25t-25 36.5t-9 44.5v922q0 24 9 44.5t25 36.5t36.5 25t44.5 9h397v384q0 27 10 50t27.5 40.5t40.5 27.5t50 10h933q26 0 49.5 -9.5t41.5 -27.5l347 -347q18 -18 27.5 -41.5t9.5 -49.5zM1664 1829v-165h165zM320 624h161q2 8 9.5 43t17.5 83.5t21.5 103t21.5 100.5t16.5 76t7.5 31l7 -30.5t17.5 -76.5t22.5 -100.5t23 -103t19 -84t10 -42.5h160l148 672h-148l-80 -438l-100 438h-152l-96 -440l-86 440h-150zM640 128h1280v1408h-256q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-896v-384h397q24 0 44.5 -9t36.5 -25t25 -36.5t9 -44.5v-922q0 -24 -9 -44.5t-25 -36.5t-36.5 -25t-44.5 -9h-397v-256zM1280 1152v128h512v-128h-512zM1280 896v128h512v-128h-512zM1280 640v128h512v-128h-512z' />
	  </g>
	
	</svg>"
),
//PowerPoint file types
If(".ppt" in htmlAttachments.HtmlText,
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M2048 1573v-1445q0 -27 -10 -50t-27.5 -40.5t-40.5 -27.5t-50 -10h-1280q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-397q-24 0 -44.5 9t-36.5 25t-25 36.5t-9 44.5v922q0 24 9 44.5t25 36.5t36.5 25t44.5 9h397v384q0 27 10 50t27.5 40.5t40.5 27.5t50 10h933q26 0 49.5 -9.5t41.5 -27.5l347 -347q18 -18 27.5 -41.5t9.5 -49.5zM1664 1829v-165h165zM368 1296v-672h150v226h100q52 0 97 15.5t78.5 45.5t53 72.5t19.5 96.5q0 56 -17.5 97t-49.5 67.5t-76 39t-97 12.5h-258zM1920 128v1408h-256q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-896v-384h397q24 0 44.5 -9t36.5 -25t25 -36.5t9 -44.5v-922q0 -24 -9 -44.5t-25 -36.5t-36.5 -25t-44.5 -9h-397v-256h1280zM1536 1408q79 0 149 -30t122.5 -82.5t82.5 -122.5t30 -149h-384v384zM1408 1280v-384h384q0 -80 -30 -149.5t-82.5 -122t-122.5 -82.5t-149 -30q-33 0 -65 6.5t-63 17.5v720q31 11 63 17.5t65 6.5zM604 980h-86v185h90q47 0 74 -20t27 -70q0 -52 -28 -73.5t-77 -21.5z' />
	  </g>
	
	</svg>"
),
//Visio file types
If(".vsd" in htmlAttachments.HtmlText,
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M2048 1573v-1445q0 -27 -10 -50t-27.5 -40.5t-40.5 -27.5t-50 -10h-1280q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-397q-24 0 -44.5 9t-36.5 25t-25 36.5t-9 44.5v922q0 24 9 44.5t25 36.5t36.5 25t44.5 9h397v384q0 27 10 50t27.5 40.5t40.5 27.5t50 10h933q26 0 49.5 -9.5t41.5 -27.5l347 -347q18 -18 27.5 -41.5t9.5 -49.5zM1664 1829v-165h165zM493 624h163l255 672h-166l-147 -427q-5 -16 -10.5 -31t-10.5 -31q-41 123 -82.5 244.5t-83.5 244.5h-170l248 -662zM640 128h1280v1408h-256q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-896v-384h397q24 0 44.5 -9t36.5 -25t25 -36.5t9 -44.5v-922q0 -24 -9 -44.5t-25 -36.5t-36.5 -25t-44.5 -9h-397v-256zM1600 1408l192 -192l-128 -128v-448h-256v-128h-128v384h128v-128h128v320l-128 128z' />
	  </g>
	
	</svg>"
),
//Outlook file types
If(".eml" in htmlAttachments.HtmlText,
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M2048 1043v-929q0 -24 -9 -44.5t-24.5 -36t-36 -24.5t-44.5 -9h-1564q-24 0 -44.5 9t-36 24.5t-24.5 36t-9 44.5v270h-128q-26 0 -49.5 10t-41 27.5t-27.5 41t-10 49.5v1024q0 26 10 49.5t27.5 41t41 27.5t49.5 10h256v256q0 27 10 50t27.5 40.5t40.5 27.5t50 10h1280q27 0 50 -10t40.5 -27.5t27.5 -40.5t10 -50v-776l102 -58q11 -7 18.5 -18t7.5 -25zM1152 1792v-128q26 0 49.5 -10t41 -27.5t27.5 -41t10 -49.5v-256h512v513zM1792 1152h-512v-423l512 295v128zM512 1792v-128h512v128h-512zM638 608q95 0 172 31t131 87t83.5 134t29.5 172q0 91 -28.5 166t-81.5 129t-127.5 84t-165.5 30q-97 0 -175 -30.5t-133 -86t-85 -134t-30 -174.5q0 -92 30 -167t84 -128.5t129.5 -83t166.5 -29.5zM384 128h1429l-558 312q-18 -25 -45 -40.5t-58 -15.5h-768v-256zM1920 215v731l-1 1v-2l-639 -364v-9zM454 1024q0 45 11.5 86t35 72.5t59.5 50t85 18.5q51 0 86 -19t57 -51t31.5 -73.5t9.5 -86.5q0 -46 -10.5 -86.5t-33.5 -70.5t-59 -47.5t-86 -17.5q-49 0 -84 18.5t-57.5 50t-33.5 72t-11 84.5z' />
	  </g>
	
	</svg>"
	),
//Image file types
If(".png" in htmlAttachments.HtmlText Or ".jpeg" in htmlAttachments.HtmlText,
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M256 128h1536v-128h-1664v2048h1115l549 -549v-91h-640v512h-896v-1792zM1280 1536h293l-293 293v-293zM2048 1280v-1024h-1408v1024h1408zM768 1152v-421l320 319l416 -416l160 160l256 -256v614h-1152zM1755 384h139l-230 230l-69 -70zM768 384h805l-485 486l-320 -321v-165zM1728 896q-26 0 -45 19t-19 45t19 45t45 19t45 -19t19 -45t-19 -45t-45 -19z' />
	  </g>
	
	</svg>"
),
//PDF file types
If(".pdf" in htmlAttachments.HtmlText,
"data&colon;image/svg+xml," & 
 EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
   <path fill=''
d='M1920 384h-128v-384h-1664v384h-128v1024h128v640h1243l421 -421v-219h128v-1024zM1408 1664h165l-165 165v-165zM256 1408h1408v128h-384v384h-1024v-512zM1664 384h-1408v-256h1408v256zM1792 1280h-1664v-768h1664v768zM448 1152q40 0 75 -15t61 -41t41 -61t15 -75t-15 -75t-41 -61t-61 -41t-75 -15h-64v-128h-128v512h192zM448 896q26 0 45 19t19 45t-19 45t-45 19h-64v-128h64zM896 1152q53 0 99.5 -20t81.5 -55t55 -81.5t20 -99.5t-20 -99.5t-55 -81.5t-81.5 -55t-99.5 -20h-128v512h128zM896 768q27 0 50 10t40.5 27.5t27.5 40.5t10 50t-10 50t-27.5 40.5t-40.5 27.5t-50 10v-256zM1280 1152h320v-128h-192v-128h192v-128h-192v-128h-128v512z' />
  </g>

</svg>"
),
//Other file types
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M1243 2048l549 -549v-1499h-1664v2048h1115zM1280 1829v-293h293zM256 128h1408v1280h-512v512h-896v-1792zM512 1024v128h896v-128h-896zM512 768v128h896v-128h-896zM512 512v128h896v-128h-896z' />
	  </g>
	
	</svg>"
)
)
)
)
))))

Once the code is saved you can remove the component from the app. You can then use the SVG code in other apps without installing the component.

The result (note the down arrow on each attachment line is to see the rest of the filename):

Lastly, we came across an issue if there's an apostrophe in the filename - Power Apps will truncate the filename at the apostrophe and it won't load. It seems to be the only character that has this issue. With that, we substitute the URL version of an apostrophe (%27) in our HTML control HTMLText property to cover that rarity:

"<a href='" & Substitute(ThisItem.AbsoluteUri, "'","%27") & "?web=1'>" & ThisItem.DisplayName & "</a>"

In my experience the "target='_blank'" is not needed.

[soraiataipa]

HI @vwyankee, thank you for responding.

In a gallery I've an image that I set to show the preview of the attachments in SharePoint.

I was trying to find out how to open the attatchment on selecting the image.

Was this more clear?

Thank you

[vwyankee]

@soraiataipa - I hadn't seen that application done before, but it sounds like a nice addition! That said, I can say that one of the caveats to working with custom controls inside a form data card is many cannot utilize the OnSelect property unless the parent (form and data card) are in edit mode. This is the case for buttons, icons, images and almost every other control. I've tried many for various scenarios, but the HTML Text control is about the only thing I've found that will work when the form is in view mode.

The only ways around it are either:

• To set the form in edit mode and then set all your controls within your data cards to view mode and then your image, icon, button controls will work if they are set to DisplayMode.Edit. If the parent data card or parent form to that control is in DisplayMode.View it will not work, unfortunately.
• ...or put the control you want "clickable" outside the form, which in your case will require duplicating the gallery looking up the form attachment items. If you have many fields where your form scrolls this won't work well since the gallery outside the form will not scroll with it.

[soraiataipa]

Hi @vwyankee 

Thank you, changing the DisplayMode worked!

Best,

[DataGilbert]

Legendary work! Thank you!

[NickCO]

Meant for your update! The updated version of this is brilliant, thanks again.

[NickCO]

That is such a simple, well written way of doing this.  Thank you so much.

[Petchi007p]

Word documents open in new tap but come into edit mode i want only  read mode.

[Pream1]

its good but word documents and excel files are open new this comes into edit mode users want to open new tap documents come into view mode only, so which code add html text property

[jaanihsm]

Hi!

Anyone know how to do the exact opposite? I need the SharePoint list attachments to open on Word desktop.

Thank you in advance!