Attaching a user created recording to a form - javascript

I'm sure there is a super easy way to do this, but I'm pretty new to web programming so not sure of how to actually do it. I have a simple form that takes in a doc file and a media file (the media file can either be picked, or created via webcam). So far it allows the user to pick the media file or create one but I'm not sure how to attach that created file to the actual file button so it can be posted.
function sendMail(){
var blob = new Blob(recordedBlobs, {type: 'video/webm'});
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.style.display = 'none';
a.href = url;
document.getElementById("media").appendChild(a);
}
This is what I'm trying but doesn't seem to be working. ('media' is the id of my file button I want to attach the file to).

Related

Angular - Save blob in local text file?

I have a plain text variable which I want to store and save on a .txt file using Angular.
So far I have tried the following:
var data = new Blob([text], {type: 'text/plain'});
const url= window.URL.createObjectURL(data);
window.open(url);
Being text the variable with the plain text content. It seems to work but it opens de blob on a new browser tab, and I need it to be downloaded as whatever.txt.
How can I achieve this? Thanks!
The solution can be found here:
JavaScript blob filename without link
The steps are the following:
Create a hidden <a> tag.
Set its href attribute to the blob's URL.
Set its download attribute to the filename.
Click on the <a> tag.
This is working code from my application
const file = new window.Blob([data], { type: contentType });
const downloadAncher = document.createElement("a");
downloadAncher.style.display = "none";
const fileURL = URL.createObjectURL(file);
downloadAncher.href = fileURL;
downloadAncher.download = fileName;
downloadAncher.click();

How to save web contents to another html file

I'm new to JavaScript and Electron Projects. I have a small task to Run a Webpage in which I have "download" button, if I hit the button I have to get all contents and sources code to be downloaded for the current page. Here my Sample work :
browser.js
onload = function() {
var webview = document.querySelector('webview');
doLayout();
document.querySelector('#back').onclick = function() {
webview.goBack();
};
document.querySelector('#download').onclick = function() {
var urlStr = webview.getURL()
alert(urlStr)
// alert(webview.getWebContents());
};
}
Currently I am able to get Url in Alert View, but I'm not able to get webpage contents
Note: Please give solution only in JavaScript not in jQuery
finally this simple code helped me to download the html file
var htmlContent = [""];
var bl = new Blob(htmlContent, {type: "text/html"});
var a = document.createElement("a");
a.href = urlStr;
a.download = "new.html";
a.hidden = true;
document.body.appendChild(a);
a.innerHTML = "something random - nobody will see this, it doesn't matter what you put here";
a.click()
You can't do this without having some server-side code that reads the file required and sends it with download-headers.
Since Electron is a CSS/HTML/JS framework that also focusses on app development I doubt if this is possible within Electron. Given it's Node it might be possible (since Node is server-side), but I'm lacking in knowledge/experience in Electron on if this is possible.
You might want to check out this page in their documentation though: http://electron.atom.io/docs/api/download-item/

How can i create a file and save it in local system using Blob in javascript?

During implementation of file transfer use case through WebRTC protocol, i am recieving data from queue at reciever end in some variables but unable to use that. Through some digging, i came to know that it can be done using Blob,
code snippet that i used :
var data=reciever.dequeue();
if(data)
{ var blob = new Blob(_base64ToArrayBuffer(data), {type: 'text/plain'});
// need to know how to proceed now?
}
file is need to be saved in local system.Thanks in advance.
You can create a temp anchor element element and append it to document.body, trigger click event. Done.
Here is the demo code:
var url = objectURL = URL.createObjectURL(blob); //your blob object here
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "YourFileName";
anchor.click(); //This will trigger browser download event.
Here is document about blob to URL.
Here is the blob document.
Hope this works. : )

How to link to data URL without Firefox adding "unsafe" prefix

