I run a ruby on rails app on heroku, but I store my data on Amazon AWS S3. There is an rails gem, that makes integration pretty easy.
You may try this,
this is an example of selecting video from the device
step1
cordova plugin add cordova-filepath-resolver
For Ionic specifically, you can also use:
ionic plugin add cordova-filepath-resolver
step2
put this code
function camerasucess(videourl) {
//videourl is something like this content //media/external/video
var successCallback = function (data) {
console.log(JSON.stringify(data));
//here you will get the correct path of the video file and you can upload the video file
$scope.data = data;
};
var errorCallback = function (data) {
console.log(JSON.stringify(data));
};
window.FilePath.resolveNativePath(videourl, successCallback, errorCallback);
};
function cameraError(data) {
alert(JSON.stringify(data));
};
if (navigator.camera)
{
navigator.camera.getPicture(camerasucess, cameraError, {
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY, mediaType: navigator.camera.MediaType.VIDEO,
});
}Is there any sample fo rIonic to S3 image upload.
Is there any way to send an image to server without mulitpart
For example look here https://github.com/xfally/cordova-plugin-ftp
By using this plugin, i am not able to upload image base 64 url to server if image base 64 url is greater than 10 MB.
how to fix it
u can use this
<input type="file" name="photo" />
<input type="submit">
</form>Here is a complete app on how to upload to Amzon s3 using nodejs and ionic framework
I need to upload an image taken from my mobile device to my server. I found the angular-upload library to which makes reference. I need to do is to transform the image base 64, send it by post to my server because the server is where I will work with her. And the other, send from my server and work it from the application to run.
Regards,
AngularJS Learner
how to get the file path
To upload image to the server using Ionic 2 Framework, you have to use the Transfer plugin. Install transfer plugin using
ionic plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/transfer
Then call the upload function from Transfer class.
const fileTransfer: TransferObject = this.transfer.create();
let options1: FileUploadOptions = {
fileKey: āfileā,
fileName: āname.jpgā,
headers: {}
}
fileTransfer.upload(imageDataLocalURL, āhttp://localhost/ionic/upload.phpā, options1)
.then((data) => {
// success
alert(āsuccessā);
}, (err) => {
// error
alert(āerrorā+JSON.stringify(err));
});
Use the link to know more
https://ampersandacademy.com/tutorials/ionic-framework-version-2/upload-an-image-to-the-php-server-using-ionic-2-transfer-and-camera-plugin
Hi can u tell me how will u transfer multiple files I will also get some help and if u know angular 2(typescript) would be better
hi Calendee, would you please to see my code here, iām tryng this but $cordovaFileTransfer.upload do nothing, no succes message or error, would you please tell whats wrong, i have no idea because iām new in this ionicā¦thanks
this my code, iām tryng using somebody tutorial in internet :
$scope.openPhotoLibrary = function() {
//alert(āXā);
var options = {
quality: 85,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false,
targetWidth: 200,
targetHeight: 200,
};
$cordovaCamera.getPicture(options).then(function(imageData) {
alert("1");
//console.log(imageData);
//console.log(options);
var image = document.getElementById('tempImage');
image.src = imageData;
$scope.imgURI = imageData;
alert("2");
var server = "http://192.168.88.10/upload.php";
alert("3");
filePath = imageData;
alert("4");
var date = new Date();
alert("5");
var options = {
fileKey: "file",
fileName: imageData.substr(imageData.lastIndexOf('/') + 1),
chunkedMode: false,
mimeType: "image/jpg"
};
alert("6");
$cordovaFileTransfer.upload(server, filePath, options).then(function(result) {
alert("Z");
console.log("SUCCESS: " + JSON.stringify(result.response));
console.log('Result_' + result.response[0] + '_ending');
alert("success");
alert(JSON.stringify(result.response));
alert("7");
}, function(err) {
alert("error");
console.log("ERROR: " + JSON.stringify(err));
//alert(JSON.stringify(err));
}, function (progress) {
alert("progress");
// constant progress updates
});
}, function(err) {
// error
console.log(err);
});
}You have to access cordova file transfer plugin.
$cordovaFileTransfer.upload(url, targetPath, options).then(function(result) {
//success or error result
});
And here is a full code. You can check it http://datainflow.com/upload-file-server-using-ionic-php/
hi, am trying the same logic in ionic2 but am getting file utils error which is as follows:
:compileDebugJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
/home/amulya/Documents/ionic2/blank/platforms/android/src/org/apache/cordova/filetransfer/FileTransfer.java:49: error: package org.apache.cordova.file does not exist
import org.apache.cordova.file.FileUtils;
^
/home/amulya/Documents/ionic2/blank/platforms/android/src/org/apache/cordova/filetransfer/FileTransfer.java:851: error: cannot find symbol
FileUtils filePlugin = (FileUtils) pm.getPlugin(āFileā);
^
symbol: class FileUtils
/home/amulya/Documents/ionic2/blank/platforms/android/src/org/apache/cordova/filetransfer/FileTransfer.java:851: error: cannot find symbol
FileUtils filePlugin = (FileUtils) pm.getPlugin(āFileā);
^
symbol: class FileUtils
Note: /home/amulya/Documents/ionic2/blank/platforms/android/src/org/apache/cordova/splashscreen/SplashScreen.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: /home/amulya/Documents/ionic2/blank/platforms/android/src/org/apache/cordova/filetransfer/FileTransfer.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
3 errors
:compileDebugJavaWithJavac FAILED
FAILURE: Build failed with an exception.
- What went wrong:
Execution failed for task ā:compileDebugJavaWithJavacā.
Compilation failed; see the compiler error output for details.
- Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Total time: 15.405 secs
Error: /home/amulya/Documents/ionic2/blank/platforms/android/gradlew: Command failed with exit code 1 Error output:
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
/home/amulya/Documents/ionic2/blank/platforms/android/src/org/apache/cordova/filetransfer/FileTransfer.java:49: error: package org.apache.cordova.file does not exist
import org.apache.cordova.file.FileUtils;
^
/home/amulya/Documents/ionic2/blank/platforms/android/src/org/apache/cordova/filetransfer/FileTransfer.java:851: error: cannot find symbol
FileUtils filePlugin = (FileUtils) pm.getPlugin(āFileā);
^
symbol: class FileUtils
/home/amulya/Documents/ionic2/blank/platforms/android/src/org/apache/cordova/filetransfer/FileTransfer.java:851: error: cannot find symbol
FileUtils filePlugin = (FileUtils) pm.getPlugin(āFileā);
^
symbol: class FileUtils
Note: /home/amulya/Documents/ionic2/blank/platforms/android/src/org/apache/cordova/splashscreen/SplashScreen.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: /home/amulya/Documents/ionic2/blank/platforms/android/src/org/apache/cordova/filetransfer/FileTransfer.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
3 errors
FAILURE: Build failed with an exception.
- What went wrong:
Execution failed for task ā:compileDebugJavaWithJavacā.
Compilation failed; see the compiler error output for details.
- Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
[ERROR] An error occurred while running cordova build android (exit code 1).
this is my code in ionic2 ,
let cameraOptions = {
quality: 100
, destinationType: this.camera.DestinationType.FILE_URI
, sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
, encodingType: this.camera.EncodingType.JPEG
}
this.camera.getPicture(cameraOptions)
.then(file_uri => this.imageSrc = file_uri,
err => console.log(err));
const fileTransfer: FileTransferObject = this.transfer.create();
let filename = imageSrc.split('/').pop();
let options = {
fileKey: "file",
fileName: filename,
chunkedMode: false,
mimeType: "image/jpg",
params: {}
};
fileTransfer.upload(imageSrc, 'https://streetbuzz-api.herokuapp.com/util/upload', options)
.then((data) => {
alert(āsuccessā+JSON.stringify(data));
}, (err) => {
alert(āfailureā+JSON.stringify(err));
})
Hello guys
This code seemed to me perfect, but in āCreator.ionicā it gave the following error in console.log:
āError: [$injector:unpr] Unknown provider: $cordovaFileTransferProvider ā $cordovaFileTransfer ā homeCtrlā
So I tried adding the plugin ācordova-plugin-filetransferā but it has not. You only have this ācordova-plugin-bb-filetransferā.
Then add the ācordova-plugin-bb-filetransferā and gave this error: āError: [$ injector: unpr] Unknown provider: $ cordovaFileTransferProvider ā $ cordovaFileTransfer ā homeCtrlā.
And when I snoop on the āmobileā it just does not do anything.
Can someone help me?