mp3 Download Ionic Framework | Android | HTML5 - javascript

I am working on ionic framework for android .
It simply contains an Iframe to embed a website in a blank project.
This is the website http://www.ultrayoutube.com/ANDROID/#/wanna.
I am facing two problems
Making Iframe equal to size of screen
I want Iframe to be equal to the size of window . I am using <iframe src="http://www.ultrayoutube.com/ANDROID/#/wanna" style="width:100%; height:100%;" ></iframe>
But iframe only takes 1/2 of screen in emulator
When the user searches for the song he must be able to download it by clicking download mp3
I have gone through some plugins as file transfer plugins but they all need a download link to download something . I want it that when the user clicks on button download mp3 , that link is automatically passed to the plugin and is downloaded to user's cell phone .

on Document Head try to initialise your file transfer plugin
function onDeviceReady() {
console.log('deviceready');
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
function(fileSystem) {
window.fs = fileSystem;
window.fileTransfer = new FileTransfer();
window.fileTransfer.onprogress = function(progressEvent) {
if (progressEvent.lengthComputable) {
var perc = Math.floor(progressEvent.loaded / progressEvent.total * 100);
console.log(perc + '%');
$('.progress-bar').css({width: perc + '%'});
}
};
window.fs.root.getDirectory('Download', {create: true}, function(dirEntry) {
window.downloadFolder = dirEntry;
});
},
function(evt) {
console.log(evt.target.error.code);
}
);
}
Change : script.js
app.run(function($rootScope, downloader, alertService) {
$rootScope.fs = window.fs;
$rootScope.downloadFolder = window.downloadFolder;
$rootScope.fileTransfer = window.fileTransfer;
$rootScope.messages = {}
...
$rootScope.saveContent = function(url) {
var uri = encodeURI(url);
$rootScope.fileTransfer.download(
uri,
$rootScope.downloadFolder.toURL() + "/" + url.substring(url.lastIndexOf('/') + 1),
function(entry) {
console.log("download complete: " + entry.fullPath);
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
}
);
};
...

Related

How To Attach Downloading Content To Email Using JavaScript

I am new to JavaScript. I am working with a website. In this website i have provide a functionality to the users to download a file. Now i need to know is there any way to send those downloaded file to email. My code for downloading content is given below.
function download2(data, filename, type) {
var file = new Blob([data], { type: type });
if (window.navigator.msSaveOrOpenBlob)
window.navigator.msSaveOrOpenBlob(file, filename);
else {
var a = document.createElement("a"),
url = URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function () {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
};
and my send mail function is given below:
function sendMail(mail, name, roll, cls, sec, grp) {
var link = "mailto:" + mail
+ "?cc=ictpracticalslc#gmail.com"
+ "&subject=" + escape("AnswerSheet Submitted By " + name + " Class " + cls + " Section " + sec + " Group " + grp)
+ "&body=" + escape("My Roll Is " + roll)
;
window.location.href = link;
};
when i call download2("<p>Hello</p>", "hello.html", "text/plain"). A file named hello.html is downloaded in my local machine. But i need to attach this file in sendMail function. so that users can send email with this attachment.
I need to update the sendMail function so that it can accept an attachment which is downloaded by download2 function.
I am badly need this functionality. I am stuck here for 15 days and find no suitable solution. I need to do this with only javascript or jquery.

Cordova 3.6.3 File plugin - get local video file on android

What I'd like to do is
get the URI of a video file on the device via cordovas javascript API
set the URI as value of a HTML5 video tag's src attribute.
The second part shouldn’t be a problem.
Concerning the first task, there are a lot of good structured tutorials like Raymond Camden's demonstrating how to get local files through javascript in an cordova environment.
However, with the newest version of cordova, I could not get it to work.
The video file
The video is located either in assets/www/videos/testvid.webm or res/raw/testvid.webm in the built apk file. Both variations did not work.
The javascript
myPath = cordova.file.applicationDirectory; // -> file:///android_asset/
//myPath += "www/videos/testvid.webm";
respectively
myPath = cordova.file.applicationStorageDirectory; // -> file:///data/data/com.example.MyPackage/
//myPath += "raw/testvid.webm";
Then:
window.resolveLocalFileSystemURL(myPath, gotFile, fail);
function gotFile(entry){
if(entry.isDirectory)
alert JSON.stringify(entry.getFile("testvid.webm"));
}
The permissions
In res/xml/config.xml access permissions are added
<preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,root" />
The error is {code:1} -> NOT_FOUND_ERR
What am I doing wrong? How to navigate to the file, or where can one put it to be found?
I figured it out!
There is a bug in the android version of the cordova file plugin.
A workaround is transferring the file(s) from the assets directory of the app itself file:///android_asset/ (cordova.file.applicationDirectory) to a working directory on the phone like file:///data/data/com.example.MyPackage/files (cordova.file.dataDirectory). Then set the video's source URL to this new file.
XMLHttpRequest as well as FileTransfer will do the trick.
var myFilename = "testvid.webm";
var myUrl = cordova.file.applicationDirectory + "www/videos/" + myFilename;
var fileTransfer = new FileTransfer();
var filePath = cordova.file.dataDirectory + myFilename;
fileTransfer.download(encodeURI(myUrl), filePath, (function(entry) {
/*
res = "download complete:\n"
res += "fullPath: " + entry.fullPath + "\n"
res += "localURL: " + entry.localURL + "\n"
alert(res += "nativeURL: " + entry.nativeURL + "\n")
*/
var vid = document.getElementById("someID");
vid.src = entry.nativeURL;
vid.loop = true;
}), (function(error) {
alert("Video download error: source " + error.source);
alert("Video download error: target " + error.target);
}), true, {
headers: {
Authorization: "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
}
});

Contact image from Phonegap not displayed

I saw several posts related to this like Ref but not working for me . I tried like below
First method:
Directly set image source from contact image value
var myImg = document.getElementById("cimg");
myImg.src = contacts[i].photos[0].value;
this one not display the image in img tag.
Second Method:
Pass the contact image value to the fileDownload option
window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, function(fs){
fs.root.getFile("temp.jpg", {create: true, exclusive: false},
function(entry){
//alert(entry.toURL());
var fileTransfer = new FileTransfer();
fileTransfer.download(
contacts[i].photos[0].value, // the filesystem uri you mentioned
entry.fullPath,
function(entry) {
// do what you want with the entry here
console.log("download complete: " + entry.fullPath);
var src = entry.fullPath;
//$("").append('<img src="'+src+'" >');
},
function(error) {
alert("error source " + error.source);
console.log("error target " + error.target);
console.log("error code " + error.code);
console.log(error);
},
false,
null
);
}, function(e){
console.log("file create error",e);
});
}, null);
This one shows error like 07-28 07:37:56.468: E/FileTransfer(20986): {"target":"file:\/\/\/mnt\/sdcard\/Android\/data\/io.cordova.hellocordova\/cache\/temp.jpg","http_status":0,"code":3,"source":"content:\/\/com.android.contacts\/contacts\/2\/photo","exception":"read failed: EINVAL (Invalid argument)"}
07-28 07:37:56.468: E/FileTransfer(20986): java.io.IOException: read failed: EINVAL (Invalid argument)
Edit :
my phonegap contact[i].photo[0].value return like "content://com.android.contacts/contacts/1/photo"
how to resolve this one. Please help me.
please check what android version you are testing. Because there have a lot changes structures android 2.0 -> 2.2.. Can you try on android above 4.0 + ?

Where to save a PDF on Android device using FileTransfer plugin Phonegap

I am trying to download a PDF in my phonegap application and then immediately open it, but I get a File not Found error. It seems to download. Here is my code:
// Download
var url = "https://example/example.pdf";
var fileTransfer = new FileTransfer();
var uri = encodeURI(url);
var fileURL = 'cdvfile://localhost/persistent/com.mycompany.myApp/';
var fileName = 'example.pdf';
fileTransfer.download(
uri,
fileURL,
function (entry) {
alert("download complete: " + entry.fullPath);
// Open
cordova.plugins.fileOpener2.open(
fileURL + fileName,
'application/pdf',
{
error: function (errorObj) {
alert('Error status: ' + errorObj.status + ' - Error message: ' + errorObj.message + ' ' + errorObj.fileURL);
},
success: function () {
alert('file opened successfully');
}
}
);
},
function (error) {
alert("download error source " + error.source);
alert("download error target " + error.target);
alert("upload error code" + error.code);
}
);
alert('Downloading...');
I'm also wondering where is the best place to save files like this, that should be available after the app is closed?
second argument to fileTransfer.download is the location on device where you want to download pdf file.
You are setting var fileURL = 'cdvfile://localhost/persistent/com.mycompany.myApp/'; Which I believe does not exist. You can use file system plugin to first get file location on your device and then save it on device. you can use below code snapet.
var url = "https://example/example.pdf";
var uri = encodeURI(url);
//var fileURL = 'cdvfile://localhost/persistent/com.mycompany.myApp/';
// var fileName = 'example.pdf';
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
function gotFS(fileSystem) {
fileSystem.root.getDirectory("Dir_NAME", {
create: true,
exclusive: false
}, gotDirectory, fail);
}
function gotDirectory(entry) {
entry.getFile('yourFileNAme', {
create: true,
exclusive: false
}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
filePath = fileEntry.fullPath;
var fileTransfer = new FileTransfer();
fileTransfer.download(
'uri', filePath, function(entry) {
console.log("success");
//perform you launch task
}, function(error) {
console.log("error");
}, true, {});
}
I hope it will help you.
Even I am new to android but what I think that there is problem in URI
To open up a Uri in android it should have a structure like
file:///storage/....
(there should be 3 backslashes )
You can get more details here
The best place to save a pdf can be your sdcard or internal storage. Then the pdf will be available in your device even after the application closes.
If you wish to have the same pdf file, available in different devices while testing your application in different device/ or even in emulator you can save it in the assert folder of your android project.
hope this helps

Video capture in android in background in phoneGap with minimized recording screen

I tried the following code. I want to record video in background and store in SD card. I don't want to do manual start recording and stop. Is it possible to record video with or without API in PhoneGap.
I want record video in background
<html>
<head>
<title>Capture Video</title>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/json2.js"></script>
<script type="text/javascript" charset="utf-8">
// A button will call this function
function captureVideo() {
// Launch device video recording application,
// allowing user to capture up to 3 video clips
alert("captureVideo");
var options = {
limit : 2,
duration : 10
};
navigator.device.capture.captureVideo(captureSuccess, captureError,
options);
}
// Called when capture operation is finished
function captureSuccess(
mediaFiles) {
alert("captureSuccess ");
var i, len;
alert(mediaFiles.length);
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
// Called if something bad happens.
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
// Upload files to server
function uploadFile(mediaFile) {
alert("uploadFile");
var ft = new FileTransfer(), path = mediaFile.fullPath, name = mediaFile.name;
alert("path:" + path);
alert("name:" + name);
ft.upload(path, "http://my.domain.com/upload.php", function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
}, function(error) {
console.log('Error uploading file ' + path + ': ' + error.code);
}, {
fileName : name
});
}
</script>
</head>
<body>
<button onclick="captureVideo();">Capture Video</button>
<br>
</body>
</html>
document.addEventListener("deviceready", start_here, false);
function start_here(){captureVideo();}
function is called when ever app is launched and video records automatically.
and after sending again start recording...
function uploadFile(mediaFile) {
alert("uploadFile");
var ft = new FileTransfer(), path = mediaFile.fullPath, name = mediaFile.name;
alert("path:" + path);
alert("name:" + name);
ft.upload(path, "http://my.domain.com/upload.php", function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
}, function(error) {
console.log('Error uploading file ' + path + ': ' + error.code);
}, {
fileName : name
});
start_here; /*just call the instance. here is the change*/
}
Now you can record video with minimized app or even when screen is off by cordova\phonegap\ionic plugin
It's a fork, but main repo can't record video "in background" (in spite of the name).
When it starts, it automatically chooses, where to store video, by size of available space on SD and internal disk.
cordova plugin add cordova-backgroundvideo
var fileName = new Date().getTime() + '';
cordova.plugins.backgroundvideo.start(fileName, 'back', true, null, null);
cordova.plugins.backgroundvideo.stop(function (filePath) {
alert(filePath);
}, function (error) {
alert('Error ' + JSON.stringify(error));
}
);

Categories