[SOLVED] Show file name on the view

Issue

This Content is from Stack Overflow. Question asked by Learner

im new on stack overflow and i dont how to post my question properly. how do i wanna show the file name in view? currently i just hardcode the name of the file on view.

can someone assits me? thank you very much

Here my code :-

<li>
@if (Model.Picture2 != null)
{

base2 = Convert.ToBase64String(Model.Picture2);
var picture2_data = base2.Substring(0, 5);

if (picture2_data == "JVBER")//PDF
{
  var downloadTag = "PDPA" + Model.SenderID;
  imgSrc2 = String.Format("data:application/pdf;base64,{0}", base2);

<br>
<a download=@downloadTag class="fa fa-file-pdf-o" style="font-size:18px;color:red" href=@imgSrc2></a>
<a download=@downloadTag href=@imgSrc2 title='PDPA'>PDPA</a>
<br />

}

else

{
base2 = Convert.ToBase64String(Model.Picture2); imgSrc2 = String.Format("data:image/gif;base64,{0}", base2);
<a class="fancybox-buttons" rel="fancybox-button" data-lightbox="button" href="@imgSrc2" title="PDPA"><img src="@imgSrc2" style="max-width:100px; max-height:100px;" alt="" /></a>
 }
}

</li>



Solution

Your code has a few flaws and not exactly clear what your aiming for.

