Hello
I’ve navigate to all the forum and documentation and i’ve find the way of uploading an image file to the php server using localhost, but not in the compiled app.
Running the “npm run serve” it’s works propertly on localhost
But I compile the app with “npm run build-cordova-android” and install it in my phone android device and the file transfer doesn’t work…
I don’t know if i need any permissions to pick a file to upload it through the app.
Anyway i can’t manage yet the pemissions.
I’ve try to install the NeoLSN/cordova-plugin-android-permissions,
with: cordova plugin add cordova-plugin-android-permissions
-> this solved here: How to add cordova plugin with F7
but when i execute this in cmd, inside my application folder it send me the text:
Current working directory is not a Cordova-based project.
I’ve made the proyect with:
framework7 create
and selected Cordova app
so i have compile it with
npm run build-cordova-android
Every other request i’ve made in the app works propertly but not the file one. I’ve try 2 different codes and both working in localhost.
Maybe this is not a permission question…
I can paste here the code…
<template>
<div class="page" data-name="form">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Form</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Subir foto test</div>
<form>
<div class="list no-hairlines-md">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Subir foto</div>
<div class="item-input-wrap">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
</div>
</div>
</li>
<li>
<a href="#" class="col button button-round button-fill" @click="signIn">Upload image</a></li>
<li>
</ul>
</div>
</form>
</div>
</div>
</template>
<script>
return {
methods: {
signIn: function () {
var $ = this.$;
var self = this;
var app = this.$app;
var router = this.$router;
var varfileToUpload=document.getElementById('fileToUpload').files[0];
var FData = new FormData();
FData.append('fileToUpload',varfileToUpload); // this is main row
var achus = app.request({
url: 'http://url/upload_img.php',
method: 'POST',
data: FData,
cache: false,
dataType: 'application/json',
crossDomain: true,
contentType: 'multipart/form-data',
processData: true,
success: function (data){
//console.log(data);
}
});
console.log(achus);
achus.onload = function (e) {
if (achus.readyState === 4) {
if (achus.status === 200) {
app.dialog.alert(" 1-Response Text: " + achus.responseText + " 1-Status Text: " + achus.statusText, function () {
app.loginScreen.close();
router.back();
})
//console.log(achus.responseText);
} else {
app.dialog.alert(" 2-Response Text: " + achus.responseText + " 2-Status Text: " + achus.statusText, function () {
app.loginScreen.close();
router.back();
})
//console.error(achus.statusText);
}
}
};
achus.onerror = function (e) {
app.dialog.alert("Error name: " + e.name + " 3-Response Text: " + achus.responseText + " 3-Status Text: " + achus.statusText, function () {
app.loginScreen.close();
router.back();
})
//console.error(achus.statusText);
};
}
}
}
</script>
This works propertly on localhost:8080 but not in the android phone with compiled APP…
In the APP it shows the alert 3 with undefined in e.name and “” in both responseText and statusText when i select a file and press the uploading buttom.
Here the PHP:
<?php
header('Access-Control-Allow-Origin: *');
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists: " . $target_file;
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed: " . $imageFileType;
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
I’ve a simple code for the image upload working too in localhost but not in the app:
<template>
<div class="page" data-name="form">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Form</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Subir foto test</div>
<form>
<div class="list no-hairlines-md">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Id</div>
<div class="item-input-wrap">
<input type="text" id="id" placeholder="Una id"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Subir foto</div>
<div class="item-input-wrap">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
</div>
</div>
</li>
<li>
<a href="#" class="col button button-round button-fill" @click="signIn">Upload image</a></li>
<li>
</ul>
</div>
</form>
</div>
</div>
</template>
<script>
return {
methods: {
signIn: function () {
var $ = this.$;
var self = this;
var app = this.$app;
var router = this.$router;
var f=document.getElementById('fileToUpload').files[0]; /// form input type="file"
var id=document.getElementById('id').value; /// form input type="number"
var FData = new FormData();
FData.append('fileToUpload',f); /// for file object (on server in $_FILES['files'])
FData.append('id',id); /// for other data (on server in $_POST['id'])
var achus = app.request.post('http://url/prb_login/upload_img.php', FData, function (data) {
//console.log(data);
});
console.log(achus);
achus.onload = function (e) {
if (achus.readyState === 4) {
if (achus.status === 200) {
app.dialog.alert(" 1-Response Text: " + achus.responseText + " 1-Status Text: " + achus.statusText, function () {
app.loginScreen.close();
router.back();
})
//console.log(achus.responseText);
} else {
app.dialog.alert(" 2-Response Text: " + achus.responseText + " 2-Status Text: " + achus.statusText, function () {
app.loginScreen.close();
router.back();
})
//console.error(achus.statusText);
}
}
};
achus.onerror = function (e) {
app.dialog.alert("Error name: " + e.name + " 3-Response Text: " + achus.responseText + " 3-Status Text: " + achus.statusText, function () {
app.loginScreen.close();
router.back();
})
//console.error(achus.statusText);
};
}
}
}
</script>
Both code examples working on localhost and upload the imagefile propertly.
This last code don’t opent any dialog.alert… in the app: do nothing when butom to upload the image is pressed
(i do nothing with the id parameter in the PHP, it’s for testing only how to pass another parameter)
The PHP code is the same for both code examples.
After managing how to upload the image i’ll store the image path and some other user values and so in the database; i now know how to do that… but first i need to solve uploading…
Thanks in advance
**NOTE: I’ve been searching… Maybe i need cordova plugin file transfer??? 
How can I install a new cordova plugin in framework7?? -> this solved here: How to add cordova plugin with F7
, i’ve seen it’s deprecated after coding) but only when i know the URL… the problem is the input type file can’t give the URL…
