I'm calling the Facebook API from a Node.js server in order to upload a video. The video has a thumbnail hosted on another server. I want to read the file from the server, pass it as a FormData to /{page-id}/videos.
I'm able to get the file and convert it to base64 data, however, everytime that I call the API I get the following error:
(#100) Invalid image format. It should be an image file data.
Here's my code:
try {
const data = await httpUtilBase.get(thumbnailUrl, { responseType: 'arraybuffer' });
thumbnailData = `data:${data.headers['content-type']};base64,${Buffer.from(data.data).toString('base64')}`;
} catch {
return next(new ErrorResponse('Cannot fetch thumbnail url', httpStatus.BAD_REQUEST));
}
const formData = new FormData();
formData.append('url', url);
formData.append('title', title);
formData.append('published', 'false');
formData.append('thumb', thumbnailData);
formData.append('access_token', facebookUtil.decryptToken(page));
I make the call to /{page-id}/videos just after and it always fails. I don't understand what the format should be.
Related
I'm trying to send photos through telegram bot using 'sendPhoto' method with relative url (Image at file level). I'm not using any library, here is my call function:
let axiosImage = async (chatId, caption, res) => {
try {
await axios.post(`${TELEGRAM_API}/sendPhoto`,
{
headers:{'Content-Type': 'multipart/form-data'}
},{
body: {
'chat_id': chatId,
'caption': caption,
'photo': './image.jpeg'
}
})
return res.send()
} catch (e) {
console.log('\nSTATUS RESPONSE: ' + e.response.status)
console.log('\nMESSAGE RESPONSE: ' + e.response.statusText)
}}
but I'm getting this message back: {"ok":false,"error_code":400,"description":"Bad Request: there is no photo in the request"}
I tried with a web url and it sends normally.
What could I be missing? Do I have to upload the local images in some repository?
I had a similar issue recently, I managed to solve the problem using form-data npm package and built-in fs module.
const FormData = require('form-data');
const fs = require('fs');
const axiosImage = async(chatId, caption, res) => {
try {
const formData = new FormData();
formData.append('chat_id', chatId);
formData.append('photo', fs.createReadStream('./image.jpeg'));
formData.append('caption', caption);
const response = await axios.post(`${TELEGRAM_API}/sendPhoto`, formData, {
headers: formData.getHeaders(),
});
return res.send();
} catch (err) {
console.log(err);
}
}
From the Telegram api docs
If the file is already stored somewhere on the Telegram servers, you don't need to reupload it: each file object has a file_id field, simply pass this file_id as a parameter instead of uploading. There are no limits for files sent this way.
Provide Telegram with an HTTP URL for the file to be sent. Telegram will download and send the file. 5 MB max size for photos and 20 MB max for other types of content.
Post the file using multipart/form-data in the usual way that files are uploaded via the browser. 10 MB max size for photos, 50 MB for other files.
What you want to send is a file via file upload (3.). This is the answer to what you are trying to achieve:
https://stackoverflow.com/a/59177066/4668136
I have a react web app that allows users to record mp3 files in the browser. These mp3 files are saved in an AWS S3 bucket and can be retrieved and loaded back into the react app during the user's next session.
Saving the file works just fine, but when I try to retrieve the file with getObject() and try to create an mp3 blob on the client-side, I get a small, unusable blob:
Here's the journey the recorded mp3 file goes on:
1) Saving to S3
In my Express/Node server, I receive the uploaded mp3 file and save to the S3 bucket:
//SAVE THE COMPLETED AUDIO TO S3
router.post("/", [auth, upload.array('audio', 12)], async (req, res) => {
try {
//get file
const audioFile = req.files[0];
//create object key
const userId = req.user;
const projectId = req.cookies.currentProject;
const { sectionId } = req.body;
const key = `${userId}/${projectId}/${sectionId}.mp3`;
const fileStream = fs.createReadStream(audioFile.path)
const uploadParams = {
Bucket: bucketName,
Body: fileStream,
Key: key,
ContentType: "audio/mp3"
}
const result = await s3.upload(uploadParams).promise();
res.send(result.key);
} catch (error) {
console.error(error);
res.status(500).send();
}
});
As far as I know, there are no problems at this stage. The file ends up in my S3 bucket with "type: mp3" and "Content-Type: audio/mp3".
2) Loading file from S3 Bucket
When the react app is loaded up, an HTTP GET Request is made in my Express/Node server to retrieve the mp3 file from the S3 Bucket
//LOAD A FILE FROM S3
router.get("/:sectionId", auth, async(req, res) => {
try {
//create key from user/project/section IDs
const sectionId = req.params.sectionId;
const userId = req.user;
const projectId = req.cookies.currentProject;
const key = `${userId}/${projectId}/${sectionId}.mp3`;
const downloadParams = {
Key: key,
Bucket: bucketName
}
s3.getObject(downloadParams, function (error, data) {
if (error) {
console.error(error);
res.status(500).send();
}
res.send(data);
});
} catch (error) {
console.error(error);
res.status(500).send();
}
});
The "data" returned here is as such:
3) Making a Blob URL on the client
Finally, in the React client, I try to create an 'audio/mp3' blob from the returned array buffer
const loadAudio = async () => {
const res = await api.loadAudio(activeSection.sectionId);
const blob = new Blob([res.data.Body], {type: 'audio/mp3' });
const url = URL.createObjectURL(blob);
globalDispatch({ type: "setFullAudioURL", payload: url });
}
The created blob is severely undersized and appears to be completely unusable. Downloading the file results in a 'Failed - No file' error.
I've been stuck on this for a couple of days now with no luck. I would seriously appreciate any advice you can give!
Thanks
EDIT 1
Just some additional info here: in the upload parameters, I set the Content-Type as audio/mp3 explicitly. This is because when not set, the Content-Type defaults to 'application/octet-stream'. Either way, I encounter the same issue with the same result.
EDIT 2
At the request of a commenter, here is the res.data available on the client-side after the call is complete:
Based on the output of res.data on the client, there are a couple of things that you'd need to do:
Replace uses of res.data.Body with res.data.Body.data (as the actual data array is in the data attribute of res.data.Body)
Pass a Uint8Array to the Blob constructor, as the existing array is of a larger type, which will create an invalid blob
Putting that together, you would end up replacing:
const blob = new Blob([res.data.Body], {type: 'audio/mp3' });
with:
const blob = new Blob([new Uint8Array(res.data.Body.data)], {type: 'audio/mp3' });
Having said all that, the underlying issue is that the NodeJS server is sending the content over as a JSON encoded serialisation of the response from S3, which is likely overkill for what you are doing. Instead, you can send the Buffer across directly, which would involve, on the server side, replacing:
res.send(data);
with:
res.set('Content-Type', 'audio/mp3');
res.send(data.Body);
and on the client side (likely in the loadAudio method) processing the response as a blob instead of JSON. If using the Fetch API then it could be as simple as:
const blob = await fetch(<URL>).then(x => x.blob());
Your server side code seems alright to me. I'm not super clear about the client-side approach. Do you load this into the blob into the HTML5 Audio player.
I have a few approaches, assuming you're trying to load this into an audio tag in the UI.
<audio controls src="data:audio/mpeg;base64,blahblahblah or html src" />
Assuming that the file you had uploaded to S3 is valid here are two approaches:
Return the data as a base64 string instead of as a buffer directly from S3. You can do this in your server side by returning as
const base64MP3 = data.Body.toString('base64');
You can then pass this in to the MP3 player in the src property and it will play the audio. Prefix it with data:audio/mpeg;base64
Instead of returning the entire MP3 file, have your sectionID method return a presigned S3 URL. Essentially, this is a direct link to the object in S3 that is authorized for say 5 minutes.
Then you should be able to use this URL directly to stream the audio
and set it as the src. Keep in mind that it will expire.
const url = s3.getSignedUrl('getObject', {
Bucket: myBucket,
Key: myKey,
Expires: signedUrlExpireSeconds
});
You stated: "The created blob is severely undersized and appears to be completely unusable"
This appears to me that you have an encoding issue. Once you read the MP3 from the Amazon S3 bucket, you need to encode it properly so it functions in a web page.
I did a similar multimedia use case that involved MP4 and a Java app. That is, i wanted a MP4 obtained from a bucket to play in the web page - as shown in this example web app.
Once I read the byte stream from the S3 bucket, I had to encode it so it would play in a HTML Video tag. Here is a good reference to properly encode a MP3 file.
const formData = req.file('image')
const options = {
url: 'myurl'',
method: 'POST',
formData : formData
}
request.post(options, async function(err,result,body){
if(err)
{
res.json({
success: false,
message: "There are some error occured in file upload"
});
}
else
{
res.json({success: true});
}
});
I am trying to upload an image using request.post but it does not allow me to upload the image please guide how can I fix it
Please guide
Edit1:
I am using ejs as frontend.
Trying to send that uploaded image from one server(example1.com) to other server(example2.com).
Server1(example1.com) is powered with sails.js.
Thanks
Use enctype='multipart/form-data' in your ejs form.
Since you are sending that image from one backend(example1.com) to other backend(example2.com) using microservervice, first save that image in your first backend(example1.com)
Then pass that image path(example1.com/images/img1.jpg) to the post request. For example
postdata = {
imageurl: 'example1.com/images/img1.jpg',
imagesize: '1200',
}
Only example1.com can be able to access your local image path(For example: c://temp/img1.jpg). So you should upload that image in your server 1(example1.com)
Alternatively convert the image to blob type and send. This way you don't need to save the image in server1(example1.com).
I am trying to send a picture from my mobile hybrid app (Ionic 3) to my Heroku backend (Node.js) and have the backend upload the picture to Firebase Storage and return the newly uploaded fil download url to the mobile app.
Keep in mind that I am using the Firebase Admin SDK for Node.js.
So I send the base64 encoded image to Heroku (I check the encoded string with an online base64 decoder and it is alright) which is handle by the following function:
const uploadPicture = function(base64, postId, uid) {
return new Promise((resolve, reject) => {
if (!base64 || !postId) {
reject("news.provider#uploadPicture - Could not upload picture because at least one param is missing.");
}
let bufferStream = new stream.PassThrough();
bufferStream.end(new Buffer.from(base64, 'base64'));
// Retrieve default storage bucket
let bucket = firebase.storage().bucket();
// Create a reference to the new image file
let file = bucket.file(`/news/${uid}_${postId}.jpg`);
bufferStream.pipe(file.createWriteStream({
metadata: {
contentType: 'image/jpeg'
}
}))
.on('error', error => {
reject(`news.provider#uploadPicture - Error while uploading picture ${JSON.stringify(error)}`);
})
.on('finish', (file) => {
// The file upload is complete.
console.log("news.provider#uploadPicture - Image successfully uploaded: ", JSON.stringify(file));
});
})
};
I have 2 major issues:
Upload succeeds but I when I go to Firebase Storage console, there is an error when I try to display the preview of the picture and I cannot open it from my computer when I download it. I guess it is an encoding thing....?
How can I retrieve the newly uploaded file download url ? I was expecting an object to be returned in the .on('finish), like in the upload() function, but none is returned (file is undefined). How could I retrieve this url to send it back in the server response?
I want to avoid using the upload() function because I don't want to host files on the backend as it is not a dedicated server.
My problem was that I add data:image/jpeg;base64,at the beginning of the base64 object string ; I just had to remove it.
For the download url, I did the following:
const config = {
action: 'read',
expires: '03-01-2500'
};
let downloadUrl = file.getSignedUrl(config, (error, url) => {
if (error) {
reject(error);
}
console.log('download url ', url);
resolve(url);
});
I am using Twitter module for nodejs to upload media to my twitter account. As example program from here https://github.com/desmondmorris/node-twitter/tree/master/examples#media.
Instead of using image from system i am passing a base64 encoded string of the image. When i run this program it output the base64 string(image) in the console in a loop and after a while it crashes and doesn't upload my image.
// Load your image
var data = require('fs').readFileSync(image);
// Make post request on media endpoint. Pass file data as media parameter
client.post('media/upload', {media: image}, function(error, media, response){
if (!error) {
// If successful, a media object will be returned.
console.log(media);
// Lets tweet it
var status = {
status: 'I am a tweet',
media_ids: media.media_id_string // Pass the media id string
}
client.post('statuses/update', status, function(error, tweet, response){
if (!error) {
console.log(tweet);
}
});
}
else{
console.log("error upload");
}
});
So i tried different method. I saved the base64 encode image in to out.png
fs.writeFile("out.png", data.image, 'base64', function (err) {
console.log(err);
});
var data = require('fs').readFileSync("out.png");
and this code output error saying
Error: ENOENT: no such file or directory, open 'D:\Local server\nodejs\out.png'
This file does exist i have confirmed
Update
Api returns [Error: Status Code: 400]
hi there are several nodejs api which allows to serve as a client library for Twitter, and with which you can upload your media to your twitter account, the most popular twitter and are node-twitter-api