I am new to iphone and phonegap also. Now i want to create file in iphone using phonegap. I followed the below link:
"http://docs.phonegap.com/en/2.0.0/cordova_file_file.md.html#File"
In this link there is one html file with javascript. So i followed the coding. When i run that coding i got the output only in html tag content.
I have attach that coding with my output.
<!DOCTYPE html>
<html>
<head>
<title>FileReader Example</title>![enter image description here][1]
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is ready
//
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.file(gotFile, fail);
}
function gotFile(file){
readDataUrl(file);
readAsText(file);
}
function readDataUrl(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as data URL");
console.log(evt.target.result);
};
reader.readAsDataURL(file);
}
function readAsText(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as text");
console.log(evt.target.result);
};
reader.readAsText(file);
}
function fail(error) {
console.log(error.code);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Read File</p>
</body>
</html>
"TestPhonegapApp[9589:707] CDVPlugin class CDVDevice (pluginName: Device) does not exist.
2012-09-11 12:02:13.719 TestPhonegapApp[9589:707] ERROR: Plugin 'Device' not found, or is not a CDVPlugin. Check your plugin mapping in Cordova.plist.
2012-09-11 12:02:13.722 TestPhonegapApp[9589:707] FAILED pluginJSON = {"className":"Device","methodName":"getDeviceInfo","arguments":["Device1"]}"
Related
I have this html code (below), which works perfectly as a hosted file (meaning the code is working) -
<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
<!--<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>-->
<script>
var ThunkableWebviewerExtension = (function () {
const postMessageToWebview = (message) => {
if (window.ReactNativeWebView) {
window.ReactNativeWebView.postMessage(message);
} else {
window.parent.postMessage(message, '*');
}
};
const getReceiveMessageCallback = (fxn, hasReturnValue) => (event) => {
if (typeof fxn === 'function') {
if (event.data) {
let dataObject;
try {
dataObject = JSON.parse(event.data);
} catch (e) {
// message is not valid json
}
if (dataObject && dataObject.type === 'ThunkablePostMessage' && hasReturnValue) {
fxn(dataObject.message, (returnValue) => {
const returnMessageObject = { type: 'ThunkablePostMessageReturnValue', uuid: dataObject.uuid, returnValue };
postMessageToWebview(JSON.stringify(returnMessageObject));
});
} else if (!hasReturnValue && (!dataObject || dataObject.type !== 'ThunkablePostMessage')) {
fxn(event.data);
}
}
}
};
return {
postMessage: postMessageToWebview,
receiveMessage: function(fxn) {
const callbackFunction = getReceiveMessageCallback(fxn, false);
document.addEventListener('message', callbackFunction, false);
window.addEventListener('message', callbackFunction, false);
},
receiveMessageWithReturnValue: function(fxn) {
const callbackFunction = getReceiveMessageCallback(fxn, true);
document.addEventListener('message', callbackFunction, false);
window.addEventListener('message', callbackFunction, false);
},
};
})();
</script>
</head>
<body>
<input type="file" name="inputfile" id="inputfile">
<br>
<pre id="output"></pre>
<script type="text/javascript">
document.getElementById('inputfile')
.addEventListener('change', function() {
var fr=new FileReader();
fr.onload=function(){
//document.getElementById('output').textContent=fr.result;
var msg = fr.result;
ThunkableWebviewerExtension.postMessage(msg);
}
fr.readAsText(this.files[0]);
})
</script>
</body>
</html>
What I want to do is, turn this whole code into a long URL, and I found that by using 'data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>' at the start, then adding the code.
So the HTML url would become something like - 'data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><!DOCTYPE html><html><head> ...'
I can see the file upload button, and even can select and upload a file. But, the script parts are not working - I am unable to catch the error here 😪
Kindly guide/advice me here... Thanks!
After experimenting a little bit, I think the problem might be that you haven't url-encoded it. Try using this instead of just pasting in the whole thing directly
(or copy it from here)
data:text/html,%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%20%20%20%20%3Ctitle%3ERead%20Text%20File%3C/title%3E%0A%20%20%20%20%3C!--%3Cscript%20src=%22https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js%22%20type=%22text/javascript%22%3E%3C/script%3E--%3E%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20var%20ThunkableWebviewerExtension%20=%20(function%20()%20%7B%0A%20%20%20%20%20%20const%20postMessageToWebview%20=%20(message)%20=%3E%20%7B%0A%20%20%20%20%20%20%20%20if%20(window.ReactNativeWebView)%20%7B%0A%20%20%20%20%20%20%20%20%20%20window.ReactNativeWebView.postMessage(message);%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20window.parent.postMessage(message,%20'*');%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D;%0A%20%20%20%20%0A%20%20%20%20%20%20const%20getReceiveMessageCallback%20=%20(fxn,%20hasReturnValue)%20=%3E%20(event)%20=%3E%20%7B%0A%20%20%20%20%20%20%20%20if%20(typeof%20fxn%20===%20'function')%20%7B%0A%20%20%20%20%20%20%20%20%20%20if%20(event.data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20let%20dataObject;%0A%20%20%20%20%20%20%20%20%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20dataObject%20=%20JSON.parse(event.data);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20catch%20(e)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20//%20message%20is%20not%20valid%20json%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(dataObject%20&&%20dataObject.type%20===%20'ThunkablePostMessage'%20&&%20hasReturnValue)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20fxn(dataObject.message,%20(returnValue)%20=%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20returnMessageObject%20=%20%7B%20type:%20'ThunkablePostMessageReturnValue',%20uuid:%20dataObject.uuid,%20returnValue%20%7D;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20postMessageToWebview(JSON.stringify(returnMessageObject));%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20if%20(!hasReturnValue%20&&%20(!dataObject%20%7C%7C%20dataObject.type%20!==%20'ThunkablePostMessage'))%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20fxn(event.data);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D;%0A%20%20%20%20%0A%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20postMessage:%20postMessageToWebview,%0A%20%20%20%20%20%20%20%20receiveMessage:%20function(fxn)%20%7B%0A%20%20%20%20%20%20%20%20%20%20const%20callbackFunction%20=%20getReceiveMessageCallback(fxn,%20false);%0A%20%20%20%20%20%20%20%20%20%20document.addEventListener('message',%20callbackFunction,%20false);%0A%20%20%20%20%20%20%20%20%20%20window.addEventListener('message',%20callbackFunction,%20false);%0A%20%20%20%20%20%20%20%20%7D,%0A%20%20%20%20%20%20%20%20receiveMessageWithReturnValue:%20function(fxn)%20%7B%0A%20%20%20%20%20%20%20%20%20%20const%20callbackFunction%20=%20getReceiveMessageCallback(fxn,%20true);%0A%20%20%20%20%20%20%20%20%20%20document.addEventListener('message',%20callbackFunction,%20false);%0A%20%20%20%20%20%20%20%20%20%20window.addEventListener('message',%20callbackFunction,%20false);%0A%20%20%20%20%20%20%20%20%7D,%0A%20%20%20%20%20%20%7D;%0A%20%20%20%20%7D)();%0A%20%20%20%20%3C/script%3E%0A%3C/head%3E%0A%0A%3Cbody%3E%0A%20%20%20%20%3Cinput%20type=%22file%22%20name=%22inputfile%22%20id=%22inputfile%22%3E%0A%20%20%20%20%3Cbr%3E%0A%0A%20%20%20%20%3Cpre%20id=%22output%22%3E%3C/pre%3E%0A%20%20%20%20%0A%20%20%20%20%3Cscript%20type=%22text/javascript%22%3E%0A%20%20%20%20%20%20%20%20document.getElementById('inputfile')%0A%20%20%20%20%20%20%20%20%20%20%20%20.addEventListener('change',%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20fr=new%20FileReader();%0A%20%20%20%20%20%20%20%20%20%20%20%20fr.onload=function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20//document.getElementById('output').textContent=fr.result;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20msg%20=%20fr.result;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ThunkableWebviewerExtension.postMessage(msg);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20fr.readAsText(this.files%5B0%5D);%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%3C/script%3E%0A%3C/body%3E%0A%3C/html%3E%0A
But I could be wrong -- I'm not very experienced with javascript
I'm trying to understand the file system of android with PhoneGap, but whatever I try, it won't really do much.
Here's an example I found on the internet (I changed console log to writing because I can't see the logs):
<!DOCTYPE html>
<html>
<head>
<title>FileReader Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/index.js"></script>
<div id="yay">Good: </div>
<div id="aww">Bad: </div>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.file(gotFile, fail);
}
function gotFile(file){
readDataUrl(file);
readAsText(file);
}
function readDataUrl(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
document.getElementById('yay').innerHTML += "Read as data URL";
document.getElementById('yay').innerHTML += evt.target.result;
};
reader.readAsDataURL(file);
}
function readAsText(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
document.getElementById('yay').innerHTML += "Read as text";
document.getElementById('yay').innerHTML += evt.target.result;
};
reader.readAsText(file);
}
function fail(evt) {
document.getElementById('aww').innerHTML += evt.target.error.code;
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Read File</p>
<div id="yay"></div>
<div id="aww"></div>
</body>
</html>
I really hope you can help me! I need to write a certain file and read that later when the user has no internet, that's all really...
I checked all the wikis and stuff but the cordova github page really doesn't help, as far as I can see..
Just found out about this amazing API by #YishaiG. Works perfectly: fixed my issues!
i am using phonegap for android application to get external card,
i am using this code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="cordova.js" type="text/javascript"></script>
<script type="text/javascript">
window.appRootDirName = "app";
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("device is ready");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
alert(window.appRootDir.fullPath);
}
function fail() {
console.log("failed to get filesystem");
}
function gotFS(fileSystem) {
console.log("filesystem got");
window.fileSystem = fileSystem;
fileSystem.root.getDirectory(window.appRootDirName, {
create: true,
exclusive: false
}, dirReady, fail);
}
function dirReady(entry) {
window.appRootDir = entry;
console.log("application dir is ready");
}
</script>
</head>
<body>
</body>
</html>
Its returns file://mnt/sdcard/app - this is my internal phone storage path
the external path is file://mnt/ext_card/app
How can i get external card path in phonegap?
Finally i found we can't get the external SD Card Path,
Environment.getExternalStorageState();
Its returns only Internal SD Card path
Reference:
http://developer.android.com/reference/android/os/Environment.html#getExternalStorageDirectory()
The HTML file has 4 buttons that record, stop recording the voice, and play, stop playing it. the code looks like this.
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="scripts/cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$("#record").on("click", function(){
alert("record start");
window.plugins.VoicePlugin.record(function(){alert("yo");},
function(){alert("yol");},
"voice.3gp");
});
$("#stoprecord").on('click', function(){
alert("record stop");
window.plugins.VoicePlugin.stoprecord(function(){},
function(){},
"voice.3pg");
});
$("#play").on("click", function(){
alert("play");
window.plugins.VoicePlugin.play(function(){},
function(){},
"voice.3pg");
});
$("#stopplay").on("click", function(){
alert("stop play");
window.plugins.VoicePlugin.stopplay(function(){},
function(){},
"voice.3pg");
});
});
</script>
</head>
<body>
<button id="record">Start Recording</button>
<button id="stoprecord">Stop Recording</button>
<button id="play">Start Playing</button>
<button id="stopplay">Stop Playing</button>
</body>
</html>
The Android Plugin part is
package com.saxoo.voice;
import java.io.IOException;
import org.apache.cordova.api.Plugin;
import org.apache.cordova.api.PluginResult;
import org.json.JSONArray;
import android.media.MediaPlayer;
import android.media.MediaRecorder;
import android.util.Log;
/**
* #author sbapp008
*
*/
public class VoicePlugin extends Plugin {
/* (non-Javadoc)
* #see org.apache.cordova.api.Plugin#execute(java.lang.String, org.json.JSONArray, java.lang.String)
*/
public static final String Record = "record";
public static final String Play = "play";
public static final String Stopplaying = "stopplaying";
public static final String Stoprecording = "stoprecording";
private static final String LOG_TAG = "AudioRecordTest";
private static String mFileName = null;
private static MediaRecorder mRecorder = null;
private static MediaPlayer mPlayer = null;
#Override
public PluginResult execute(String action, JSONArray data, String callbackId) {
PluginResult result = null;
if(Record.equals(action)){ //data에 filename
mRecorder = new MediaRecorder();
mRecorder.setAudioSource(MediaRecorder.AudioSource.MIC);
mRecorder.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP);
mRecorder.setOutputFile(mFileName);
mRecorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);
try {
mRecorder.prepare();
} catch (IOException e) {
Log.e(LOG_TAG, "prepare() failed");
}
mRecorder.start();
} else if(Play.equals(action)){ //data에 filename
mPlayer = new MediaPlayer();
try {
mPlayer.setDataSource(mFileName);
mPlayer.prepare();
mPlayer.start();
} catch (IOException e) {
Log.e(LOG_TAG, "prepare() failed");
}
} else if(Stopplaying.equals(action)){
mPlayer.release();
mPlayer = null;
} else{
mRecorder.stop();
mRecorder.release();
mRecorder = null;
}
return null;
}
}
The point is, i should stay in an Activity that record, stop recording, play and stop playing the voice. If I use phonegap, since it just send some strings via plugin, the MediaRecorder and MediaPlayer object is created and destroyed each time. I push the record button which is in html, the MediaRecorder object is created, but pushing the stop recording button cannot stop the MediaRecorder object that is just created. Is there any solution for this problem?
With Phonegap I record voice and play recording voice without addition plugins.
I only conect plugin of Phonegap Media to my app like this:
app/res/xml/config.xml
<plugin name="Media" value="org.apache.cordova.AudioHandler" />
app/AndroidManifest.xml
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
Code there:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
var deviceready = false;
var mediaVar = null;
var recordFileName = "recording.wav";
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
deviceready = true;
}
$(document).ready(function(){
//validation to check if device is ready is skipped
$("#recordBtn").click(function(){
record();
});
$("#playBtn").click(function(){
play();
});
$("#stopBtn").click(function(){
stop();
});
});
function record()
{
if (mediaVar != null) {
mediaVar.release();
}
createMedia(function(){
status = "recording";
mediaVar.startRecord();
},onStatusChange);
}
function createMedia(onMediaCreated, mediaStatusCallback){
if (mediaVar != null) {
onMediaCreated();
return;
}
if (typeof mediaStatusCallback == 'undefined')
mediaStatusCallback = null;
mediaVar = new Media(recordFileName, function(){
log("Media created successfully");
}, onError, mediaStatusCallback);
onMediaCreated();
}
function stop()
{
if (mediaVar == null)
return;
if (status == 'recording')
{
mediaVar.stopRecord();
log("Recording stopped");
}
else if (status == 'playing')
{
mediaVar.stop();
log("Play stopped");
}
else
{
log("Nothing stopped");
}
status = 'stopped';
}
function play()
{
createMedia(function(){
status = "playing";
mediaVar = new Media('/sdcard/'+recordFileName, function(){
log("Media created successfully");
}, onError);
mediaVar.play();
});
}
function onStatusChange()
{
}
function onSuccess()
{
//do nothing
}
function onError(err)
{
if (typeof err.message != 'undefined')
err = err.message;
alert("Error : " + err);
}
function log(message)
{
console.info(message);
}
</script>
</head>
<body onload="onBodyLoad()">
Recorder<br>
<input type="button" name="recordBtn" id="recordBtn" value="Record">
<input type="button" name="stopBtn" id="stopBtn" value="Stop">
<input type="button" name="playBtn" id="playBtn" value="Play">
</body>
</html>
On Android devices, the PhoneGap media object has the following important behaviors that are not well documented (http://software.intel.com/en-us/articles/media-sample-using-phonegap#id_android):
"my_audio = new Media('myRecording100.wav', onMediaCallSuccess,
onMediaCallError)": when "myRecording100.wav" does not exist, it
will create the file; when it exists, it opens it.
"my_audio.stopRecord()": when "stopRecord()" is called, the .wav
media file is moved to "/sdcard" folder. So when checking if previous
recorded .wav exists, the code should look under "/sdcard" folder. If
it does exist, it should open the file from
"/sdcard/myRecording100.wav".
Hope this helps you.
I am trying to use the HTML5 file API and jQuery to show the content of a file, but it is not working. I am really new to jQuery, so the problem is probably with my code.
Here is the code I'm using:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<input type="file" id="file" /> </br>
<textarea id="list"></textarea> </br>
<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
alert("Si esta soportado el API!");
} else {
alert('The File APIs are not fully supported in this browser.');
}
var manejarArchivos = function(archivo) {
var reader = new FileReader();
reader.onload = function(event) {
var content = event.target.result;
alert(content);
};
reader.readAsText(archivo);
}
try {
$('#file').change(function() {
manejarArchivos(this.files);
});
}
catch (e) {
alert(e);
}
</script>
</body>
</html>
How can I get this block of code to display the contents of my archivo file?
In your code archivo is a FileList, not a File. You should do something like:
reader.readAsText(archivo[0]);
instead of
reader.readAsText(archivo);