Can someone help me.
I've implemented a file upload / download in UI5 that seems to work but when I download the file it gets corrupted and I can't open it.
For now I'm only testing with image files:
new sap.ui.unified.FileUploader({
buttonOnly: true,
buttonText: "Upload files",
icon: "sap-icon://upload",
change: function(oEvent) {
var oFileUploader = oEvent.getSource();
oItem = oFileUploader.getParent().getParent().getParent();
var sPath = oItem.getBindingContext().getPath();
var files = oEvent.getParameter("files");
var file = files[0];
if (file) {
var oNewFile = {
ID: that.count++,
SurveyAnswerID: oSA.ID,
FileName: oEvent.getParameter("newValue"),
FileBinary: null,
MimeType: "image/jpeg",
Mode: "POST"
};
var reader = new FileReader();
reader.onload = function(evt) {
var binaryString = evt.target.result;
oNewFile.FileBinary = binaryString;
};
reader.readAsBinaryString(file);
} else {
oNewFile.FileBinary = "";
oNewFile.FileName = "";
MessageToast.show("Something went wrong with the file upload.\n Please try again");
}
that._pushItemToFileUploadModel(oNewFile.ID, oNewFile);
that._getFileUploadModel().refresh();
}
})
Download code:
selectionChange: function(oEvent) {
var item = oEvent.getSource().getSelectedItem();
var model = that._getFileUploadModel();
if (item) {
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([item.getDocumentId()], {
type: item.getMimeType()
}));
a.download = item.getFileName();
// Append anchor to body.
document.body.appendChild(a);
a.click();
// Remove anchor from body
document.body.removeChild(a);
}
try {
oEvent.getSource()._oList.removeSelections();
} catch (e) {
//DO nothing
}
},
What an I doing wrong here?
I solved my issue converting the file this way:
var u8_2 = new Uint8Array(atob(data).split("").map(function(c) {
return c.charCodeAt(0);
}));
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([u8_2], {
type: item.getMimeType()
}));
Related
I'm using protractor html reporter 2 for my reporting. I need to get spec name as html report output file name.
i'm using the below code in my config file.
var today = new Date(),
timeStamp = today.getMonth() + 1 + '-' + today.getDate() + '-' + today.getFullYear();
onPrepare:
function ()
{
browser.driver.manage().window().maximize();
var fs = require('fs-extra');
scriptName=function(){
return browser.getProcessedConfig().then(function(config){
return config.specs;
});
};
fs.emptyDir('./target/htmlReports/'+scriptName+'-'+timeStamp+'/screenShots/', function (err) {
console.log(err);
});
jasmine.getEnv().addReporter({
specDone: function(result) {
//if (result.status == 'failed' || result.status == 'passed') {
if (1==1) {
browser.getCapabilities().then(function (caps) {
var browserName = userData.testUser.browser.toUpperCase();
browser.takeScreenshot().then(function (png) {
var stream = fs.createWriteStream('./target/htmlReports/'+scriptName+'-'+timeStamp+'/screenShots/'+ result.fullName+'.png');
stream.write(new Buffer(png, 'base64'));
stream.end();
});
});
}
}
});
jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
consolidateAll: true,
savePath: 'target/XMLReports',
filePrefix: 'xmlresults'
}));
},
onComplete: function() {
var browserName, browserVersion;
var capsPromise = browser.getCapabilities();
capsPromise.then(function (caps) {
browserName = userData.testUser.browser.toUpperCase();
platform=caps.get('platform');
browserVersion = caps.get('version');
testConfig = {
reportTitle: 'Test Execution Report',
outputPath: './target/htmlReports/'+scriptName+'-'+timeStamp,
screenshotPath: './target/htmlReports/'+scriptName+'-'+timeStamp+'/screenShots',
testBrowser: browserName,
browserVersion: browserVersion,
outputFilename:'ProtractorTestReport',
testPlatform: platform,
//browserVersion: browserVersion,
modifiedSuiteName: true,
screenshotsOnlyOnFailure: false
};
new HTMLReport().from('./target/XMLReports/xmlresults.xml', testConfig);
});
},
plugins: [{
package: 'jasmine2-protractor-utils',
disableHTMLReport: true,
disableScreenshot: false,
screenshotPath:'./target/htmlReports/'+scriptName+'-'+timeStamp+'/screenShots',
screenshotOnExpectFailure:true,
screenshotOnSpecFailure:true,
clearFoldersBeforeTest: true,
htmlReportDir: './target/htmlReports'
}],
i tried with
browser.getProcessedConfig().then(function(config){
console.log(config.specs);
});
,it returns
[ 'D:\projects\HeartlandSSP\Automation\TenantManagement\Ssp.TenantManagement.Protractor_Test\specs\createTenantSpec.js',
'C:\Users\renusri.rajalingam\AppData\Roaming\npm\node_modules\protractor\built\frameworks\__protractor_internal_afterEach_setup_spec.js' ]
but the actual spec name createTenantSpec.js is not returning. I need only the filename of the spec and not the name of the describe or it functions. Since I have 5 specs, i need to generate separate report with its spec name. Can anyone please help me on this?
The value of config.specs is an array and according to output we have the file's absolute path is at index 0. So the file name can be extracted as follows.
browser.getProcessedConfig().then(function (config) {
var fullName = config.specs[0];
var fileName = fullName.substring(fullName.lastIndexOf('/')+1);
console.log('fileName:', fileName);
});
// output:
// fileName: createTenantSpec.js
Or if you would like to have all file names in this array you could use this:
browser.getProcessedConfig().then(function (config) {
var fileNames = config.specs.map(function(path) {
return path.substring(path.lastIndexOf('/')+1);
});
fileNames.forEach(function(fileName) {
console.log('fileName:', fileName);
});
});
// output:
// fileName: createTenantSpec.js
// __protractor_internal_afterEach_setup_spec.js
References:
array.prototype.map() => click me
array.prototype.forEach() => click me
Use this in on Complete:
browser.getProcessedConfig().then(function (config)
{
var fullName = config.specs[0];
console.log('fullName' ,fullName);
var start= fullName.lastIndexOf('\\');
var stop=fullName.length;
console.log('start:', start);
console.log('stop:', stop);
var fileName = fullName.substring(start+1,stop);
console.log('fileName:', fileName);
});
Help, I need call the http.request for send Image captured in camera api in my NativeScript App.
I capture the photo in camera api for nativescript and need send to api in upload process.
Follow the code about this process:
var frameModule = require("ui/frame");
var viewModule = require("ui/core/view");
var Observable = require("data/observable").Observable;
var config = require("../../shared/config");
var cameraModule = require("camera");
var imageModule = require("ui/image");
var http = require("http");
exports.loaded = function(args) {
var page = args.object;
viewModel = new Observable({
coleta: config.id_coleta
});
page.bindingContext = viewModel;
};
exports.voltar = function() {
var topmost = frameModule.topmost();
topmost.navigate("views/ocorrencia/menuocorrencia");
};
function tapFoto() {
cameraModule.takePicture({
width: 300,
height: 300,
keepAspectRatio: true
}).then(function(picture) {
var image = new imageModule.Image();
image.imageSource = picture;
var item = {
itemImage: picture
};
var urlfoto = "http://192.1.1.1:8090/sendphoto/upload";
alert("URL: " + urlfoto);
http.request({
url: urlfoto,
method: "POST",
headers: {
"Content-Type": "multipart/form-data"
},
content: ({uploadFile: image.imageSource, entrega: config.id_coleta})
}).then(function (response) {
var statusCode = response.statusCode;
alert("Codigo Retorno: " + statusCode);
alert("Foto registrada com sucesso.");
}, function (e){
alert("Erro: " + e);
});
});
}
exports.tapFoto = tapFoto;
I recommend using of nativescript-background-http plugin for uploading files.
tns plugin add nativescript-background-http
Here is your code modifed to work with the installed plugin:
"use strict";
var Observable = require("data/observable").Observable;
var cameraModule = require("camera");
var fs = require("file-system");
var bghttpModule = require("nativescript-background-http");
var session = bghttpModule.session("image-upload");
var viewModel = new Observable();
function navigatingTo(args) {
var page = args.object;
page.bindingContext = viewModel;
}
exports.navigatingTo = navigatingTo;
function onTap() {
cameraModule.takePicture({
width: 300,
height: 300,
keepAspectRatio: true
}).then(function (imageSource) {
console.log("Image taken!");
var folder = fs.knownFolders.documents();
var path = fs.path.join(folder.path, "Test.png");
var saved = imageSource.saveToFile(path, "png");
var request = {
url: "http://httpbin.org/post",
method: "POST",
headers: {
"Content-Type": "application/octet-stream",
"File-Name": "Test.png"
},
description: "{ 'uploading': " + "Test.png" + " }"
};
var task = session.uploadFile(path, request);
task.on("progress", logEvent);
task.on("error", logEvent);
task.on("complete", logEvent);
function logEvent(e) {
console.log("----------------");
console.log('Status: ' + e.eventName);
// console.log(e.object);
if (e.totalBytes !== undefined) {
console.log('current bytes transfered: ' + e.currentBytes);
console.log('Total bytes to transfer: ' + e.totalBytes);
}
}
});
}
exports.onTap = onTap;
Using ionic,
I am trying to create an image blob from URI and have tried several codes but failed.
Here is where I implement the imagepicker in ionic:
$cordovaImagePicker.getPictures(options)
.then(function (results) {
console.log(results[0]);
var datablob = $scope.dataURItoBlob(results[0]);
technique 1 (create the blob):
$scope.dataURItoBlob = function(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
return new Blob([new Uint8Array(array)], {
type: mimeString
});
}
technique 2 (create the blob):
$scope.dataURItoBlob = function(dataURI) {
var arr = dataURI.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
Both techniques does not work. Please help! thank you very much.
$cordovaImagePicker.getPictures(options)
.then(function (results) {
console.log(results[0]);
dataURItoBlob(results[0], function(url){
var datablob = url;
}, function(error){
console.error(error);
})
})
function dataURItoBlob(path, cb, error) {
resolveLocalFileSystemURL(path, function (fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function () {
if (typeof cb === 'function') {
cb(this.result)
}
};
reader.readAsDataURL(file);
}, function (err) {
if (typeof error === 'function') {
error(err)
}
});
});
}
Needs to cordova-plugin-file
I am having a hard time implementing a simple file download script.
This is what I have so far, working ok :
Open an XMLHttpRequest
Get remote file as blob binary
Show download progress
My problem is :
creating a custom download directory
renaming downloaded file as original source name
downloaded file does not include its extension
Possibility to add the option to prompt a save as location before download ?
This is the snippet :
$('#DownloadBtn').click(function(e) {
e.preventDefault();
var urlFile = $(this).attr('href'); // remote file www.blabla.com/soft123.bin
var fileName = ''; // Get remote file name & extension ?
var progressBar = document.querySelector('progress');
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
function onError(e) {
console.log('Error', e);
}
var xhr = new XMLHttpRequest();
xhr.addEventListener("progress", updateProgress, false);
xhr.open('GET', urlFile, true);
xhr.responseType = 'blob';
var resourceDIRLOC = "Downloads";
xhr.onload = function(e) {
window.requestFileSystem(TEMPORARY, 10 * 1024 * 1024, function(fs) {
fs.root.getDirectory(fs.root.fullPath + '/' + resourceDIRLOC, {
create: true
}, function(dir) {
resourceDIR = dir;
fs.root.getFile(fileName, {
create: true
}, function(fileEntry) {
fileEntry.createWriter(function(writer) {
writer.onwrite = function(e) {};
writer.onerror = function(e) {};
var blob = new Blob([xhr.response], {
type: ' application/octet-stream'
});
writer.write(blob);
}, onError);
}, onError);
}, onError);
}, onError);
};
function updateProgress(e) {
if (e.lengthComputable) {
$(progressBar).show();
var i = (e.loaded / e.total) * 100;
progressBar.value = i;
if (i == 100) {
$(progressBar).hide();
}
}
}
xhr.send();
});
The downloaded file is located under FileSystem->000->t with 00 as name ( not soft123.bin )
I am not sure if it is possible to give the user an option to choose a download directory outside FileSystem? As defined above, target directory resourceDIRLOC = "Downloads" but the request is not creating this folder ? neither giving the file a name and extension
Any advise is appreciated
Thanks
Here is how you can keep track download progress and choose download directory in with Node-Webki. I was at first trying to download using an XMLHttpRequest in order to monitor download progress but I was having difficulties with the FileSystem API. This did the job just as I wanted, a simple file download with a progress bar. Hope it is helpful.
function download(file_url) {
var fs = require('fs');
var url = require('url');
var http = require('http');
var options = {
host: url.parse(file_url).host,
port: 80,
path: url.parse(file_url).pathname
};
var file_name = url.parse(file_url).pathname.split('/').pop();
var file = fs.createWriteStream('./' + file_name);
http.get(options, function(res) {
var fsize = res.headers['content-length'];
res.on('data', function(data) {
file.write(data);
progress(100 - (((fsize - file.bytesWritten) / fsize) * 100), $('#progressBar'));
}).on('end', function() {
file.end();
});
});
}
function progress(percent, $element) {
console.log("Download: " + parseInt(percent) + " %")
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').css("width", progressBarWidth);
}
Answer found here
I am trying to implement a Firefox Extension which modify the POST request data.
Code follows, it fails where marked "Fails here!!!"
Any insight would be helpful.
Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
var newData = "test 123";
function LOG(msg) {
var consoleService = Components.classes["#mozilla.org/consoleservice;1"]
.getService(Components.interfaces.nsIConsoleService);
consoleService.logStringMessage(msg);
}
function CMP() {
this.registered = false;
this.register();
}
CMP.prototype = {
register: function() {
if (this.registered == false) {
var observerService = Components.classes["#mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
observerService.addObserver(this, "http-on-modify-request", false);
this.registered = true;
}
},
observe: function(subject, topic, data)
{
LOG("Inside observe");
if (topic == "http-on-modify-request")
{
LOG("TOPIC is http-on-modify-request");
var httpChannel = subject.QueryInterface(Components.interfaces.nsIHttpChannel);
if(httpChannel.requestMethod == "POST"){
LOG("Inside POST")
var uploadChannel = httpChannel.QueryInterface(Components.interfaces.nsIUploadChannel);
//var uploadChannelStream = uploadChannel.uploadStream;
Modify the data here. Here for testing i am passing "test 123" as new data
var newStringInputStream = Components.classes['#mozilla.org/io/string-input-stream;1'].createInstance(Components.interfaces.nsIStringInputStream);
newStringInputStream.setData(newData,newData.length);
LOG("set data in newStringInputStream!!");
uploadChannel.setUploadStream(newStringInputStream, "text/plain", -1 );// Fails here!!!
httpChannel.requestMethod = "POST";
LOG("upload DONE!!")
}
}
},
QueryInterface : function(aIID) {
if (aIID.equals(Components.interfaces.nsISupports) ||
aIID.equals(Components.interfaces.nsIObserver))
return this;
throw Components.results.NS_NOINTERFACE;
},
unregister: function() {
var observerService = Components.classes["#mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
observerService.removeObserver(this, "http-on-modify-request");
},
classID: Components.ID('{F799F47E-ABA5-4AF1-B8F2-BD74E3E5BCC0}'),
QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsIObserver])
};
if (XPCOMUtils.generateNSGetFactory)
{
var NSGetFactory = XPCOMUtils.generateNSGetFactory([CMP]);
}
Fixed it by changing by following in the above code. Main change was in setting modified data in httpChannel.uploadStream.
Hope this helps someone!
var httpChannel = subject.QueryInterface(Components.interfaces.nsIHttpChannel);
if(httpChannel.requestMethod == "POST")
{
LOG("Inside POST")
var uploadChannel = httpChannel.QueryInterface(Components.interfaces.nsIUploadChannel);
var newStringInputStream = Components.classes['#mozilla.org/io/string-input-stream;1'].createInstance(Components.interfaces.nsIStringInputStream);
newStringInputStream.setData(newData,newData.length);
var uploadChannelStream = uploadChannel.uploadStream;
uploadChannelStream = uploadChannelStream.QueryInterface(Components.interfaces.nsISeekableStream).seek(Components.interfaces.nsISeekableStream.NS_SEEK_SET, 0);
httpChannel.uploadStream.QueryInterface(Components.interfaces.nsIMIMEInputStream);
httpChannel.uploadStream.setData(newStringInputStream);
LOG("Done POST")
}