Develop Reference

Force Download of MP3 in Chrome, Firefox, Safari and IE using Amazon S3

Is there a way I can force an MP3 file to download from Amazon S3.
I have a Download button in my Razor:
<td>
<a href="#t.S3PreSignedUrl" class="js_recordingDownloadButton document-link btn btn-info btn-block br2 btn-xs fs12 #Html.Raw(t.S3PreSignedUrl.IsNullOrWhiteSpace() ? "disabled" : "")" target="_blank" data-container="body" data-toggle="tooltip" title="#t.OriginalFilename" type="#t.MimeType" download>
<span class="fa fa-cloud-download fs12"></span>
</a>
</td>
Currently, when you click on it, another browser window is opened and starts to play automatically using a Modal:
<div id="js_PlayRecordingPopup" class="popup-basic mfp-with-anim modalPopup">
<div class="panel">
<div class="admin-form">
<div class="panel-heading">
<span class="panel-title">
<i class="fa fa-play"></i> Play Recording
</span>
</div>
</div>
<div class="panel-body bt0 text-center p25">
<p class="popupInfo fs12 mb5">Playing: <b class="text-info js_playingTitle"></b></p>
<p class="popupInfo fs12">Filename: <b class="text-info js_playingFileName"></b></p>
<div class="summaryBox popupSummary text-center audioContainerBox">
<audio controls controlsList="nodownload" id="audRecording">
Your browser does not support the audio element.
</audio>
</div>
</div>
<div class="panel-footer">
<div class="text-center">
<input type="button" class="btn btn-primary" value="Done" data-bind="click: function(){ var sound = document.getElementById('audRecording'); if(sound != undefined) { sound.pause(); sound.currentTime = 0; } $.magnificPopup.close(); }">
</div>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close" data-bind="click: function(){ var sound = document.getElementById('audRecording'); if(sound != undefined) { sound.pause(); sound.currentTime = 0; }}">×</button>
</div>
Is there a way I can set it so that if I click Download it downloads the file straight away?
This is what it looks like in the Source Code:
<td>
<a href="https:url/Audio/Recordings/TES/39e7ca51-1ac8-f395-3ae6-ff814dbde6c3/39e7ca51-e77c-65f1-c88e-47fe20f67ee1/o_1cj5s0tntp3aa1011o51tlrd8ba.mp3?X-Amz-Expires=86400&response-content-disposition=inline%3B%20filename%3Drain-01.mp3&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIOHIWJAIQSFECYZQ/20180724/eu-west-1/s3/aws4_request&X-Amz-Date=20180724T104420Z&X-Amz-SignedHeaders=host&X-Amz-Signature=02a5febff28eed31646a37fea0b8da7d7bcf4b0ffe9a3365d31a0ac3f0b2cabb" class="js_recordingDownloadButton document-link btn btn-info btn-block br2 btn-xs fs12 " target="_blank" data-container="body" data-toggle="tooltip" title="rain-01.mp3" type="audio/mp3" download>
<span class="fa fa-cloud-download fs12"></span>
</a>
</td>

You can change Content-Type on the response to Content-Type: application/octet-stream. While also setting Content-Disposition: attachment; filename="filename.mp3". Make sure filename uses encoding defined in RFC 5987
I see you already have found the download attribute on HTML5 but you're not supplying a filename. It should be used like so:
<a href="pathtofile.mp3" download="filename">
You could always test this download.js written by dandavis. If that works you could reverse his code.

I worked through a solution using S3 behind CloudFront this weekend (August 2022); and, since Amazon has recently updated CloudFront functions to allow for this fairly easily, I wanted to share how I accomplished a solution, in case someone else may need it as you work through the Amazon Documentation.
How it works
Example Listen Link:
https://d111111abcdef8.cloudfront.net/audio.mp3
(plays in browser)
Example Download Link:
https://d111111abcdef8.cloudfront.net/audio.mp3?title=Custom%20Title%20for%20File
(forces download of the .mp3 file with the custom filename: Custom Title for Downloaded File.mp3)
My Solution:
Here is my custom CloudFront function's code, which you can use as an example to help you write what you need:
function handler(event) {
//This is a viewer response function.
var request = event.request;
var uri = request.uri;
var qs = request.querystring;
//console.log ('qs: ' + qs);
var response = event.response;
var headers = response.headers;
if(!qs.title) {
//console.log('No- qs title');
} else{
var title = qs.title.value;
title = decodeURIComponent(title);
title = title.split('+').join(' ');
//console.log('Yes- qs title LEN: ' + title.length);
if (uri.endsWith('.mp3')) {
var fileType = '.mp3';
var fileName = title + fileType;
//console.log('fileName: ' + fileName);
var disposition = "attachment; filename=" + fileName;
//console.log('disposition:' + disposition);
headers['content-disposition'] = { value: disposition };
}
}
return response;
}
I set up my CloudFront Distribution to have a new behavior with:
Path pattern: "*"
Origin: my S3 bucket
Cache Policy to look for and accept only the "title" key in uri query string
Origin Request Policy to also look for and accept only the "title" key in uri query string
Associated my custom CloudFront function (above) as a Viewer response function type

