How can I upload video files to facebook using FB api? I looked around stackoverflow but I can only find answers when the video/picture is already online somewhere, but I want to let the user directly upload a file to facebook via my application.
One solution that can upload to facebook is https://stackoverflow.com/a/8195849/364938, but it assumes I have the picture online somewhere.
Is this even possible? If if is, then how?
This is my code for uploading video using javascript from client side.I used axios for http requests, but you can use your own.
function uploadVideo(adaccount, access_token, file) {
return axios({
method: 'POST',
url: `${adaccount}/advideos`,
params: {
access_token,
upload_phase: 'start',
file_size: file.size
}
})
.then(res => {
return new Promise(resolve => {
resolve(transferVideo(
adaccount,
access_token,
res.data.upload_session_id,
res.data.start_offset,
res.data.end_offset,
file,
1
))
})
})
.catch(err => {
// Note: you can handle your error here
console.log(err)
})
}
function transferVideo(adaccount, token, sessionId, start, end, file, number) {
if (start === end) {
return new Promise(resolve => {
resolve(postVideo(adaccount, token, sessionId, file.name))
})
}
const blob = new Blob([file], {
type: file.type
})
const chunk = blob.slice(start, end, file.type)
const formData = new FormData()
formData.append(
'video_file_chunk',
chunk,
`#chunk${number}.${file.type.split('/')[1]}`
)
return new Promise(resolve => {
resolve(uploadVideoChunk(
adaccount,
token,
start,
sessionId,
formData
))
})
.then(res => {
return new Promise(resolve => {
resolve(transferVideo(
adaccount,
token,
sessionId,
res.start_offset,
res.end_offset,
file,
number++
))
})
})
.catch(err => {
throw new Error(JSON.stringify(err))
})
}
function uploadVideoChunk(adaccount, access_token, start_offset, upload_session_id, formData) {
return axios.post(`${adaccount}/advideos`, formData, {
headers: {
'content-type': 'multipart/form-data'
},
params: {
access_token,
upload_phase: 'transfer',
start_offset,
upload_session_id
}
})
.then(res => res.data)
.catch(err => {
throw new Error(JSON.stringify(err))
})
}
function postVideo(adaccount, access_token, upload_session_id, title) {
return axios({
method: 'POST',
url: `${adaccount}/advideos`,
params: {
access_token,
upload_phase: 'finish',
upload_session_id,
title
}
})
.then(res => res.data)
.catch(err => {
throw new Error(JSON.stringify(err))
})
}
Related
This is my JS code for the API
export const getUser = async (user) => {
//Working
const json = await fetch( "*****/username/getUser", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
user:user
}),
})
.then((res) => {
return res.json();
})
.catch((err) => {
console.log("Error in getUser: " + err);
});
return json;
};
Here is an attempt to make the request, which unfortunately return the authentication error.
fetchUser.request("kirolosM")
.then((result)=>{
console.log(result);
}).catch((err)=>{console.log("Error ",err);})
The error
{
"message": "Missing Authentication Token"
}
I have tested the API using postman and it is working as expexted.
Probably useful to compare the request sent from your json code to the one you're sending from postman. It looks like you need to include you auth token in your headers in your request.
Something like
export const getUser = async (user) => {
//Working
const json = await fetch( "*****/username/getUser", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authentication": `Bearer ${token}`
},
...
So I have this react native code that sends a token in string format, yes I've checked that var token = getAccessToken() is a string and I've console.log it to ensure it is a JWT token as well. But on the Django side when I check request.headers.get('Authorization', None) it outputs: 'Bearer [object Object]' what's going on?
React Native Code
import {Auth} from 'aws-amplify';
export async function getAccessToken() {
try {
const currentUser = await Auth.currentAuthenticatedUser();
console.log(currentUser);
Auth
.currentSession()
.then(res => {
let accessToken = res.getAccessToken();
// let jwt = accessToken.getJwtToken();
// You can print them to see the full objects
// console.log(`myAccessToken: ${JSON.stringify(accessToken)}`);
// console.log(`myJwt: ${JSON.stringify(jwt)}`);
console.log(accessToken.jwtToken)
return accessToken.jwtToken
});
} catch (error) {
console.log('error signing up:', error);
}
}
const getPosts = () => {
var token = getAccessToken();
const config = {
headers: { Authorization: `Bearer ` + token }
};
axios
.get(`${url}/posts`, config)
.then(response => {
console.log(response)
setData(response.data);
})
.catch(error => {
console.log(JSON.stringify(error));
});
}
I also tried
const config = {
headers: { Authorization: `Bearer ${token}` }
};
I also tried
function getPosts() {
var token = getAccessToken().then(token => {
const config = {
headers: {
Authorization: `Bearer ${token}`
}
};
console.log(token)
axios
.get(`${url}/posts`, config)
.then(response => {
console.log(response)
setData(response.data);
})
.catch(error => {
console.log(JSON.stringify(error));
});
}).catch(error => {
console.log(JSON.stringify(error));
});;
};
and console.log(token) is outputting "undefined"
Update getAccessToken to return result of
Auth .currentSession()
And
Make getPosts function async and await getAccessToken().
OR
Use the then block to result of promise
getAccessToken().then(token=>{ // Call the api },err=>{ // Handle the error }
Otherwise what you are getting is a promise that's not resolved yet.
I am facing an issue of receiving NULL response for the axios POST request I made. How do I correct this error?
I've tried to changing multipart/form-data into x-www-form-urlencoded and multipart/x-www-form-urlencoded
async submitUser() {
this.memberObj = {
id: this.memberObjLocal.id,
name: this.memberObjLocal.name,
password: this.memberObjLocal.password,
email: this.memberObjLocal.email,
password: this.memberObjLocal.password,
gender: this.memberObjLocal.gender,
experience: this.memberObjLocal.experience,
birth: this.memberObjLocal.birth,
phoneNum: this.memberObjLocal.phoneNum,
address: this.address,
introduce: this.introduce,
pic: this.pic
};
const config = {
headers: { "Content-Type": "multipart/form-data" }
};
var formData = new FormData();
for (let data in this.memberObj) {
console.log(data);
formData.append(data, this.memberObj[data]);
console.log(this.memberObj[data]);
}
for (var key of formData.entries()) {
console.log(key[0] + ", " + key[1]);
}
try {
let response = await this.$axios.$post("/users/", formData, config);
this.$router.push("/");
console.log(response) // null
} catch (e) {
console.log(e.response);
}
}
Please try to use like this
import axios from "axios";
//... your codes here
axios({
url: "/users/",
method: "post",
data: formData,
headers: config.headers
})
.then(response => {
this.$router.push("/");
console.log(response);
})
.catch(error => console.error(error));
//... and other codes here
and you can see more examples!
Is it possible to use lowercase HTTP header key "content-type" with django rest framework parsers?
HTTP headers are case insensitive, but it doesn't seem to work with DRF 3.3.2. My frontend (emberjs) sends request with lowercase header name by ember-network(Fetch API).
Yes, it is. But ember-network or Fetch API doesn't return success and error callback.
Instead:
fetch(url, {/options/}).then(
(success) => {
//
},
(error) => {
//
});
use:
fetch(url, {/options/}).then(
(response) => {
if (response.status >= 400) {
//error
} else {
//success
}
}
);
Note response.json() returns a promise, my code is:
function request(url, type, data){
return new Ember.RSVP.Promise((resolve, reject) => {
let headers = {...};
let credentials = 'include';
fetch(url, {
method: type,
body: JSON.stringify(data),
headers: headers,
credentials: credentials
}).then((response) => {
response.json().then(
(json) => {
if (response.status >= 400) {
reject(json);
} else {
resolve(json);
}
})
});
}
I am new to Ionic framework & going to develop an app which utilises rest api from my server. In each API I have to pass a token in http header. If this token is valid then I return response & inflate the listview. If token is not valid then I have to hit another API to generate token & again hit first API to fetch data.
My problem is second case. When token is invalid, it is generate successfully & then calling first API is also successful but this time listview is not inflated.
Please help.
home.ts
loadPeople(){
this.dataService.load()
.then(data => {
this.mylist = data;
});
}
data-provider.ts
load() {
if (this.data) {
return Promise.resolve(this.data);
}
return new Promise(resolve => {
let headers = new Headers({ 'token': this.token });
let options = new RequestOptions({ headers: headers });
this.http.get('myurl1', options)
.map(res => res.json())
.subscribe(data => {
if(data.message === 'TOKEN_NOTVALID'){
this.generateToken();
}else{
this.data = data.result;
resolve(this.data);
}
});
});
}
generateAccessToken(){
var creds = "param1=xxx¶m2=zzz";
var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
this.http.post('myUrlHere', creds, {
headers: headers
})
.map(res => res.json())
.subscribe(
data => {
this.token = data.token;
this.load();
});
}
The problem is that when token is invalid , the Promise is never resolved. Only the second call to load function Promise is resolved. So you need to resolve the Promise when token is not valid. Just because the name of the function is resolve in the Promise, doesnt mean that the second call to load function will resolve the first call to load function.
You can return the data promise in generateAccessToken then resolve the promise with data returned.
load() {
if (this.data) {
return Promise.resolve(this.data);
}
return new Promise(resolve => {
let headers = new Headers({ 'token': this.token });
let options = new RequestOptions({ headers: headers });
this.http.get('myurl1', options)
.map(res => res.json())
.subscribe(data => {
if(data.message === 'TOKEN_NOTVALID'){
this.generateToken().then(data => { resole(data) } );
}else{
this.data = data.result;
resolve(this.data);
}
});
});
}
generateAccessToken(){
var creds = "param1=xxx¶m2=zzz";
var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
return this.http.post('myUrlHere', creds, {
headers: headers
})
.map(res => res.json())
.toPromise()
.then(
data => {
this.token = data.token;
return this.load();
});
}
You will have to import toPromise
import 'rxjs/add/operator/toPromise';