Searched through the Overflow to see if I can spot a solution to this issue, but unfortunately nothing seems to be specific enough.
I'm building an Ionic app with a photo upload feature (using the cordova-filetransfer plugin), and have an API endpoint set up to receive the image. The Ionic JS is able to process the image successfully, but the API responds back with the "disallowed keys" error; only it's full of random garbled nonsense.
The clean_input function:
public function clean_input_keys($str)
{
$chars = PCRE_UNICODE_PROPERTIES ? '\pL' : 'a-zA-Z';
if ( ! preg_match('#^['.$chars.'0-9:_.-]++$#uD', $str))
{
exit('Disallowed key characters in global data: '.$str."\n [GLOBAL vars] \n".Kohana::debug($GLOBALS));
}
return $str;
}
The full response:
Disallowed key characters in global data: '()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚâãäåæçèéêòóôõö÷øùúÿÛ
[GLOBAL vars]
<pre>array: </pre>
The uploadImage function from the mobile app:
$scope.uploadImage = function(datetime) {
// Destination URL
var uploadUrl = "url/goes/here";
// File for Upload
var imagePath = $scope.urlForImage($scope.image);
console.log('Path: '+imagePath);
// File name only
var filename = $scope.addZero(datetime.getDate()) + $scope.addZero((datetime.getMonth() + 1)) + datetime.getFullYear() + '-' + $scope.addZero(datetime.getHours()) + $scope.addZero(datetime.getMinutes()) + '-' + $scope.incidentData.store + '-' + $scope.incidentData.location + '.jpg';
filename = filename.replace(/\s+/g, '');
console.log('Filename: '+filename);
var success = function (r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
};
var fail = function (error) {
alert("An error has occurred: Code = " + error.code);
console.log("Upload error source " + error.source);
console.log("Upload error target " + error.target);
};
var options = new FileUploadOptions();
options.fileKey = "image";
options.fileName = filename;
options.chunkedMode = false
//mimeType: "multipart/form-data",
options.mimeType = "image/jpeg";
var params = {};
params.fileName = filename;
options.params = params;
var headers = {
"API-Key": "keygoeshere",
"Content-Type": "application/x-www-form-urlencoded"
};
options.headers = headers;
var ft = new FileTransfer();
ft.upload(imagePath, uploadUrl, success, fail, options);
}
And the API endpoint function:
public function upload_image()
{
$this->authorise();
$file_temp = $_FILES['image']['tmp_name'];
$file_name = $_FILES['image']['name'];
$target_path = 'path/goes/here';
if (move_uploaded_file($file_temp, $target_path.$file_name)) {
Kohana::log('debug', 'File received: '.$_FILES['image']['name']);
Kohana::log_save();
} else {
Kohana::log('debug', 'Photo upload failed');
Kohana::log_save();
}
}
Sorry if this is a bit too much code, but I cannot work out for the life of me where this error is stemming from - any advice?
The issue turned out to be the headers: I was posting a header (Content-Type) that the plugin already sends by default; the two were clashing and causing the error.
Removing this header, leaving only the API-Key, has allowed the image to be sent.
Related
I want to resume uploading after the internet is connected again
if the internet is cutoff for short time it resumes again but if the time increased ,it wouldn't increase the progress of uploading
my Script :
document.forms["upload-vimeo"].onsubmit = function(e){
e.preventDefault();
let file = this.url.files[0];
let id= "' . $id . '";
let type= this.video_type.value;
let name= this.name.value;
let description= this.description.value;
let formdata = new FormData();
formdata.append("url", file);
formdata.append("id", id);
formdata.append("type", type);
formdata.append("name", name);
formdata.append("description", description);
let http = new XMLHttpRequest();
http.upload.addEventListener("progress", function(event){
let percent = (event.loaded / event.total) * 100;
document.querySelector("progress").value = Math.round(percent);
var element = document.getElementById("value");
element.innerHTML = Math.round(percent)+" %";
});
http.addEventListener("load", function(){
if(this.readyState == 4 && this.status == 200){
if(!this.responseText){
console.log(this.responseText);
window.location.replace("' . $url . '");
}
else{
console.log(this.responseText);
}
}
});
http.open("post", "script.php");
http.send(formdata);
}
My php is normal uploading to vimeo
any ideas to reach that ?
I'm using PHP for a project that needs to be able to upload images from a gallery. For now I'm trying this:
I'm trying to pick image from gallery using httpClient and upload it to php serve. What works from is - pick image, convert mediafile to base64, but when it comes to php it recieves image file but doesn't add it to folder and always returns failed upload.
Where am I mistaken?
Here is my code:
private async void browse_image(object sender, EventArgs e)
{
await CrossMedia.Current.Initialize();
var file = await CrossMedia.Current.PickPhotoAsync();
MF = file;
if (file == null)
return;
string[] stringSeparators = new string[] { "." };
var result = file.Path.Split(stringSeparators, StringSplitOptions.None);
img_path.Text = u.Username + code.Text + "." + result[1];
var stream = file.GetStream();
profile.Source = ImageSource.FromStream(() =>
{
return stream;
});
}
public bool convert_image_to64(){
var stream = MF.GetStream();
byte[] filebytearray = new byte[stream.Length];
stream.Read(filebytearray, 0, (int)stream.Length);
base64 = Convert.ToBase64String(filebytearray);
if(String.IsNullOrEmpty(base64)){
return false;
}
return true;
}
async Task upload_profile_page()
{
try
{
string result = "";
var postData = new List<KeyValuePair<string, string>>();
postData.Add(new KeyValuePair<string, string>("image", base64));
postData.Add(new KeyValuePair<string, string>("filename", img_path.Text));
var stringPayload = JsonConvert.SerializeObject(postData);
var content = new StringContent(stringPayload, Encoding.UTF8, "application/json");
await DisplayAlert("", content.ToString(), "ok");
HttpClient client = new HttpClient();
var response = await client.PostAsync("http://example.com/upload_app.php", content);
var FinalJSonResult =. (JArray)JsonConvert.DeserializeObject(response.Content.ReadAsStringAsync().Result);
if (FinalJSonResult.Count > 0)
{
var j = (JObject)FinalJSonResult[0];
result = j.GetValue("result").ToString();
if (result.Equals("0"))
{
await DisplayAlert("0 ->", "failed to upload", "ok");
}
else if (result.Equals("1"))
{
await DisplayAlert("1 ->", "uploaded image successffully", "ok");
}
else
{
await DisplayAlert("1 ->", result, "ok");
}
}
else
{
await DisplayAlert("Error", "Empty result" + "\n" + "size of returned array:- " + FinalJSonResult.Count.ToString(), "Ok");
}
}
catch (Exception ex)
{
await DisplayAlert("Error", ex.ToString(), "Ok");
return;
}
}
<?php // read JSon input
$data_back = json_decode(file_get_contents('php://input'));
// set json string to php variables
$base = $data_back->{"image"};
$filename = $data_back->{"filename"};
$binary=base64_decode($base);
$result1 = array();
header("Content-type: application/json");
try{ // Decode Image
$binary=base64_decode($base);
header('Content-Type: bitmap; charset=utf-8');
$result1 = array();
// Images will be saved under '.../uplodedimages' folder
$file = fopen('.../uplodedimages/'.$filename, 'wb');
// Create File
if(fwrite($file, $binary)==false){
array_push($result1,array( 'result'=>"0"));
}else{
$result1 = array();
array_push($result1,array( 'result'=>"1"));
}
fclose($file);
}catch(Exception $e) {
array_push($result1,array( 'result'=>$e));
}
echo json_encode($result1,JSON_UNESCAPED_UNICODE);
?>
I am having problems uploading a file with CordovaFileTransfer plugin in ionic.
I have sound file that has been recorded and i need help uploading it.
var targetPath = e.nativeURL;
var win = function (r) {
console.log("Code = " + r.responseCode);
console.log("Sent = " + r.bytesSent);
}
var fail = function (error) {
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=filename;
options.mimeType="audio/wav";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(targetPath, "http://example.come/upload.php", win, fail, options);
And my php script looks like this
header('Access-Control-Allow-Origin: *');
print_r($_FILES);
$new_image_name = "audio.wav";
move_uploaded_file($_FILES["file"]["tmp_name"], "/var/www/html/snappycast_uploads/files/".$new_image_name);
Have any idea what I am doing wrong??
I have a problem in uploading photo into server which is taken by camera.
I have tried to used the code in Mosync site but it doesn't work.
In the sample code below,
my app always return "Could not upload photo - error: 3"
app.uploadPhoto = function(fileURL)
{
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = app.getMimeType(options.fileName);
options.params = null;
var transfer = new FileTransfer();
transfer.upload(
fileURL,
"http://dev.mosync.com/mobilelua/PhotoGallery/upload.php",
function(result)
{
alert("Photo uploaded");
},
function(error)
{
alert("Could not upload photo - error: " + error.code);
},
options);
};
I am designing a app in phonegap. I send multiple base64 images to php webservice. Now i need to decode all those base64 images and save them into database.
I am hoping for the best solution. Thank you.
This is my code for assigning base64 values into a hidden input type.
for(i = 0; i< image.length;i++){
$('#table_postad').append('<input type="hidden" value="'+image[i]+'" name="ad_image'+i+'" class="ad_image"/>');
imageArray.push(document.getElementsByClassName("ad_image")[i].value);
}
Following is the code to connect server:
var server = 'http://example.com/webServiceForProject/';
function sendDataToServer(){
alert("access");
var datas = $("#form_description").serialize();//form_description is id for form
console.log(datas);
$.ajax({
type: 'POST',
data: datas,
url: server+'insert.php',
success: function(data){
alert(data);
},
error: function(){
alert('There was an error adding your comment');
}
});
}
this is php code:
<?php
define('UPLOAD_DIR', 'images/');
$adPhotos = array();
$i=0;
while(isset($_POST["ad_image".$i])){
array_push($adPhotos,($_POST["ad_image".$i]));
$i++;
echo($adPhotos[i]);
}
$j = 0;
while(sizeof($adPhotos)){
$adPhotos[$j]= str_replace('data:image/png;base64,', '', $adPhotos[$j]);
$adPhotos[$j]= str_replace(' ', '+', $adPhotos[$j]);
$file[$j] = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file[$j], $data[$j]);
j++;
}
//insert code here.....
?>
Use php's base64_decode to decode the image and save it to your database (e.g. with mysql_query and an INSERT INTO...-statement.
Ram, you don't have to convert images to base64. Please use this code.
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {}
function browseImage() {
navigator.camera.getPicture(uploadPhoto, function(message) {
alert('get picture failed');
},{
quality: 80,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
}
);
}
function uploadPhoto(imageURI) {
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI, "http://example.com/api/upload.php", win, fail, options);
}
function win(r) {
console.log("Response Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
}
function fail(error) {
console.log("Error: Code = " = error.code);
}
</script>
<input type="button" onclick= "browseImage()" value="Browse Image" />
//Server: PHP code to upload file
$img_name = $time."jpg";
if(move_uploaded_file($_FILES["file"]["tmp_name"], "folder/".$img_name)){ //upload files in location folder/
//use mysql query to save the filename. (mysql_query("insert into tbl_name(image) values('$img_name')"))
}