I'm trying to create a download link in an angular app that makes data in a model downloadable as a CSV file. I have it all working except for the actual download link. Using filesaver.js is blowing up unit tests in Karma so I'm exploring just doing it manually.
Below is what I have. In the controller:
var blob = new Blob([data.join('\n')], {type: 'text/csv;charset=utf-8'});
$scope.downloadUrl = URL.createObjectURL(blob);
In the view, I have:
<a ng-href="{{downloadUrl}}" download="ttester.csv" id="download">Download</a>
The issue is this opens a new page in Firefox 20 with the URL "unsafe:blob:af775c64-dcb1-864a-8eaa-adebe7f101a7", notice the "unsafe:" prefix. Removing that prefix downloads the data correctly, but without the filename I want.
What am I missing in my hyperlink to make it work? I expect it to open a download dialog with the filename tester.csv for the file.
Really appreciate any help
You could use the following code that will create the blob, a fake link and will dispatch a click event on this fake link. Note that no new page should be opened but you will be directly prompted with the save dialog box.
var blob = new Blob([data.join('\n')], {type: 'text/csv;charset=utf-8'});
var url = window.URL || window.webkitURL;
var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
link.href = url.createObjectURL(blob);
link.download = 'teams.csv'; // whatever file name you want :)
var event = document.createEvent("MouseEvents");
event.initEvent("click", true, false);
link.dispatchEvent(event);
You can see a working Fiddle here

Import to notepad using jquery

Is there any link for exporting the datas to notepad?
I have some fields like
Name,
Age, and
WorkingStatus
These are text and textarea...
I want to insert this datas to the notepad.Is there any demos or code available?
I don't know of any way to have the browser open notepad, but you can use HTML5 features to save a file as text, and then open it on your own inside notepad. Depending on the browser, you may need to trigger saving the file on the user side. Here's two references, which I'll summarize:
http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/
http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side
Basically, you want to create and save a blob with your text. It should look something like this:
var arrayOfStuff = [];
arrayOfStuff.push("Name Age Working status");
arrayOfStuff.push("-----------------------------------------------");
arrayOfStuff.push(document.getElementById("name").value);
// etc
var blob = new Blob(arrayOfStuff, {type:'text/plain'});
// (the rest is copied directly from the wordpress link)
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked programmatically.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
downloadLink.click();
}
else
{
// Firefox requires the user to actually click the link.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
document.body.appendChild(downloadLink);
}
If notepad isn't a big deal, you should also be able to open this blob in an iframe as .txt, and then right-click and saveAs, if you prefer.
Edit
Ok, this was actually new for me to play with, so some of my older information wasn't quite right. Here's the javascript from the working fiddle:
var arrayOfStuff = [];
arrayOfStuff.push(document.getElementById("name").value + "\n");
arrayOfStuff.push(document.getElementById("email").value);
arrayOfStuff.push("\n");
arrayOfStuff.push(document.getElementById("phone").value);
arrayOfStuff.push("\n");
arrayOfStuff.push(document.getElementById("comments").value);
arrayOfStuff.push("\n");
alert(arrayOfStuff);
var blob = new Blob(arrayOfStuff, {type:'text/plain'});
var link = document.getElementById("downloadLink");
link.download = "details.txt";
link.href = window.URL.createObjectURL(blob);
The fiddle is at http://jsfiddle.net/xHH46/2/
There are a few lessons learned:
If you're on firefox, it gives you the option to open the .txt immediately in Notepad. However, notepad isn't paying attention to the linefeeds, whether they're \n or \n\r, appended to the immediate string or added separately, so I'd recommend using Wordpad instead. Or, you can save the file.
More importantly, realize that the link you display is based on whatever value is in the text when you create the blob. If you don't have defaults, you'll get an empty file, because all the fields are empty. The wordpress solution fixes this (and discusses using it within the past week), but the fix is ugly. Basically, you'd have to click on a button, and the button would then make a link appear, and that link would give you the good file.
You won't be able to do this with purely javascript. You need to generate the file server side and send it to the client.

Categories