Using HTML5 File API to upload Photos via Facebook Graph API - facebook

I'm trying to make a photo organizing Facebook application without using server-side process.
Now I can preview photos by using FileReader object's readAsDataURL method, such as...
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var imgObj = $(document.createElement('img')).attr('src',reader.result).appendTo('#image_preview_wrapper');
};
reader.readAsDataURL(file);
}, false);
The question is how to post the image data to Facebook.
I'm trying to do something like
var reader = new FileReader();
reader.onload = function(e) {
var data = reader.result;
FB.api('/me/photos','post',{ image : data },function(res){
alert(res);
});
}
reader.readAsBinaryString(file);
In this case, I can't set enctype="multipart/form-data" and I'm getting 400 Bad Request.
Can anybody help me?

Related

Is it possible to get all the element on a web page using html package

I am making a flutter webscrawler app and I am required to get all the element on a web page(from body and rest of it)This is what I have done so far.
var url = Uri.parse(
'https://www.dr.com.tr/');
var response = await http.get(url);
var document = parse(response.body);
// print(document.body?.text.trim()); Not working
// print(document.body?.innerHtml);Not working
// print(document.outerHtml)//not working
user this.. html: ^0.15.0
import 'package:html/dom.dart';
var document = parse(response.body);
var element = document.getElementsByClassName("class you want to access");
var innerHtml = document.getElementsByClassName("name")[0].innerHtml
//element.getElementsByTagName("element name")[0].innerHtml

How to get file path or binary content of file in sap.m.UploadCollection

I want to retrieve the binary content of a file I upload with the UploadCollection control. If I were able to get the full path of the file, there would be a way to do it with a file reader, but I can't seem to find it.
Is there another way I can get the file location or the binary content?
<UploadCollection id="idUploader" maximumFilenameLength="55" maximumFileSize="10" multiple="true" sameFilenameAllowed="false"
instantUpload="true" noDataDescription="Drop files or use the "+" button for pending upload" change="onChange"
fileDeleted="onFileDeleted" filenameLengthExceed="onFilenameLengthExceed" fileSizeExceed="onFileSizeExceed" typeMissmatch="onTypeMissmatch"
uploadComplete="onUploadComplete" beforeUploadStarts="onBeforeUploadStarts" class="sapUiLargeMarginStart sapUiTinyMarginTop uploader"/>
You could try something like this with the onChange event of sap.m.UploadCollection.
onChange: function(oEvent) {
var that = this;
var reader = new FileReader();
var file = oEvent.getParameter("files")[0];
reader.onload = function(e) {
var raw = e.target.result;
sap.m.MessageToast.show("binary string: " + raw);
};
reader.onerror = function(e) {
sap.m.MessageToast.show("error");
};
reader.readAsArrayBuffer(file);
},

How to send http request using XMLHttpRequest instead of form request for Dropzone?

I want to upload files from my computer to the server using DropzoneJS. The documentation says to use a form which includes a URL to post to. However, instead of this I want to get the files in my javascript file so that I can send a XMLHttpRequest to the server and get a response from the same post. The problem is for some reason the Dropzone needs a URL (Even when I put
Dropzone.autoDiscover = false;
in my Javascript file with the URL, the error is gone but the dropzone isn't able to function). Is there a way to not put the form action url altogether? I do not want to make two different http requests. Here's the form:
<form method="post" enctype="multipart/form-data" id="my-awesome-dropzone" class="dropzone"></form>
Since ie10, it's possible to upload files using XHR2, like this:
if (new XMLHttpRequest().upload) {
var form = document.getElementById('my-awesome-dropzone');
var fileSelect = document.getElementById('file-select');
var uploadButton = document.getElementById('upload-button');
form.onsubmit = function(event) {
event.preventDefault();
// Update button text.
uploadButton.innerHTML = 'Uploading...';
// Get the selected files from the input.
var files = fileSelect.files;
// Create a new FormData object.
var formData = new FormData();
// Loop through each of the selected files.
for (var i = 0; i < files.length; i++) {
var file = files[i];
// Add the file to the request.
formData.append('files[]', file, file.name);
}
// Set up the request.
var xhr = new XMLHttpRequest();
xhr.open('POST', 'handler.php', true);
xhr.onload = function () {
if (xhr.status === 200) {
uploadButton.innerHTML = 'Done';
var data = xhr.responseText
// do something with the response
} else {
console.log('An error occurred!');
}
}
xhr.onerror = function() {
console.log('An error occurred!');
}
xhr.send(formData);
}
} else {
// browser doesn't support JS file uploading
}
Source: http://blog.teamtreehouse.com/uploading-files-ajax

How to fetch and navigate to url provided by API using TypeScript

I have a website manager that will return to me a different url for the server that my client should connect too.
So what I would like to do in my typescript function is resolve the first url, read the text, and then open that in a new window. Right now I can only open website manager window with the bellow code.
var aWindow = window.open("http://azureredirect.net/home/workspace/" + this.workspace.id, "Window", "");
if (aWindow) {
aWindow.focus();
}
What I really want is something like the following but the WebClient line does not work(this is the C# version of what I would do)
var url = WebClient.open("http://azurejupyterredirect.net/home/workspace/" + this.workspace.id").toString();
var aWindow = window.open(url, "JuPy", "");
if (aWindow) {
aWindow.focus();
}
here's an example of how you could do this:
$(document).ready(function() {
var workspaceId = '2';
$.ajax('http://azurejupyterredirect.net/home/workspace/' + workspaceId)
.then(
function(url) {
window.open(url);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Why this link's test doesn't work?

I write a test for a link with Protractor(using Pattern Page Object), but it always gave an error. So I decide to see what was going on and I write this one:
test.spec.js
it('It should redirect to Google.de', function(){
var logo = angularPage.logo3;
angularPage.clickLink(logo);
browser.getCurrentUrl().then(function (url) {
console.log('---> url:'+url);
});
});
login.page.js
this.navigate = function(ptor) {
browser.get(browser.baseUrl);
ptor = protractor.getInstance();
ptor.waitForAngular();
}
this.clickLink = function(link){
link.click();
var ptor;
this.navigate(ptor);
}
And what I got was the link didn't redirect me to another web page. I think is weird because the link actually works when I click on it. Anyone know what that can be happening?
Thanks.
My problem was that when you try to get current URL you can get it with two ways:
Supports AngularJS
var logo = angularPage.logoH3;
angularPage.clickLink(logo);
browser.getCurrentUrl().then(function (url) {
console.log('---> URL: '+url);
});
No Supports AngularJS
var logo = angularPage.logoH3;
angularPage.clickLink(logo);
browser.driver.getCurrentUrl().then(function (url) {
console.log('---> URL: '+url);
});
So login.page.js stays finally like this
login.page.js
this.clickLink = function(link){
link.click();
}
Thanks for your helping and your time ;)