I'm working on uploading a file to a server using the cordova-file-transfer plugin. I know my file Upload works when using the browser to select a file yet I'm not entirely sure with the app since it's a relatively new way of doing it for me without form submissions.
EDIT: The below code is modified and is what was successful for me at the time after following #kay27's advice. The solution was to use params to POST the data to the awaiting upload handler.
function uploadFile() {
function success(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
}
function fail(error) {
console.log("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
/* Destination of file */
var url = encodeURI("http://someURL/yourPHPUploadFile.php");
var fileURI = "file:///storage/emulated/0/Android/data/com.yourPackageName/fileToUpload";
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
options.mimeType = "text/csv";
var params = new Object();
//allows you to POST the data to server side script
params.fileName = options.fileName;
options.params = params;
var ft = new FileTransfer();
ft.upload(fileURI, url, success, fail, options);
}
The edited PHP form
<?php
header('Access-Control-Allow-Origin: *');
$location = "uploads/";
$uploadfile = $_POST['fileName'];
$uploadfilename = $_FILES['file']['tmp_name'];
if (move_uploaded_file($uploadfilename, $location . '/' . $uploadfile)) {
echo 'File successfully uploaded!';
} else {
echo 'Upload error!';
}
?>
For my particular issue, the newer way of defining the params worked. The solution can be seen here on Simon MacDonald's answer. I've edited the code above with the final solution that allowed me to upload.
Related
I am developing an application for sharing photos, I used ionic for the mobile part and the php for the backend part. But I have a problem when I upload a file that exceeds 2M.
Thank you very much for your good day.
This is my code:
//PHP backend : upload.php
<?php
header('Access-Control-Allow-Origin: *');
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['file']['name']);
if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
echo "Upload and move success";
} else{
echo $target_path;
echo "There was an error uploading the file, please try again!";
}
header ("Connection: close");
?>
// Ionic js
$scope.selectPicture = function(sourceType) {
var options = {
quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: sourceType,
saveToPhotoAlbum: false//,
//targetWidth: 800,
//targetHeight: 800
};
$cordovaCamera.getPicture(options).then(function(imagePath) {
// Grab the file name of the photo in the temporary directory
var currentName = imagePath.replace(/^.*[\\\/]/, '');
//Create a new name for the photo
var d = new Date(),
n = d.getTime(),
newFileName = n + ".jpg";
// If you are trying to load image from the gallery on Android we need special treatment!
if ($cordovaDevice.getPlatform() == 'Android' && sourceType === Camera.PictureSourceType.PHOTOLIBRARY) {
window.FilePath.resolveNativePath(imagePath, function(entry) {
window.resolveLocalFileSystemURL(entry, success, fail);
function fail(e) {
console.error('Error: ', e);
}
function success(fileEntry) {
var namePath = fileEntry.nativeURL.substr(0, fileEntry.nativeURL.lastIndexOf('/') + 1);
// Only copy because of access rights
$cordovaFile.copyFile(namePath, fileEntry.name, cordova.file.dataDirectory, newFileName).then(function(success){
$scope.image = newFileName;
}, function(error){
$scope.showAlert('Error', error.exception);
});
};
}
);
} else {
var namePath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
// Move the file to permanent storage
$cordovaFile.moveFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(function(success){
$scope.image = newFileName;
}, function(error){
$scope.showAlert('Error', error.exception);
});
}
},
function(err){
// Not always an error, maybe cancel was pressed...
})
};
// Returns the local path inside the app for an image
$scope.pathForImage = function(image) {
if (image === null) {
return '';
} else {
return cordova.file.dataDirectory + image;
}
};
$scope.uploadImage = function() {
// Destination URL
var url = "http://myssite.com/upload.php";
// File for Upload
var targetPath = $scope.pathForImage($scope.image);
// File name only
var filename = $scope.image;;
var options = {
fileKey: "file",
fileName: filename,
chunkedMode: false,
mimeType: "multipart/form-data",
params : {'fileName': filename},
headers : { Connection: "close"}
};
$cordovaFileTransfer.upload(url, targetPath, options).then(function(result) {
console.log("SUCCESS: " + JSON.stringify(result.response));
}, function (err) {
console.log("ERROR: " + JSON.stringify(err));
}, function (progress) {
$timeout(function () {
$scope.downloadProgress = (progress.loaded / progress.total) * 100;
console.log("progress: " + progress + " dddd "+JSON.stringify(progress));
console.log("mytime "+$scope.downloadProgress);
$scope.progressval = $scope.downloadProgress;
});
});
My Config : upload max file size : 40M
post max size : 40M
this is my error : ERROR: {"code":3,"source":"file:///data/user/0/com.ionicframework.sample374926/files/1493805852934.jpg","target":"xxxxxx/… end of stream on Connection{xxxx.:80, proxy=DIRECT# hostAddress=xxxxxx cipherSuite=none protocol=http/1.1} (recycle count=0)"}
I know this issue has been tackled a few times but no solution works for me,
I have a javascript function which pulls a file referenced by an which is as follows
function imagePreload(str)
{
var timestamp = new Date().getTime();
str = str + "×tamp=" + timestamp;
var key = [];
var value = [];
var queriesarray = str.split('&');
for(i = 0; i < queriesarray.length; i++)
{
var pair = queriesarray[i].split('=');
key[i]= pair[0];
value[i]= pair[1];
}
for(i = 0; i < queriesarray.length; i++)
{
if (key[i]=="menu_id") {var menuid = value[i];}
if (key[i]=="menucategories_id") {var catid = value[i];}
}
for(i = 0; i < queriesarray.length; i++)
{
if (value[i]=="business") {var fileurlfield = "uploadbizimageid";}
if (value[i]=="category") {var fileurlfield = "uploadcatimageid" + catid;}
if (value[i]=="item") {var fileurlfield = "uploaditemimageid" + menuid;}
}
var fileInput = document.getElementById(fileurlfield);
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = reader.result;
}
reader.readAsDataURL(file);
} else {
alert("File not supported!");
}
document.getElementById("maskid").style.display = "block";
document.getElementById("imageuploadcontainerid").style.display = "block";
var filetosend = new FormData();
filetosend.append( 'image', file);
$.ajax({
url: "index.php?option=com_jumi&fileid=13&format=raw&" + encodeURI(str),
type: "POST",
data: filetosend,
processData: false,
contentType: false,
error: function (jqXHR, textStatus, errorThrown) {
alert("AJAX error: " + textStatus + ' : ' + errorThrown);
},
success: function(html) {alert("Orwight!");
document.getElementById('imageuploadcontainerid').innerHTML = html;
}
});
}
As you can see it is designed to make an AJAX call to a php file which is supposed to save that image file to a directory on the same webserver running the above function.
The php in that file looks like this.
$rest_id = $_GET['rest_id'];
$menu_id = $_GET['menu_id'];
$menucategories_id = $_GET['menucategories_id'];
$imagetype = $_GET['imagetype'];
if($imagetype=="business")
{
$db = &JFactory::getDBO();
$db->setQuery("SELECT * FROM g56s_restaurants WHERE rest_id = '$rest_id'");
$det = $db->loadObject();
$ext = pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION);
$target_path = "/images/restaurants/".$rest_id."/";
$target_path = $target_path ."businesslogo.".$ext."";
echo $target_path;
if(move_uploaded_file($_FILES['image']['tmp_name'], $target_path)) {
echo "The file ".basename( $_FILES['image']['name'])." has been uploaded";
} else {
echo "Not uploaded because of error #".$_FILES["file"]["error"];
}
}
Every time I call his script, the upload fails and no error is reported (i.e. no error number). A var dump shows that the the file error variable has a value of 0, and the file size is reported to be in the same order as that of the original file, and it has a tmp name. So in other words the file IS there in the TMP directory.
Directory permissions in the directory being written to are 777. There are no cross domain issues (and I guess no CORS issues) since the script is called from the same website (the PHP is actually in a JUMI application in a Joomla 3.4 website). However, the script ALWAYS fails to upload the file (the page returns "/images/restaurants/1/businesslogo.jpgNot uploaded because of error #." (since I also echoed the target_path before the error string echoed).
Does anyone know the reason for this and how to get the script to upload correctly ? I am completely stuck on this issue because as far as I can see, everything should work.
I solved the issue quicker than I thought, it turns out that I also have to specify the document root in the target path, so I amended
$target_path = "/images/restaurants/".$rest_id."/";
as
$target_path = $_SERVER['DOCUMENT_ROOT']."/images/restaurants/".$rest_id."/";
and it now works :-)
I'd like to upload all media files using ajax+php..
if I upload image and music file everything working as fine.
so I try upload video, it fails. what's wrong??
here is my ajax
function uploadFile() {
var file = document.getElementById("inputFile").files[0];
var quest_ID = document.getElementById("questionnaireID").value;
var quest_Number = document.getElementById("questNum").value;
var formdata = new FormData();
formdata.append("inputFile", file);
formdata.append("questionnaireID", quest_ID);
formdata.append("questionNumber", quest_Number);
formdata.append("media", 1);
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var outMsg = xhr.responseText;
} else {
var outMsg = "There was a problem with the request. Error: " + xhr.status + " (" + xhr.statusText + ")"; //errror return
}
alert(outMsg);
}
};
xhr.open("POST", "addNew.php", false);
xhr.send(formdata);
}
return false;
}
And here is the php.
function getExtention($str){
return substr(strrchr($str,'.'),1);
}
if (isset($_POST["media"])){
$tmp_file = $_FILES['inputFile']['tmp_name'];
$target_file = $_POST["questionnaireID"] . "-" . $_POST["questionNumber"] . "." . getExtention(basename($_FILES['inputFile']['name']));
$upload_dir = "Assets/Media";
$path = $upload_dir."/".$target_file;
echo $path;
if(move_uploaded_file($tmp_file, $path)) {
$query = "insert into mediaDetails(available, mediaPath)";
$query .= " values(1, '{$path}')";
$result = execute($query);
if($result){
echo "Media added";
}
}else{
echo "cannot move file";
}
}
that code work when I upload images and music, but not video.
why I can't upload video file?
when I upload video file, it returns nothing, (no text at all)...
even echo $path is not shown....
any alternative way??
any answer appreciated, thank you.
Hello I am trying to get to work this piece of code:
I am trying to build intelligent images uploader, that will care about the html 5 multiple selection bug (or feature as someone can say) which will delete "previous files" when I decide to select few extra. Also it has some primitive approach to permit user selecting file that was selected previously.
This part works fine, I am seeing images previews and also echoing "file" into console corresponds to number of files.
What is strange is return (echo) from PHP script which says that file is in /tmp directory and also size is correct, but file don't get moved.
I checked permissions and set uploaded folder to "lucky" 777.
I checked /tmp folder and file is no there but PHP script is saying taht is here.
I know about that you can't set , it is logical why you can't, but should echo from PHP script shows size and tmp location of this file then if this is a issue ?
code here:
var noveSub = [];
var noveSubMeno = [];
var noveSubVelkost = [];
function samotnyUpload() {
var fd = new FormData();
fd.append('upload', noveSub[0]);
// trying just first file for testing
$.ajax({
url: '/upload/upload.php',
data: fd,
cache: false,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
console.log(data);
}
});
}
function pridatSubory() {
$("li.pridaj").click(function() {
$("input").trigger("click");
});
function pushniNovy(subor) {
noveSub.push(subor);
noveSubMeno.push(subor.name);
noveSubVelkost.push(subor.size);
previewNovy(subor);
}
function previewNovy(subor) {
var li = document.createElement("li");
var img = document.createElement("img");
img.file = subor;
li.appendChild(img);
$(li).insertBefore("li.pridaj");
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(subor);
}
var inputElement = document.getElementById("vyberSubor");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
var sub = this.files;
for (i=0; i<sub.length; i++) {
pos = noveSubMeno.indexOf(sub[i].name);
if (pos !== -1) {
if (noveSubVelkost[pos] !== sub[i].size) {
pushniNovy(sub[i]);
}
} else {
pushniNovy(sub[i]);
}
}
}
PHP FILE :
<?php
if ($_FILES["upload"]["error"] > 0)
{
echo "Error: " . $_FILES["upload"]["error"] . "<br>";
}
else
{
echo "Upload: " . $_FILES["upload"]["name"] . "<br>";
echo "Type: " . $_FILES["upload"]["type"] . "<br>";
echo "Size: " . ($_FILES["upload"]["size"] / 1024) . " kB<br>";
echo "Stored in: " . $_FILES["upload"]["tmp_name"];
echo "<br><br>";
echo move_uploaded_file($_FILES["upload"]["tmp_name"], "upload/".$_FILES["file"]["name"]);
}
?>
OUTPUT FROM PHP FILE in console:
Upload: erb128.png<br>Type: image/png<br>Size: 4.734375 kB<br>Stored in: /tmp/phpdTy053<br><br>
It may actually be a syntax problem. You're mixing strings and variables in your move_uploaded_file call. Try this instead:
$destination = "upload/".$_FILES["file"]["name"];
$result = move_uploaded_file($_FILES["upload"]["tmp_name"], $destination);
echo $result;
I rethink this approach. to use PUT for upload. I have read that some benefits are:
small memory footprint even if You are uploading very big files
and also saw scripts that are able to pause upload.
changes to code (only draft):
var xhr = new XMLHttpRequest();
function samotnyUpload() {
xhr.open("put", "http://pingpong.local/upload/upload.php", true);
xhr.setRequestHeader("X-File-Name", noveSubMeno[0]);
xhr.setRequestHeader("X-File-Size", noveSubVelkost[0]);
xhr.send(noveSub[0]);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
}
and PHP script:
<?php
$filename = $_SERVER['HTTP_X_FILE_NAME'];
echo $filename;
$filesize = $_SERVER['HTTP_X_FILE_SIZE'];
echo $filesize;
$in = fopen('php://input','r');
$tmp = fopen('tempfile.ext','w');
while($data = fread($in, 1024)) fwrite($tmp, $data);
fclose($in);
fclose($tmp);
?>
I try to upload file from local system to web server.
My application is desktop application and I work with php server.
Find below my code
In flex
var dropfiles:Array = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
for each (var file:File in dropfiles){
var fileFormat:String = file.extension;
var fileUrl:String = file.url;
var fileName:String = file.name;
var fileDate:Date = file.creationDate;
var objAdd:Object= new Object();
objAdd.titre=fileName;
objAdd.date=fileDate;
objAdd.url=fileUrl;
DP_PAT_COURR_ENT.addItem(objAdd);
var myFileDir:String=getPatPath(monIdPatient);
var urlCopy:String = new urlManager().urlCourriersPatLoad()+myFileDir;
var rq:URLRequest = new URLRequest(new urlManager().urlService() + "upload.php");
rq.method = URLRequestMethod.POST;
var varphp:URLVariables = new URLVariables();
varphp.userID = monIdPatient;
varphp.url = myFileDir;
rq.data = varphp;
file.upload(rq, 'Filedata');
}
In PHP
<?php
if(isset($_POST['myFileDir']))
$patRoot=$_POST['myFileDir'];
$file_temp = $_FILES['Filedata']['tmp_name'];
$file_name = $_FILES['Filedata']['name'];
$file_path = $_SERVER['DOCUMENT_ROOT'].$patRoot";
//checks for duplicate files
if(!file_exists($file_path."/".$file_name)) {
//complete upload
$filestatus = move_uploaded_file($file_temp,$file_path."/".$file_name);
if(!$filestatus) {
$success = "false";
array_push($errors,"Upload failed. Please try again.");
}
}
else {
$success = "false";
array_push($errors,"File already exists on server.");
}
echo $file_path;
With those code message "Error #2044: Unhandled IOErrorEvent:" appear on flex.
Thanks for helping
There are many examples out there.
http://blog.flexexamples.com/2007/09/21/uploading-files-in-flex-using-the-filereference-class/