We Keep Coding

How to attach file in the body while using fetch(for calling api) in react native

Hi I am new to React Native, and I was trying to call my API hosted on Heroku my code is below:
const path = RNFS.ExternalDirectoryPath + '/newFile.jpg';
const handleUploadFile = async () => {
const token = await AsyncStorage.getItem('authtoken')
const file = await RNFS.readFile(path, "base64");
let url = `${host}/api/docs/add?card=${value}&number=${myFileId}`;
console.log(url);
let imageData = {
uri: path,
type: 'image/jpg', //the mime type of the file
name: 'newFile'
}
let formData = new FormData();
formData.append('file', imageData);
const response = await fetch(url, {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'authtoken': token,
'Content-Type': 'multipart/form-data'
},
body: formData
});
const output = await response.json();
console.log(output);
}
And while programming the server-side I tested my code as
But while calling API from react-native I was getting the below error:
Please help me in uploading file.

after you reciving the file as base64 you should convert it to a file and after that you can append it to your formData:
const base64File = await RNFS.readFile(path, "base64");
const blobResult = await fetch(base64File);
const file = new File([blobResult], "newFile",{ type: "image/jpg" });
const formData = new FormData();
formData.append('file', file);

FormData in React Native throws blank object

In my React Native project i'm using react-native-image-picker for image upload. Here, i am using formData to upload image. Image URL is there, but when i console the formData it shows {}. I don't know why this is happening. Here's the code :
uploadImageAsync = async (imgUri, token) => {
let apiUrl = 'url';
let formData = new FormData();
let uriParts = imgUri.split('.');
let fileType = uriParts[uriParts.length - 1];
//generate some random number for the filename
var randNumber1 = Math.floor(Math.random() * 100);
var randNumber2 = Math.floor(Math.random() * 100);
formData.append('image', {
uri: imgUri,
name: `photo-${randNumber1}-${randNumber2}.${fileType}`,
type: `image/${fileType}`,
});
console.log('formData :', formData);
let options = {
method: 'POST',
body: formData,
headers: {
Accept: 'application/json',
Authorization: 'Bearer ' + token,
'Content-Type': 'multipart/form-data',
'Cache-Control': 'no-cache',
},
};
const response = await fetch(apiUrl, options);
const json = await response.json();
}
};
Console of formData shows no data but imgUri consists image path. Why formData is showing no data?

The value property of FormData.append() can be either a USVString or a Blob.
Therefore, you can try stringifying your object and then optionally parse the string data.
const imageData = {
uri: imgUri,
name: `photo-${randNumber1}-${randNumber2}.${fileType}`,
type: `image/${fileType}`,
};
const formData = new FormData();
formData.append("image", JSON.stringify(imageData));
const formImageData = formData.get("image");
const parsedFormImageData = JSON.parse(formImageData);
console.log(parsedFormImageData );

Sending image via ajax to multer

I'm using Multer to upload an image file into my node server, and it always comes back to giving me undefined for using ajax to send the image.
Ajax :
image = $("#input-file-img").val()
const data = new FormData();
data.append("image", image);
$.ajax({
url: '/uploadfile/' + userName,
method: 'POST',
async: false,
processData: false ,
contentType: false,
data: data
})
Upload.js
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
var upload = multer({ storage: storage })
router.post('/uploadfile/:userName', upload.single('image'), async (req, res, next) => {
let user = await User.findOne({ userName: req.params.userName })
let file = req.file
let fileName = file.filename
let path = variables.kepler + 'uploads/' + fileName
user.image = path
await user.save()
if (!path) {
const error = new Error('Please upload a file ...')
error.httpStatusCode = 400
return next(error)
}
if (path) {
return res.status(200).send({
status: '200',
message: 'Operation completed successfully ...',
data: user,
path
})
}
})
I checked the image value with console and it shows C:\fakepath\Capture d’écran de 2019-09-19 11-33-59.png'
Would appreciate any help.

I think your server side code is fine, if I modify the client side code as below, everything works nicely, we end up with images in the /uploads folder:
function base64toBlob(base64, mimeType) {
const bytes = atob(base64.split(',')[1]);
const arrayBuffer = new ArrayBuffer(bytes.length);
const uintArray = new Uint8Array(arrayBuffer);
for (let i = 0; i < bytes.length; i++) {
uintArray[i] = bytes.charCodeAt(i);
}
return new Blob([ arrayBuffer ], { type: mimeType });
}
function submitForm() {
const imgRegEx = /^data:(image\/(gif|png|jpg|jpeg))/;
const imageData = $('#input-file-img').attr('src');
const mimeType = imgRegEx.exec(imageData)[1];
const blob = base64toBlob(imageData, mimeType);
const fileExt = mimeType.replace("image/", "");
const fileName = "test-image." + fileExt; // Change as appropriate..
const data = new FormData();
data.append("image", blob, fileName);
$.ajax({
url: '/uploadfile/' + userName,
method: 'POST',
async: false,
processData: false ,
contentType: false,
data: data
})
}

Solved!!!
getting value by
image = $("#input-file-img").val()
that means I was sending a type String as a file
so I had to change it to
image = $('#input-file-img')[0].files[0]
and everything works really well

