Video capture to not show in my gallery on phone - angularjs

I am using ng-cordova's plugin capture to capture (https://github.com/apache/cordova-plugin-media-capture) videos inside of the ionic framework from a mobile phone.
$scope.captureVideo = function() {
var options = { limit: 1, duration: 10 };
$cordovaCapture.captureVideo(options).then(function(videoData) {
var i, path, len;
for (i = 0, len = videoData.length; i < len; i += 1) {
path = videoData[i].fullPath;
console.log("Path of the video is = " + path.toString());
}
}, function(err) {
// An error occurred. Show a message to the user
});
}
The problem is every video capture I take saves to my phones gallery which I do not want. If I capture an image it does NOT save to my phone's gallery which is what I would like with video capture. Is there a way to stop videos from being saved?
I tried deleting the file but apparently the video file is not saved
in cordovafile directories.
function DeleteFile() {
var filename = "20161024_095758.mp4";
var relativeFilePath = "file:/storage/C8F0-1207/DCIM/Camera";
console.log('data directory: '+cordova.file.dataDirectory);
window.resolveLocalFileSystemURL(relativeFilePath, function(dir) {
dir.getFile(filename, {create:false}, function(fileEntry) {
fileEntry.remove(function(){
alert('file removed');
// The file has been removed succesfully
},function(error){
alert('error'+JSON.stringify(error));
// Error deleting the file
},function(){
alert('file doesnt exist');
// The file doesn't exist
});
});
});
The code above to delete file results in Error Code:6. No modification allowed

Well, apparently WE CANNOT DELETE AND WRITE FILES FROM MICRO SD-CARD SINCE VERSION 4.4. It is read only now.. And, when the user deletes the file from the gallery, it would not be available for the project. Here is what i came up with.
I copied the video file to cordova's external directory from where i could read the file when wanted and delete as per the need. Plugins required are cordova-file-plugin and cordova-plugin-file-transfer
.controller('yourCtrl', function($scope,$cordovaCapture,$sce,$cordovaFile, $cordovaFileTransfer, $timeout) {
$cordovaCapture.captureVideo(options).then(function(videoData) {
console.log(JSON.stringify(videoData[0]));
console.log(cordova.file.externalDataDirectory);
$cordovaFileTransfer.download(videoData[0].fullPath, cordova.file.externalDataDirectory + 'my-video.mp4', {}, true).then(
function(result)
{
console.log('success: '+ result);
},
function (error)
{
console.log('error: '+ JSON.stringify(error));
},function (progress) {
$timeout(function () {
$scope.downloadProgress = (progress.loaded / progress.total) * 100;
});
},false);
$scope.clipSrc = $sce.trustAsResourceUrl(videoData[0].fullPath);
//$scope.videoSrc = videoData[0].fullPath;
}, function(err) {
alert('Err: <br />'+ JSON.stringify(videoData));
});
//delete the file according to filename.
$scope.deleteVideo= function(){
$cordovaFile.removeFile(cordova.file.externalDataDirectory, "my-video.mp4")
.then(function (result) {
console.log('Success: deleting videoData file' + JSON.stringify(result));
}, function (err) {
console.log('Error: deleting videoData file' + JSON.stringify(err));
});
}
})

Related

save video files in iOS gallery using Cordova plugin

I am trying to save a video from a URL in my iOS device using a ionic Cordova file transfer .
var fileTransfer = new FileTransfer();
var uri = "https:xyz.abc/demo.mp4";
var fileURL = cordova.file.documentsDirectory + 'demoRename.mp4';
fileTransfer.download(
uri, fileURL, function (entry) {
console.log("download complete: " + entry.toURL());
},
function (error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("download error code" + error.code);
}
);
I can see the downloaded path as below using console log.
[Log] download complete: file:///var/mobile/Containers/Data/Application/EB4C2F9A-9C4D-4CA6-BED0-D83B7D4CBDE1/Documents/demoRename.mp4
But I can not see the downloaded video file in my gallery or in photos ,Where can I find them or am I doing it right?
you will need to save the video to gallery then you will able to see the downloaded video in the gallery.
please use the photo library plugin and follow the below link.
https://github.com/terikon/cordova-plugin-photo-library
use the below code may be it will helpful to you.
//based on device type choosing the location to save the video
if (ionic.Platform.isIOS()) {
var path = cordova.file.documentsDirectory;
var filename = "preview.mp4";
} else {
var path = cordova.file.externalRootDirectory;
var filename = "preview" + $filter('date')(new Date(), "yyyy-MM-dd HH:mm:ss") + ".mp4";
}
//Creating directory to save video in the device
$cordovaFile.createDir(path, "dir", true).then(function(success) {
var targetPath = path + "dir/" + filename;
var trustHosts = true;
var options = {};
//Downloading the file from URL.
$cordovaFileTransfer.download("video URL", targetPath, options, trustHosts).then(function(result) {
//Once downloaded the file calling function to add the video to photo library
if (ionic.Platform.isIOS()) {
function savelibrery() {
cordova.plugins.photoLibrary.saveVideo(targetPath, album, function(success) {}, function(err) {
if (err.startsWith('Permission')) {
cordova.plugins.photoLibrary.requestAuthorization(function() {
savelibrery();
}, function(err) {
$ionicLoading.hide();
$cordovaToast.show("Oops! unable to save video, please try after sometime.", "long", "center");
// User denied the access
}, // if options not provided, defaults to {read: true}.
{
read: true,
write: true
});
}
});
}
savelibrery()
} else {
//add refresh media plug in for refresh the gallery for android to see the downloaded video.
refreshMedia.refresh(targetPath);
}
$ionicLoading.hide();
$cordovaToast.show("Vidoe saved successfully", "long", "center");
}, function(error) {
$ionicLoading.hide();
$cordovaToast.show("Oops! unable to save video, please try after sometime.", "long", "center");
}, function(progress) {
$scope.downloadProgress = (progress.loaded / progress.total) * 100;
$cordovaToast.show("In progress", "short", "center");
});
}, function(error) {
//alert(JSON.stringify(error));
$ionicLoading.hide();
$cordovaToast.show("Oops! unable to save video, please try after sometime.", "long", "center");
});

Failed to load pdf document, NodeJs

I am trying to download a pdf without prompt using the pdf which is already present under mocked test data. And I am able to do the above task using the below code.But when I try to open the downloaded pdf I am getting 'Failed to load pdf document' what am I missing here.Kindly help.
fs.readFile('./src/test-data/service/print/notes.pdf', function(error, content) {
if (error) {
res.writeHead(500);
res.end();
}
else {
res.writeHead(200, {
'Content-Type': 'application/pdf',
'Content-Disposition': 'attachment; filename=notes.pdf'
});
res.end(content, 'utf-8');
}
});
you must use res.download
function fileExist(fullpath) {
try {
return fs.statSync(fullpath).isFile();
} catch (e) {
return false;
}
}
var name = 'notes.pdf';
var filePath = './src/test-data/service/print/' + name;
if (!Files.Exist(filePath)) {
console.log("file does't exist");
} else {
res.download(filePath, name, function(err) {
fs.unlink(filePath);
});
}
if you want keep your file after download replace the line
res.download(filePath, name, function(err) {
fs.unlink(filePath);
});
by
res.download(filePath, name);
in the angular application use $window.open(url, '_self');
This is working perfectly.
var file = fs.createReadStream('./src/test-data/service/print/notes.pdf');
var stat = fs.statSync('./src/test-data/service/print/notes.pdf');
res.setHeader('Content-Length', stat.size);
res.setHeader('Content-Type', 'application/pdf');
res.setHeader('Content-Disposition', 'attachment; filename=agreement.pdf');
file.pipe(res);
If the above solutions do not solve your problem, and your using nginx + express, the problem might be with nginx buffering the response. You can disable that using the following:
proxy_buffering off;

nodejs write simple image blob - Upload.dataUrltoBlob

Simple question. How do I save a image blob in Nodejs from angular.
AngularSide:
$scope.upload = function (dataUrl, picFile) {
Upload.upload({
url: 'http://test.dev:3000/register/user/uploads',
data: {
file: Upload.dataUrltoBlob(dataUrl, picFile.name)
},
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
});
}, function (response) {
if (response.status > 0) $scope.errorMsg = response.status
+ ': ' + response.data;
}, function (evt) {
$scope.progress = parseInt(100.0 * evt.loaded / evt.total);
});
}
nodejs side: Do I need middleware here? if so which one should I use?
router.post('/user/uploads', multipartMiddleware, function(req, resp) {
var newPath = "/Users/testUser/test_hold_files/" + req.files.file.originalFilename;
fs.writeFile(newPath, req.files.file, function(err) {
if (err) {
console.log("Data Error ");
return console.error(err);
}
});
res.status(200).jsonp({status: "status: success "});
});
right now this just writes out the file with correct name but its empty.
You used to be able to access the uploaded file through req.files.imageName and then you would fs.readFile from tmp and write it permanently, which is no longer the case in express 4.0
In Express 4, req.files is no longer available on the req object by default. To access uploaded files on the req.files object, use multipart-handling middleware like busboy, multer, formidable, multiparty, connect-multiparty, or pez.
Soooooooo, you can feel free to use which ever one of those middlewares names above and then follow their API for dealing with uploaded files like images. Hope this helps, enjoy.
Ok,
After a long time of messing with this stuff. I found an answer. It does load the file in my folder.
I feel this is only partial since it does not resize the actual file smaller. It is what is selected with https://github.com/danialfarid/ng-file-upload. I used the
Upload.upload({
url: 'http://test.dev:3000/register/user/uploads',
data: {
file: Upload.dataUrltoBlob(dataUrl, picFile.name)
},
This did zoom into the file on selected image. It did not make the actual file size smaller. I am still looking into this issue.
var formidable = require('formidable'),
util = require('util'),
fs_extra = require('fs-extra');
This is my post to accept images.
router.post('/user/uploads', function (req, res){
var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files) {
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received upload:\n\n');
res.end(util.inspect({fields: fields, files: files}));
});
form.on('end', function(fields, files) {
/* Temporary location of our uploaded file */
var temp_path = this.openedFiles[0].path;
/* The file name of the uploaded file */
var file_name = this.openedFiles[0].name;
/* Location where we want to copy the uploaded file */
var new_location = "/Users/testUser/test_hold_files/";
fs_extra.copy(temp_path, new_location + file_name, function(err) {
if (err) {
console.error(err);
} else {
console.log("success!")
}
});
});
});
I have also noticed that I can view the file in chrome but not load it into gimp. Gimp gives me a file error.
Small steps I guess.
Maybe Datsik can give us some insight on what is going on here.
https://stackoverflow.com/users/2128168/datsik
Phil