How to access for each loop html properties to code behind?

i'm trying to access these data in code behind file. if i change these html tag to asp tags i cannot retrieve data from for each loop. here i want actual sales price and the product size which are generated by for each loop to save these properties in database. So is there any possible ways to solve these problem??
aspx page
<%
foreach (Com.Idk.Application.ImaraResPOS.Entities.ProductSize psize in psList)
{
%>
<div class="col-sm-12 text-center type">
<div class="circle bg">
<img src="images/Meal-100.png">
</div>
<div class="btn-align-size">
<button class="btn btn-primary ladda-button cd-add-to-cart" data-price="<%=psize.SalesPrice %>" data-name="<%= psize.SizeDef.Name %>" data-product-image="images/3.jpg" data-style="expand-right" id="Breadtype_btn" data-dismiss="modal" data-toggle="modal" data-target="#bread_type">
<%= psize.SizeDef.Name %>
<img src="images/Buy-30.png" style="height: 30px; width: 30px">
<h3 class="hide">
<%= psize.Id%>
</h3>
</button>
</div>
</div>
<%
}
%>
code behind
private void InsertProductSizeToSale()
{
string sizeID = Request.QueryString["size_id"].ToString();
Com.Idk.Application.ImaraResPOS.Entities.ProductSize prid = new Com.Idk.Application.ImaraResPOS.Entities.ProductSize();
psList.Select(Global.sess, "ProductSize","where Product_ID="+ prid);
if (psList.Count > 0)
{
Hashtable parameterList = new Hashtable();
OfferDetailList odList = new OfferDetailList();
parameterList.Clear();
parameterList.Add("productSizeId", sizeID );
parameterList.Add("comboId", null);
parameterList.Add("currentDate", DateTimeUtil.GetFormattedString(((Sale)index.saleid).Date));
parameterList.Add("currentTime", DateTimeUtil.GetFormatedTimeString(DateTime.Now));
parameterList.Add("day", Const.GetDay(((Sale)index.saleid).Date.DayOfWeek));
odList.SelectUsingSP(Global.sess, "SqlProGetOfferDetail", parameterList);
if (odList.Count == 0)
{
//want to retrive psize properties here
// here i'm getting an error
SqlProInsertProductSizeToSale(prid, sizeID, psize.SalesPrice, psize.SalesPrice);
}
else if (odList.Count > 0)
{ SqlProInsertProductSizeToSale(selectedProduct, selectedProductSize, odSelection.GetSelectedProductSizePrice(), selectedProductSize.SalesPrice);
}
}
}
}

I am not sure why you wish to get the data from the page. Since you are populating the page from some entity objects, why not just get the data from the entity objects directly?
Codebehind
foreach (Com.Idk.Application.ImaraResPOS.Entities.ProductSize p in psList)
{
SqlProInsertProductSizeToSale(p.prid, p.sizeID, p.SalesPrice, p.SalesPrice);
}

Dynamic Text in Bootstrap Alert

I have a bootstrap alert like so :
<div class="alert alert-danger">
×
First Error
</div>
My problem is I want to be able to change this text dynamically in my code behind, c#. Ideally, I would like to have multiple bullet pointed error messages in one alert like the image below:
Can anyone provide me with any ideas of how to achieve this?

In your html, have this
<div id="BootstrapErrorMessage" runat="server">
</div>
and in your code, do this
....
MyErrorString += "<li>Bad Password</li>";
....
MyErrorString += "<li>Invalid Date</li>";
....
if (!MyErrorString.isNullOrEmpty()) {
BootstrapErrorMessage.InnerHtml += "×" +
"<ul>" + MyErrorString + "</ul>";
BootstrapErrorMessage.Attributes["class"] = "alert alert-danger";
}

You can download the error messages to the client when he request the model of your page(recommended solution). Or you can post your data to the server and get list of errors to show.
Your html code should be like this:
<div class="bs-example">
<div class="alert alert-danger fade in">
<ul>
<li><strong>First</strong> Error </li>
<li>Second Error</li>
</ul>
</div>
</div>
And each li element should be updated from server(One of the options you choose).

Execute javascript in webbrowser control

