Serverless Api Gateway Proxy Lambda with Axios to serve binary files (PDF)? - pdf

I am using serverless and axios to "passthrough" a PDF generated by the
stampery api, which needs credentials I do not want to save client-side.
In principle I get the PDF as an arraybuffer from axios, transform the arraybuffer to an buffer, which I then use to create a base64 string, needed by API Gateway binary treatment, which can be "activated" by including the isBase64Encoded: true property in the callback response object.
The following code yields an empty PDF:
const axios = require('axios');
const stamperyClientId = 'xxx';
const stamperySecret = 'xxx';
const stampery = axios.create({
baseURL: 'https://api-prod.stampery.com',
auth: {
username: stamperyClientId,
password: stamperySecret
}
});
module.exports.hello = (event, context, callback) => {
const response = {
statusCode: 200,
headers: {
'Content-Type' : 'application/pdf',
'Content-Disposition': 'inline; filename="certificate.pdf"'
},
isBase64Encoded: true
};
stampery.get(`/stamps/5b2a612680e0190004bcccc8.pdf`, {
responseType: 'arrayBuffer',
})
.then(res => {
const buffer = Buffer.from(res.data)
const base64Str = buffer.toString('base64')
response.body = base64Str
callback(null, response);
})
};
The PDF is retrieved by: `curl https://xxx.execute-api.eu-west-1.amazonaws.com/dev/certificate -o my.pdf -H "Accept: application/pdf"
I tested the setup with fileReadSync, which turned out fine:
module.exports.hello = (event, context, callback) => {
const content = fs.readFileSync("data/sample.pdf");
const response = {
statusCode: 200,
headers: {
"Content-Type": "application/pdf",
"Content-Disposition": "inline; filename=\"sample.pdf\""
},
body: content.toString("base64"),
isBase64Encoded: true
};
return callback(null, response);
};
What am I missing? Is this the right way to transform an axios arraybufferinto a base64 string?
P.S. My serverless.yml is given by:
functions:
hello:
handler: handler.hello
events:
- http:
path: certificate.pdf
method: get
package:
include:
- data/sample.pdf
resources:
Resources:
ApiGatewayRestApi:
Type: AWS::ApiGateway::RestApi
Properties:
Name: dev-stamper
BinaryMediaTypes:
- "application/pdf" # or whichever ones you need
where I already thought of the necessary binary media types.

Ok... the error was a simple typo. I wrote arraybuffer in camel case arrayBuffer, so Axios returned a string instead of an arraybuffer.
Change this line:
stampery.get(`/stamps/5b2a612680e0190004bcccc8.pdf`, {
responseType: 'arrayBuffer',
})
to
stampery.get(`/stamps/5b2a612680e0190004bcccc8.pdf`, {
responseType: 'arraybuffer',
})
and everything works as a charm...

Related

multipart/form-data request failing in react-native

I get the following error when I set the 'Content-Type' as 'multipart/form-data' in react-native.
Below is my code -
const formData = new FormData();
formData.append('org_id', org_id);
formData.append('ans', userAns);
formData.append('remark', userRemark);
formData.append('img', userImg);
files.forEach(file => {
formData.append('files', {
name: file.fileName,
type: file.type,
uri: file.uri,
});
});
const resp = await multiPartInstance({
method: 'PUT',
url: `${apiBaseUrl}/installation/${Iid}/answer/${qid}`,
data: formData,
});
return Promise.resolve(true);
I am using axios for calling apis. multiPartInstance is an axios instance -
const multiPartAccessToken = async (config: AxiosRequestConfig) => {
config.headers = {
Accept: 'application/json',
access_token: useTokenStore.getState().accessToken,
'Content-Type': 'multipart/form-data;',
};
config.timeout = 30000;
return config;
};
I've tried the above with fetch also but I keep getting the same error. The strangest part is that this request hits the server, server sends a response too but I get this error react-native side. I've noticed if I don't use FormData I don't get any error. But I need to use FormData as I have to upload image files.
Environment Details -
Windows version 21H2 (OS Build 22000.376)
react-native 0.66.3
react 17.0.2
axios ^0.24.0
react-native-image-picker ^4.3.0 (used for selecting images)
Flipper version 0.99.0
I've tried the solutions posted on below forums but they didn't work for me.
request formData to API, gets “Network Error” in axios while uploading image
https://github.com/facebook/react-native/issues/24039
https://github.com/facebook/react-native/issues/28551
I am as follow and works perfectly:
const oFormData = new FormData();
images.map((val, index) => {
oFormData.append("image", {
uri: val.uri,
type: val.type,
name: val.fileName
});
});
return axios.post(postServiceUrl, oFormData);
Somehow react-native-blob-util doesn't give this error. I modified my code as below -
import ReactNativeBlobUtil from 'react-native-blob-util';
const fileData = files.map(file => {
return {
name: 'files',
data: String(file.base64),
filename: file.fileName,
};
});
try {
const resp = await ReactNativeBlobUtil.fetch(
'PUT',
`${apiBaseUrl}/installation/${Iid}/answer/${qid}`,
{
access_token: useTokenStore.getState().accessToken,
'Content-Type': 'multipart/form-data',
},
[
...fileData,
// elements without property `filename` will be sent as plain text
{name: 'org_id', data: String(org_id)},
{name: 'ans', data: String(userAns)},
{name: 'remark', data: String(userRemark)},
{name: 'img', data: String(userImg)},
],
);

Cloudinary\Error: Missing required parameter - file - Express and Postman

first time trying to upload images to Cloudinary and I have come across an issue when using Express via Postman.
Using form-data on setting 'file' to upload an image to Cloudinary
As of now, when I try to access the req.body I get an empty object, so I guess that has to do with why cloudinary.uploader.upload cannot read the file passed as its first param, since its req.body.file, as shown in the code below.
cloudinary.config({
cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
api_key: process.env.CLOUDINARY_KEY,
api_secret: process.env.CLOUDINARY_SECRET
})
exports.upload = async (req, res) => {
try{
console.log(req.body);
const result = await cloudinary.uploader.upload(req.body.file, {
public_id: `${Date.now()}`,
resource_type: "auto"
})
return res.json({
public_id: result.public_id,
url: result.secure_url
})
}catch(err){
console.log(err)
}
}
The error message I get:
{
message: 'Missing required parameter - file',
name: 'Error',
http_code: 400
}
Any suggestions to solve this issue?
I solved it! I was not able to pass the form-data as req.body to the server, so I had to try and access it through req.files, but was not able to with that either, so I searched a bit and found a middleware 'express-fileupload', and that did the trick. I just added it in my app.js and used
const fileupload = require('express-fileupload');
app.use(fileupload({useTempFiles: true}))
So now I can access my req.files.
exports.upload = async (req, res) => {
const file = req.files.image
try{
console.log(file);
const result = await cloudinary.uploader.upload(file.tempFilePath, {
public_id: `${Date.now()}`,
resource_type: "auto"
})
res.json({
public_id: result.public_id,
url: result.secure_url
})
}catch(err){
console.log("Error", err)
return res.status(400).json({error: err})
}
}
The response I get is:
{
name: 'some-image.png',
data: <Buffer >,
size: 99770,
encoding: '7bit',
tempFilePath: ' **C:\\filepath\some-image.png** ',
truncated: false,
mimetype: 'image/png',
md5: 'b5f612a571442bf604952fd12c47c1bf',
mv: [Function: mv]
}
POST /cloudinary/upload-images 200 1617.944 ms - 119
And it is uploaded successfully to my Cloudinary.
const result = await cloudinary.uploader.upload(req.file, {
public_id: ${Date.now()},
resource_type: "auto"
})
and add file from form data and type should be File
Solved!
This is how i am setting the FormData
let myTestForm = new FormData();
myTestForm.set("name", name);
myTestForm.set("email", email);
myTestForm.set("Avatar", Avatar);
myTestForm.set("password", password);
This is how i am using the FormData
const config = {
headers: {
"Content-type": "multipart/form-data",
},
};
const { data } = await axios.post(`/api/v1/register`, userData, { config });
please don't pass it this way { userData} , had struggled for with this :/
This is how i am uploading image
const myCloud = await cloudinary.v2.uploader.upload(req.body.Avatar, {
folder: "Avatars",
width: 150,
crop: "scale",
public_id: `${Date.now()}`,
resource_type: "auto",
});
PS : in my case i had to upload only 1 image. Have not passed any parameter in app.js file
app.use(bodyParser.urlencoded({ extended: true }));
app.use(fileUpload());

Is there a limit in the body of a request to an api in React native?Because i cant send large base64 to server

It says me syntax error: JSON Parse error. unrecognized token '<'
Iam using Fetch to do the request.It let me send short base64 strings i tried so what can i do?
This is my call to the api:
export function uploadPost(post) {
let data = {
body: post.body,
picture: post.picture,
type: post.type,
user: {
_id: post.user._id,
name: post.user.name,
picture: post.user.picture
}
}
var headers = {
'Content-Type': 'application/json',
'Access-Control-Origin': '*'
}
return fetch(URL + "/uploadPost", {
method: "post",
headers: headers,
body: JSON.stringify(data)
})
.then(response => Promise.resolve(response.json()))
.catch(err => {
return Promise.reject(err);
})
}
I finally solved it. The problem was that the response was returning a 413 status and I found out that means payload too large. So I added to my node js express server this lines:
var app = express();
//after
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));

How to upload images from react native to an express backend?

I followed this example to upload images to my backend. https://github.com/expo/image-upload-example
The code I use in my RN application is:
let formData = new FormData();
formData.append('name',this.state.name);
formData.append('description',this.state.description);
formData.append('price',this.state.price);
formData.append('oprice',this.state.oprice);
let fileArr = (this.state.image).split('.');
let type = fileArr[fileArr.length -1]
let uri = this.state.image
formData.append('photo',{uri, name: `${this.state.name}.${type}`, type: `image/${type}`});
console.log(formData);
AsyncStorage.getItem('jwt', (err, token) => {
fetch('http://192.168.1.83:8000/ShopRouter/deal', {
method: 'POST',
headers: {
Accept: 'application/json',
Authorization: token,
'Content-type': false
},
body: formData
})
The code I use for my express backend is:
app.post('/ShopRouter/deal', passport.authenticate('jwt2', {session:false}), function(req,res) {
upload(req, res, function(err) {
if (err) {
console.log(err);
}
console.log(req.file);
console.log(req.files);
console.log(req.photo);
console.log(req.body.name);
console.log(req.body.description);
My Multer configuration is:
var storage = multer.diskStorage({
destination: function (req, file, cb, err){
console.log(file)
if (err){
console.log(err)
}
cb(null, './uploads/')
},
filename: function (req, file, cb) {
console.log(file)
cb(null, file.originalname + '-' +Date.now())
}
});
var upload = multer({ storage: storage }).single('photo');
The line console.log(file) prints
{ fieldname: 'photo',
originalname: 'An empty bottle .jpg',
encoding: '7bit',
mimetype: 'image/jpeg' }
I;m not sure why the backend receives this without the uri of the image, nothing gets saved in the upload folder
req.file comes back undefined.
I sorted this out by just uploading the images to s3

Wreck: Getting "Error: Invalid request payload JSON format" when posting a mp4

I am trying to post a mp4 using Wreck to an Hapi end point, but I receive Error: Invalid request payload JSON format. Below are the routes. I suspect that I should specify a content-type of video/mp4 from Wreck, but the doc don't tells how to do that, event the tests. Please help me find out what is wrong there:
{
method: 'POST',
path: '/upload/mov',
handler: function (request, reply) {
const source = path.join(__dirname, '../data/mov.mp4');
const stats = fs.statSync(source);
const fileStream = fs.createReadStream(source);
const req = Wreck.request('post', '/api/upload/mov', {
baseUrl: baseUrl,
payload: fileStream,
maxBytes: 7073741824 // 70mb
});
req.on('response', (res) => {
// code removed to try to isolate the problem
reply({ message: 'finished' });
});
}
},
{
method: 'POST',
path: '/api/uplaod/mov',
config: {
payload: {
maxBytes: 7073741824 // 70mb
}
},
handler: function (request, reply) {
// const stream = request.pipe(request.response);
// code removed to try to isolate the problem
reply({ message: 'sent' });
}
}