Cordova File Plugin Has Wrong Directory

So I am building a cordova/phonegap app in angularjs 1 and I'm trying to save and read from a file called calendar.txt in the app's private directory/sandbox and can't.
My console logs while debugging show that there are no errors and the file is being created if it doesn't exist, and is being read correctly. However that is not the case. When I build and run on my device, the data is not saved. Also no file is created in the location specified.
I console logged the path it was trying to use and this is it:
file:///data/data/com.adobe.phonegap.app/files/calendar.txt
Here is the code I am using to open the file:
$rootScope.openFile = function(){
var pathToFile = cordova.file.dataDirectory + "calendar.txt";
console.log('path = ' + pathToFile);
window.resolveLocalFileSystemURL(pathToFile,
function(fileEntry){
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function (e) {
$rootScope.calendar = JSON.parse(this.result);
console.log('file opened');
console.log(JSON.parse(this.result));
};
reader.readAsText(file);
}, function(error){});
}, function(error){
if(error.code == FileError.NOT_FOUND_ERR){
$rootScope.calendar = new Year();
console.log('no file found so it was created');
$rootScope.saveFile();
}
else{
console.log(error);
}
});
};
And here is the code for my save the file:
$rootScope.saveFile = function(){
var data = JSON.stringify($rootScope.calendar, null, '\t');
var fileName = "calendar.txt"
window.resolveLocalFileSystemURL(cordova.file.dataDirectory,
function(directoryEntry){
directoryEntry.getFile(fileName, { create: true },
function (fileEntry) {
fileEntry.createWriter(
function (fileWriter) {
var blob = new Blob([data], { type: 'text/plain' });
fileWriter.write(blob);
console.log('file saved');
},
function (error){});
},
function (error){}
);
},
function(error){
console.log("Saving Error: Error during finding directory", error.message);
}
);
};
I have used this tutorial to get this far: Cordova File Plugin Tutorial
What am I doing wrong?
I assume that you are facing this issue in Android as i too faced the same. As per my understanding and googling, in android (atleast in android 5) you cant write in application data directory unless the phone is rooted. So you may have to use externalRootDirectory instead.
eg: window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory,successCallback, errorCallback);
Hope it helps.