I am trying to resolve the links in a google search results list by executing a javascript on the page that would normally resolve when you click the link. Basically, I am trying to resolve all of them when the page loads.
Here is the html generated by google of the first two search results:
<H2 class=hd>Search Results</H2>
<DIV id=ires>
<OL id=rso eid="3gHFUYToG6LD0gGJ2IDAAQ">
<LI class=g>
<DIV class=rc data-hveid="43"><SPAN style="FLOAT: left"></SPAN>
<H3 class=r><A onmousedown="return rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)" href="http://prezi.com/wnx5jat2oene/ipad/">IPad by <EM>Frunk La Je</EM> on Prezi</A></H3>
<DIV class=s>
<DIV>
<DIV style="WHITE-SPACE: nowrap" class="f kv"><CITE>prezi.com/wnx5jat2oene/ipad/</CITE>‎
<DIV class="action-menu ab_ctl"><A aria-haspopup=true aria-expanded=false id=am-b0 class="clickable-dropdown-arrow ab_button" role=button href="#" jsaction="ab.tdd; keydown:ab.hbke; keypress:ab.mskpe" data-ved="0CC0Q7B0wAA" aria-label="Result details"><SPAN class=mn-dwn-arw></SPAN></A>
<DIV class="action-menu-panel ab_dropdown" role=menu tabIndex=-1 jsaction="keydown:ab.hdke; mouseover:ab.hdhne; mouseout:ab.hdhue" data-ved="0CC4QqR8wAA">
<UL>
<LI class="action-menu-item ab_dropdownitem" role=menuitem><A class=fl onmousedown="return rwt(this,'','','','1','AFQjCNHsvjmPpYAOeqVOHIIs_PWPuD5JaQ','','0CC8QIDAA','','',event)" href="http://webcache.googleusercontent.com/search?q=cache:bKCj-2ogWdIJ:prezi.com/wnx5jat2oene/ipad/+frunk+la+je&cd=1&hl=en&ct=clnk&gl=us">Cached</A></LI></UL></DIV></DIV></DIV>
<DIV class="f slp"></DIV><SPAN class=st>IPad. No description. by <EM>Frunk La Je</EM> on 7 June 2012 4 Tweet <B>...</B> thanks</a></p>. Make a copy Share Embed Like. by <EM>Frunk La Je</EM> on 7 June 2012 4.</SPAN></DIV></DIV></DIV></LI>
<LI class=g>
<DIV class=rc data-hveid="48"><SPAN style="FLOAT: left"></SPAN>
<H3 class=r><A onmousedown="return rwt(this,'','','','2','AFQjCNE7-nvy-ymTrBI0x4zleJOUXlY6nA','','0CDEQFjAB','','',event)" href="http://prezi.com/user/q53evqg1dnrn/"><EM>Frunk La Je</EM> on Prezi</A></H3>
<DIV class=s>
The function that resolves the first link:
onmousedown="return rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)"
I tried this:
foreach (HtmlElement h in web.Document.All)
{
h.RaiseEvent("onmousedown");
}
I tried replacing "onmousedown" with "MouseDown".
I tried this too:
web.Document.InvokeScript("rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)");
Any ideas how I can get this function to execute? I've also looked at the getElementByID function, but I don't know what the ID is for this.

Try to simulate a click programmatically, let's say in one of your anchor tag <a>. Now using your own code we will simulate a click on your first anchor tag which is subscript 0 (as shown below), like this:
HtmlElement simulateClickAnchor = webBrowser1.Document.GetElementsByTagName("a")[0];
simulateClickAnchor.InvokeMember("click");

HtmlDocument doc = browser.Document;
HtmlElement head = doc.GetElementsByTagName("head")[0];
HtmlElement s = doc.CreateElement("script");
s.SetAttribute("text","function sayhello() { alert('hello'); }");
head.AppendChild(s);
browser.Document.InvokeScript("sayHello");

File Upload using Twitter Bootstrap, C#, asp.net and javascript

link to Jasny http://jasny.github.com/bootstrap/javascript.html#fileupload
link to what the form looks like http://img507.imageshack.us/img507/3308/picpx.png
I am using the Jasny Javascript file upload in my boot strap project, it looks like this:
ASP\HTML VIEW
<div class="row-fluid">
<div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden">
<div class="input-append">
<div class="uneditable-input span2" runat="server" id="statment1"><i class="icon-file
fileupload-exists"></i> <span class="fileupload-preview" style=""></span></div><span
class="btn btn-file"><span class="fileupload-new">Select file</span><span
class="fileupload-exists">Change</span><input type="file"></span><a href="#" class="btn
fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>
How do I go about using this in the code behind to save the attached file to my server as I would using the C# asp.net File Upload?
In ASP.net C# I would normally do this in the code behind:
ASP.net C# CodeBehind
string filename = FileUpload1.PostedFile.FileName;
FileUpload1.PostedFile.SaveAs(Path.Combine(Server.MapPath("\\Document"),
filename).ToString());
filelocation = "Document\\" + filename;
media = "Document";
The Jasny github explains how to set the layout using bootstrap which is great as it looks really good (much better than the boring asp file upload) but How do I actually get I to post on my button click? I would really like to get this to work as I think it looks heaps nicer.

Since you want to do this without a standard asp.net control, you will have to do some of the wiring that asp.net does for you.
Make sure your input has an id. I will set it here to myFile.
<div class="row-fluid">
<div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden">
<div class="input-append">
<div class="uneditable-input span2" runat="server" id="statment1">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview" style=""></span>
</div>
<span class="btn btn-file"><span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span><input id="myFile" type="file" runat="server">
</span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload" >Remove</a>
</div>
</div>
</div>
Your page should now have a HtmlInputFile control to your page. like this:
protected HtmlInputFile myFile;
Then you should be able to receive the file:
if (IsPostBack)
{
if (myFile.PostedFile != null)
{
// File was sent
var postedFile = myFile.PostedFile;
int dataLength = postedFile.ContentLength;
byte[] myData = new byte[dataLength];
postedFile.InputStream.Read(myData, 0, dataLength);
}
else
{
// No file was sent
}
}