Upload file to a server just by relative path /assets/image/img.png - By JavaScript

I'm building an ionic app, I've some images in the assets directory. I'm trying to send one of each by getting its path and casting to a File object as you can see in my post and sending it to a server.
Here how I can implement in this way
const img = "/assets/img/E88MIfBTVCjmB10U1GLF_elderlies.jpg";
var imgage = new File(["foo"], img, {
type: "image/jpg"
});
var headers = new HttpHeaders();
headers.append("Content-Type", "application/x-www-form-urlencoded");
let formData = new FormData();
formData.append("file", image);
return this.http.post(`${this.baseUrl}`, formData, {
headers: headers
});

Here is the solution.
async uploadFile() {
const img = "/assets/img/iKtafmNpSGyj57ZRckVt_earing.jpg";
this.convertRelativeUriToFile(img, 'a',null, (file) => {
console.log(file)
this.uploadCare.uploadImage(file).subscribe(console.log, console.log);
})
}
async convertRelativeUriToFile (filePath, fileName, mimeType, cb) {
mimeType = mimeType || `image/${filePath.split('.')[filePath.split('.').length - 1]}`;
const imageUrl = await fetch(filePath);
const buffer = await imageUrl.arrayBuffer();
cb(new File([buffer], fileName, {type:mimeType}));
}

Node/Request Error: "Processing POST Request: No Content-Type"

I have a front end Canvas that I transform into a png file that I need to POST to a third party vendor's api. It passes back to node as a base64 file and I decode it, but when I attempt the upload, it gives me the following error:
Problem processing POST request: no Content-Type specified
However, I am clearly specifying the content type in my POST call. My end goal is to upload the file to my vendor's API.
Here are the key front end aspects:
var canvasImage = document.getElementById("c");
var img = canvas.toDataURL({
multiplier: canvasMultiplier
});
var fileTime = Date.now();
var myFileName = $scope.productCode + fileTime;
$scope.filenameForVendor = myFileName;
var filename = $scope.filenameForVendor;
$http.post('/postVendor', { filename: filename, file: img }).success(function (data) {
console.log("Uploaded to Vendor");
Here is the backend POST:
app.post('/postVendor', function (req, res, next) {
var filename = req.body.filename;
var file = req.body.file;
fileBuffer = decodeBase64Image(file);
request({
url: "http://myvendorapi/ws/endpoint",
method: "POST",
headers: {
'contentType': fileBuffer.type
},
body: fileBuffer.data
}, function (error, response, body) {
console.log(response);
});
})
// Decode file for upload
function decodeBase64Image(dataString) {
var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),
response = {};
if (matches.length !== 3) {
return new Error('Invalid input string');
}
response.type = matches[1];
response.data = new Buffer(matches[2], 'base64');
return response;
}
I can POST using AJAX on the front end, but because of CORS and the vendor blocking all but server side calls to the endpoints (and they don't have JSONP), I can't use this. They are allowing my IP through for testing purposes so only I can make this work from my machine:
var send = function (blob) {
var fileTime = Date.now();
var myFileName = $scope.productCode + fileTime;
$scope.filenameForVendor = myFileName;
var filename = $scope.filenameForVendor;
var formdata = new FormData();
formdata.append('File1', blob, filename);
$.ajax({
url: 'http://myvendorapi/ws/endpoint',
type: "POST",
data: formdata,
mimeType: "multipart/form-data",
processData: false,
contentType: false,
crossDomain: true,
success: function (result) {
console.log("Upload to Vendor complete!");
// rest of code here/including error close out
}
var bytes = atob(dataURL.split(',')[1])
var arr = new Uint8Array(bytes.length);
for (var i = 0; i < bytes.length; i++) {
arr[i] = bytes.charCodeAt(i);
}
send(new Blob([arr], { type: 'image/png' }));
Update:
I realized that contentType should be 'content-type'. When I did this, it creates an error of no boundary specified as I am trying multipart-form data (which I did all wrong). How can I pass formData to Node for uploading?
Update 2:
Per the advice offered, I tried using multer but am getting an ReferenceError: XMLHttpRequest is not defined.
Client side:
var fileTime = Date.now();
var myFileName = $scope.productCode + fileTime;
$scope.filenameForVendor = myFileName;
var filename = $scope.filenameForVendor;
var formdata = new FormData();
formdata.append('File1', blob, filename);
$http.post('/postVendor', formdata, { transformRequest: angular.identity, headers: { 'Content-Type': undefined } }).success(function (data) {
Server side:
app.post('/postVendor', function (req, res, next) {
var request = new XMLHttpRequest();
request.open("POST", "http://myvendorapi.net/ws/endpoint");
request.send(formData);
})

Why do you base64 encode the file?
You can upload raw file to your Node using FormData and you will not have to decode anything.
Front end
...
var request = new XMLHttpRequest();
request.open('POST', 'http://node.js/method');
request.send(formData); // vanilla
--- or ---
...
$http.post('http://node.js/method', formData, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}); // angular
Back end
Just install request.
...
var request = require('request');
app.post('/method', function (req, res, next) {
// if you just want to push request you don't need to parse anything
req.pipe(request('http://vendor.net')).pipe(res);
}) // express