I use image picker to get photo from camera then upload it to the server with base64Encode, like this
http.post( api('file/update_pic_item/2'), body: data, headers: {HttpHeaders.authorizationHeader: prefs.getString('token'), "Accept": "application/json", "Content-Type": "application/x-www-form-urlencoded"}).then((response) async {
toast('Success');
Map res = json.decode(response.body); print(res);
});
By server I got this message
The pic1 must be an image., The pic1 must be a file of type: jpeg, jpg, bmp, png
I use lumen for my backend,
$this->validate($request, [
'pic1' => 'nullable|image|mimes:jpeg,jpg,bmp,png|max:10240', ]);
$upload_path = 'images/items';
if ($request->hasFile('pic1')) {
$pic1 = $request->file('pic1');
$ext1 = $pic1->getClientOriginalExtension();
if ($pic1->isValid()) {
$pic_name = Carbon::now()->format('YmdHs') . "a." . $ext1;
$pic1->move($upload_path, $pic_name);
$item->update(['pic1' => $pic_name]);
}
}
How to solve this problem? thank you so much for your help
Use this code to upload image on server
Future upload(File imageFile)async{
var stream= new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
var length= await imageFile.length();
var uri = Uri.parse('imageUrl');
var request = new http.MultipartRequest("POST", uri);
var imageUri = 'salati_${widget.user.user_id}_${DateTime.now().millisecondsSinceEpoch}'+imageFile.path.substring(imageFile.path.lastIndexOf("."));
var multipartFile = new http.MultipartFile("image", stream, length, filename: basename(imageUri));
request.files.add(multipartFile);
var response = await request.send();
if(response.statusCode==200){
print("Image Uploaded");
}else{
print("Upload Failed");
}
}
Related
we created an ionic app which captures video but we are facing challenges saving this video to a directory in on the server. I have searched online for this but couldn't find a tutorial about it.
On the code below, the video name was saved in the videos folder instead of the actual video
//Upload video php part
$postjson = json_decode(file_get_contents('php://input'), true);
if(!empty($postjson['video'])){
$video = $postjson['video'];
$now = DateTime::createFromFormat('U.u', microtime(true));
$id = $now -> format('YmdHisu');
$upload_folder = "videos";
$path ="$upload_folder/$id.mp4";
$actualpath = "http://url/incident/api/$path";
file_put_contents($path,$video);
}
On the ionic part, I have this:
captureVideo() {
let options: CaptureVideoOptions = {
limit: 1,
duration: 120
}
this.mediaCapture.captureVideo(options).then((res: MediaFile[]) => {
let capturedFile = res[0];
let fileName = capturedFile.name;
let dir = capturedFile['localURL'].split('/');
dir.pop();
let fromDirectory = dir.join('/');
var toDirectory = this.file.dataDirectory;
this.ivideo = fileName;
this.viddir = dir;
console.log("video captured "+this.ivideo);
this.file.copyFile(fromDirectory , fileName , toDirectory , fileName).then((res) => {
this.storeMediaFiles([{name: fileName, size: capturedFile.size}]);
},err => {
console.log('err: ', err);
});
},
(err: CaptureError) => console.error(err));
}
Sending to the server using post method in code summary:
var headers = new Headers();
headers.append('Content-Type', 'application/json' );
//headers.append('Access-Control-Allow-Methods', 'POST' );
headers.append('Content-Type', 'multipart/form-data');
let options = new RequestOptions({ headers: headers });
let data = {
aksi : 'insert_incident',
title: this.title.value,
descr: this.descr.value,
images : this.cameraData,
video: this.ivideo,
};
this.http.post(this.global.serverAddress+"api/getCategories.php", data, options)
.map(res => res.json())
.subscribe(res => {
loader.dismiss()
if(res=="Done"){
let alert = this.alertCtrl.create({
title:"Done",
subTitle: "Sent",
buttons: ['OK']
});
alert.present();
}else
{
let alert = this.alertCtrl.create({
title:"ERROR",
subTitle:(res),
buttons: ['OK']
});
alert.present();
}
}
I have code that sends an image to my server and everything works fine. However i am now truing to send a file to my server using an input tag in ionic However i cant seem to get it working.
I get an error from the php file saying undefined index 'file'
HTML
<ion-col>
<ion-label>Add a File</ion-label>
<ion-input type='file' [(ngModel)]="fileName"></ion-input>
</ion-col>
TS file
addFile() {
this.addService.addFile(this.fileName).subscribe(res => {
console.log(res);
});
}
service
addFile(file) {
let headers = new HttpHeaders();
// headers = headers.set('Content-Type', 'application/json');
headers = headers.set('Authorization', '' + this.token);
const formData = new FormData();
formData.append('file', file);
return this.http.post<any>('http://domain.fileUpload.php', formData, {headers});
}
PHP API
$target_path = "files/";
$target_path = $target_path . basename( $_FILES['file']['name']);
$findDate = date("Y-m-d");
if (move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
header('Content-type: application/json');
$data = ['success' => true, 'message' => 'Upload and move success'];
echo json_encode( $data );
} else {
header('Content-type: application/json');
$data = ['success' => false, 'message' => 'There was an error uploading the file (folder), please try again!'];
echo json_encode( $data );
}
uploadMethod
uploadFile: ''; // from ngModel
fileUpload(path) {
const fileTransfer: FileTransferObject = this.transfer.create();
let options: FileUploadOptions = {
fileKey: 'file',
fileName: '.png',
chunkedMode: false,
};
console.log(this.uploadFile);
fileTransfer
.upload(this.uploadFile, 'http://domain/fileUpload.php',
options
)
.then(
data => {
console.log(data + 'Uploaded Successfully');
// console.log(JSON.parse(data.));
// let res = JSON.parse(data);
let res = data;
if (res['success']) {
console.log('True');
}
},
err => {
console.log(err);
}
);
}
Blow is the Example Code:
import { Platform } from 'ionic-angular';
checkPlatform: boolean = fasle;
constructor(public plt: Platform) {
if (this.plt.is('ios')) {
this.checkPlatform == true; // if platform ios this will be true
}
if (this.plt.is('android')) {
this.checkPlatform == true; // if platform androidthis will be true
}
}
imageUpload(path) {
const fileTransfer: FileTransferObject = this.transfer.create();
let options: FileUploadOptions = {
fileKey: 'image',
fileName: '.png',
chunkedMode: false,
//mimeType: "image/jpeg",
}
fileTransfer.upload(path, 'https://yourDomain.com/api/imageUpload', options)
.then((data) => {
console.log(data+" Uploaded Successfully");
console.log(JSON.parse(data.response));
let res = JSON.parse(data.response);
if (res.success == true) {
// do whats ever you want to do
}
}, (err) => {
console.log(err);
});
}
Pass the cordova file path as parameter in this function.
inside you HTML template show buttons or input type like this:
<input type="file" *ngIf="checkPlatform == true">
if you see this you can notice allowed types are :
export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time';
if you want to upload files follow this link i think you will find the answer
I check your code and as i see file added to FormData is filename with string Type, not File or Blob Data Type. So in this case it will not send file into $_FILES, it actually send its value to $_POST in your PHP Server. In summary, File and Blob Type will be sent to $_FILES, other data types will be sent to the appropriate global variables.
There is also a good example on how to validate your file in PHP Server: https://www.php.net/manual/en/features.file-upload.php
I'm trying to upload images through TinyMCE but am getting "HTTP Error: 403" shown in the editor itself. I've taken the code from the website for both the script and the php page respectively:
tinymce.init({
selector: "textarea",
plugins: "link image",
height:300,
setup: function (editor) {
editor.on('change', function () {editor.save();});
},
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'queries/editorImageUpload.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
});
And then within 'editorImageUpload.php', I think the problem is to do with the $accepted_origins part as its returning a 403 error:
$accepted_origins = array("https://localhost", "https://77.104.172.194");
$imageFolder = "pictures/Test/";
reset ($_FILES);
$temp = current($_FILES);
if (is_uploaded_file($temp['tmp_name'])){
if (isset($_SERVER['HTTP_ORIGIN'])) {
// same-origin requests won't set an origin. If the origin is set, it must be valid.
if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
} else {
header("HTTP/1.1 403 Origin Denied");
return;
}
}
Any insight on this would be very helpful.
First of all you have two problems with your code
-your php code does not transfer the image to the server
-in your php code you are making array of $accepted_origins with "https://localhost" and you forget the unsecured version "http://localhost"
so the fastest fix for your problem is to write valid php code that will transfer the image to your server and return the image full path for the editor here is the php code
editorImageUpload.php
<?php
$ds = DIRECTORY_SEPARATOR;
$storeFolder = 'images';
if (!empty($_FILES))
{
$tempFile = $_FILES['file']['tmp_name'];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
$file_name = substr(md5(rand(1, 213213212)), 1, 5) . "_" . str_replace(array('\'', '"', ' ', '`'), '_', $_FILES['file']['name']);
$targetFile = $targetPath. $file_name;
if(move_uploaded_file($tempFile,$targetFile)){
die( $_SERVER['HTTP_REFERER']. $storeFolder . "/" . $file_name );
}else{
die('Fail');
}
}
?>
and in your javascript callback you have to check for the xhr.response not the xhr.responseText since you are dying with the image full path
Tinymce code
tinymce.init({
selector: "textarea",
plugins: "link image",
height:300,
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'editorImageUpload.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
console.log(xhr.response);
//your validation with the responce goes here
success(xhr.response);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
});
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')"))
}