Cancel Angular File Upload

I am not able to cancel an uploading file request from angular, I am using the below mentioned plugin to upload a file and according to the author it feels like it is way to simple, but I am not sure how should I implement it. This is how I am uploading the files, from Angular plugin files gets posted to php and php intern reads the entire file and streams it to java api through curl, so, now I have a Cancel button and once user clicks on that cancel upload button I need to be able to stop the upload from angular plugin, so once the upload is stopped I can make another call to clean up half streamed file....and other clean up stuff.
Plugin Link: https://github.com/danialfarid/ng-file-upload
$scope.uploadFiles = function(files) {
if(files != undefined){
$scope.currentFileUploadList = files;
$scope.$apply();
}
angular.forEach(files, function(file, key) {
if(isSpecialChar(file.name)){
//$scope.currentFileUploadList[key].status = false;
//$scope.$apply();
file.upload = Upload.upload({
url: $scope.BASE_FOLDER+'/sync/file/upload',
fields: {csrf_token: $('.csrf_token').html(), path: 'ParaBlu'},
file: file
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
if(response.data.result == 'success'){
$('.status').hide();
toastr.success(response.data.file.fileName+' has been uploaded successfully', 'Successfully!!!', {allowHtml: true});
$scope.currentFileUploadList.forEach(function(value, key){
if(value.name.toString() == response.data.file.fileName.toString()){
$scope.currentFileUploadList.splice(key, 1);
}
});
if((files.length) == key){
$('#uploadFiles').modal('hide');
}
}else{
toastr.error(file.name, response.data.msg, 'Fail!!!', {allowHtml: true});
}
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
});
file.upload.progress(function (evt) {
file.progress = Math.min(100, parseInt(100.0 *
evt.loaded / evt.total));
});
}else{
$scope.currentFileUploadList.forEach(function(value, key){
if(value.name.toString() == file.name.toString()){
$scope.currentFileUploadList.splice(key, 1);
}
});
toastr.error('Special characters like ( * \ | : " < > ? / ) are not allowed, in a file name.', 'Fail!!!', {allowHtml: true});
}
});
};
It was not a problem with the plugin rather with the streaming, I had to cancel the php file streaming separately to cancel the upload, process, not sure y? I though setting user interruption to false in php.ini would stop the php curl request as well once the ajax request is cancelled but it did not happen, anyway thanks for your help.

Resources