The parts that work would for a pdf look like this (however I am using a png for the pdf as its much faster/simpler as one line of data. It is not a good idea to have multiple references to a single dataURL only one should be needed.

this line works <a download=@downloadTag href=@imgSrc2 title='PDPA'>PDPA</a>

because it is <a href="file stream">PDPA</a>

enter image description here

this one does not work
<a download=@downloadTag class="fa fa-file-pdf-o" style="font-size:18px;color:red" href=@imgSrc2></a>

because you have nothing visible between >hello world</a>

the last one more difficult to test but also same needs>something</a><

perhaps your aiming for something like

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='https://css-tricks.com/favicon.svg' type='image/svg+xml'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<a href="data:application/pdf;base64,JVBERi0xLjcNJeLjz9MNCjEgMCBvYmoNPDwvUGFnZXMgMiAwIFIvVHlwZS9DYXRhbG9nPj4NZW5kb2JqDTMgMCBvYmoNPDwvQ3JlYXRpb25EYXRlKEQ6MjAxNTA3MDExMTI0NDcrMDInMDAnKS9DcmVhdG9yKFBERiBDcmVhdG9yIGh0dHA6Ly93d3cucGRmLXRvb2xzLmNvbSkvTW9kRGF0ZShEOjIwMjIwNjA3MTgzNjAyKzAyJzAwJykvUHJvZHVjZXIoMy1IZWlnaHRzXDIyMiBQREYgT3B0aW1pemF0aW9uIFNoZWxsIDYuMC4wLjAgXChodHRwOi8vd3d3LnBkZi10b29scy5jb21cKSk+Pg1lbmRvYmoNNCAwIG9iag08PC9Bbm5vdHMgMTMgMCBSL0NvbnRlbnRzIDUgMCBSL01lZGlhQm94WzAgMCA2MTIgNzkyXS9QYXJlbnQgMiAwIFIvUmVzb3VyY2VzPDw+Pi9UeXBlL1BhZ2U+Pg1lbmRvYmoNNSAwIG9iag08PC9MZW5ndGggMT4+DXN0cmVhbQogCmVuZHN0cmVhbQ1lbmRvYmoNOSAwIG9iag08PC9CQm94WzAgMCA2MTIgMTQ4XS9GaWx0ZXIvRmxhdGVEZWNvZGUvRm9ybVR5cGUgMS9MZW5ndGggNDEvUmVzb3VyY2VzPDwvUHJvY1NldFsvUERGIC9UZXh0IC9JbWFnZUIgL0ltYWdlQyAvSW1hZ2VJXS9YT2JqZWN0PDwvSW0wIDExIDAgUj4+Pj4vU3VidHlwZS9Gb3JtL1R5cGUvWE9iamVjdD4+DXN0cmVhbQp4nFMo5CrkMjM0UjBQMFAwNLEA08m5XPqeuQYKLvlcgVwKgQoAjFMHhQplbmRzdHJlYW0NZW5kb2JqDTExIDAgb2JqDTw8L0JpdHNQZXJDb21wb25lbnQgOC9Db2xvclNwYWNlL0RldmljZVJHQi9GaWx0ZXIvRmxhdGVEZWNvZGUvSFJlcyA5Ni9IZWlnaHQgMTE1L0xlbmd0aCA0NTI4L1NNYXNrIDEyIDAgUi9TdWJ0eXBlL0ltYWdlL1R5cGUvWE9iamVjdC9WUmVzIDk2L1dpZHRoIDQ3NT4+DXN0cmVhbQp4nO2da5LbuhGFuZjsIJX4zoh0eWl3DanYojRx7iYp2fOLaZB6i33QePCh8HylH/bM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"

 button class="w3-btn w3-white w3-border w3-border-red w3-text-red w3-round-large"
 Download="ABC.pdf" >Click me to Download<br>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFXUlEQVR4nO3d21LjOBRAUXuK//9lzxM9dIac+KLLkbRWVb80RQhBO0eOTdiP49iA3/3T+w5AZgKBwFfXr77v9ne9HMfe+y6MYG9+DCKK3ITzl3aBCGMsQtm2rVUg4hjX4qHUD0Qcc1g0FK9icc6+Hys+2dUNZMEHdHqL/UxNEK5bKBKBcM8ikdQLZJEHcGkL/IxNEJ6ZPBKB8NzEkQiEMiaNpO/Fiq8WPRlVVM+Fuu/HbD9DE2R1x7H/+VfCZJNEIPxHJP8jEP5WappMEolA+J1Itm0TCBGRCIQPFo9EIHy2cCQC4ZxFIxEI5y0YiUC4ZrFIBMJ1C0UiEO5ZJBKBcN8CkQiEZyaPRCA8N3EkAqGMSSMRCOVMGIlAKGuySARCeRNFIhDqmCQSgVDPBJEIhLoGj0Qg1DdwJAKhjUEjEQjtDBiJQGhrsEgEQnsDRSIQ+hgkEoHQzwCRCIS+kr8bvEDo72kkFaeIQMgh6SQRCHk8iaTSFBEIuSSbJAIhn7uRVJgiAoGAQMgpyRQRCHklOB4RCAQEAoGv3ndgSdE+ufW2IsEbI2RmgrT2aUFasKkIpCWLv42Cj7NAICCQ3o5jz/ByJr8TSCtXxr6tWBoCyejJRDGNihJITxZzegLJomQswitGIFmUPu4QSRECmZlIHhPI7LyM/IhrsVYxciT+/AHkJJAMnBhMSyA9CSM9gUBAIBAQSG+2WakJBAICaWXk8xALEwgEBAIBgWRjK5aKQCAgEAgIpCXbp+EIBAICgYBAICCQ1hyHDEUgEBAIBAQCAYFAQCAQEEhr/gTbUAQCAYFkZIqkIZCWLPzhCAQCAsnKtElBIK1Y8EMSSGai6k4gvfkDN6kJpIUnk8AU6UogWZgiKQmkp7NRmCLdCKS2K4s7CkYkXQgEAgKpKXrWfzctTJFUBJKRSNIQSC13pkeJ26YogWTlZd8UBJKZrVZ3Aqmh5vbq7NehCIFk9ykokVQlkNJqTA+RdCOQUZyJRCjFCaSk2sceZ25DJEUJZDQiaUogpbR65ers7dlyFSGQUV25VF4ot331vgNTaDk9Xm/77OLf9+PX+/IkngXO9gtkdFcjKend7U0Uji3WU72mR2YTbetMkNGMtPC+7+vATxQCeaLF9BgpiHfeHf8MQCDZzBDERARyV6npkT2IUu+8MugUEUgPNaKodYb95+dEX+P1Y9nDP0kgd9yZHqUWzJNn4e/PvXtfzsby/fEJIhFITVlPwv287RKxvLvtM/+fnECuOjM97iy6Xgvo6VR5NcHU+EkgV5T6C7UZn01LTJUJCaSVjFG8UzqWkb73FwI56+pCGXhR/OXJBY4TPAYCKWmCBXHKKt/nJpBzXJC4LFfzfuKAdWkC+c1Ce2xitlg//QzjUyTiWIJAts02irdssUY6601z6wby7tdCLX5+WDOQJ282IKClrHUM8vRCQ3EsZ50JYuFzwxoT5OyWSkS8mH+CiIMH5g7E+Q0emjeQKxPB9OCNOQMRB4XMF4g4KGi+QN6Z9H2bqGuuQDK89xRTmSuQd2ytuGmeQJzvoIJ5AjlDHFw0x6Umn6aH3w7kpvkniDh4YO5AxMFDcwcSEQcnzBHI1cUuDk6a4yB92/xGIFXME8i313cmFwUPzLHFekccPDR3IPCQQCAgEAgIBAICgYBAICAQCAgEAgKBgEAgIBAICAQCAoFArsvdvdshyZggEBAIBOoF4peV6KXg2jNBICAQCAgEAnUDcRxCa4XXnAnCPCo8IdcPxBRhYPtxNDx57Uw5NVR8Em67xTJNKK3ymmo7QWAwDtIhIBAICAQCAoGAQCAgEAgIBAICgYBAICAQCPwLH2kfzgOE8PAAAAAASUVORK5CYII="
 width="100px" height="100px">

ABC.pdf</a>

you can replace the image with font icon

</body>
</html>

so like this but use pdf for first entry and an image or font icon for second,
<i class="fa fa-file-pdf-o" style="font-size:18px;color:red" aria-hidden="true"></i>

enter image description here

IF the files are on the server then on the server CPU you can program a means to provide custom icons
however converting just one pdf cover page to an image requires a powerful binary converter as javascript is limited and not always available. Here I can use a one line scripted conversion in irfanView without Ghost Script but most servers can run a single GS command enter image description here


This Question was asked in StackOverflow by Learner and Answered by K J It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?