We Keep Coding

JS: axios POST with large nested object and form-data

I am to post an Axios request because using get results in a 414 error.
Here's the object:
rows= {
0 : {
"name":"Thor",
"status":"active",
"email":"somuchlightning#kaboom.io",
},
1 : {
"name":"Mesa",
"status":"active",
"email":"big-mesa#tundra.com",
},
2 : {
"name":"Jesper",
"status":"stdby",
"email":"jes#slap.net,
},
}
This is just a sample of the object's format. There is 400+ elements in the real one, thus post instead of get. I am having trouble properly building the form-data on this one. Here's what I have:
let data = new FormData();
Object.keys(rows).forEach(key => data.append(key, rows[key])); // <--- this doesn't do
data.set('target', target); // <---- this comes through just fine
axios({
method: 'post',
url: 'byGrabthorsHammer.php',
data: data,
headers: {'Content-Type': 'multipart/form-data'}
}).then(function(response) {
if (response.error) {
console.log('failed to send list to target');
console.log(response);
} else {
console.log('response: ');
console.log(response);
}
});
What comes through is just [Object][Object]' when ivar_dump($_POST);`. This is not what I want. How could I rewrite this properly so I get the data to the other side (like GET...).

Yow bro, POST Are for inserting new stuff, instead of doing a post you need a patch
axios.patch it is basically the same. And it won’t fix your issue.
To fix the issue you need to set the Content-Type to application/json, then on yow
axios.post(url, data: JSON.stringify(bigObject))
.then(Rea=>Rea)

You could try stringifying the data. JSON.stringify(data)

Upload form data fails with axios

I have a form with multiple fileds, which one is a file input. I use axios to upload the file under a separate attribute:
axios.post(ENDPOINT,{
form: formData,
image: image
}, getAuthorizationHeader())
function getAuthorizationHeader() {
return {
headers: {
'Authorization': //...,
'Content-Type': undefined
}
};
}
formData is created like this:
let formData = new FormData();
formData.append('title', values.title);
formData.append('description', values.description);
formData.append('amount', values.amount);
And the image is:
Under the network tab of the Chrome Dev tool, When I look at the request, it looks like this:
As you can see in the screenshot, the file is empty? The CONTENT-TYPE is application/json which is not what I expected. I expected browser to detect the CONTENT-TYPE as multipart/form-data
What is wrong here?

First of all, image should be part of the formData:
formData.append('image', <stream-of-the-image>, 'test.png')
Secondly, formData should be the second parameter of axios.post:
axios.post(ENDPOINT, formData, getAuthorizationHeader())
Last but no least, you should merge formData.getHeaders():
function getAuthorizationHeader() {
return {
headers: Object.assign({
'Authorization': //...,
}, formData.getHeaders())
};
}
Sample code for your reference: https://github.com/tylerlong/ringcentral-js-concise/blob/master/test/fax.spec.js

Vue.js I18n not setting language

I'm using Vue.js 2 and the I18n plugin to create a multilanguage website. The required language file (in my example nl) is requested from an external url. Unfortunately I can't get it working.
function getLanguage() {
return Vue.http({
url: '/language/nl_NL.json',
method: 'get',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
})
.then(
response =>
response.json(),
() => {
/* Error */
}
);
}
Vue.config.lang = 'nl';
Vue.locale(Vue.config.lang, getLanguage());
console.log(getLanguage());
The /language/nl_NL.json file is a json file. The network connection is ok (returns 200) and the console.log() command is showing a Promise. But the translation across my website is not working. Vue.locale is not setting the file as a translation file and I can't figure out the problem.

Corrupted files when uploading to Dropbox via Ajax

I'm trying to use the Dropbox API to send files to a specific Dropbox folder via a web interface using Ajax.
Here is my code:
function UploadFile(token, callback) {
var fileName = $('input[type=file]')[0].files[0].name,
fileData = new FormData($('#file-upload')[0]),
dbxHeaderParams = {
'path': '/' + fileName,
'mode': { '.tag': 'add' },
'autorename': true
};
$.ajax({
url: 'https://content.dropboxapi.com/2/files/upload',
type: 'POST',
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/octet-stream',
'Dropbox-API-Arg': JSON.stringify(dbxHeaderParams)
},
data: fileData,
processData: false,
contentType: false,
success: function(result) {
console.log('NICE BRO');
callback();
},
error: function(error) {
console.error(error);
callback();
}
});
}
This code works: files are uploaded to my Dropbox folder and i can open them. They even have the right name and (almost) the right size. But the problem is that they are all corrupted because some lines are added during the process.
Here is an example: if I want to upload a .txt file containing this:
harder better faster stronger
Once uploaded on my Dropbox, it will looks like this:
-----------------------------2308927457834
Content-Disposition: form-data; name="file"; filename="test.txt"
Content-Type: text/plain
harder better faster stronger
-----------------------------2308927457834--
I assume this is why I can't open files like images. I've tried several solutions but none of them can solve this. What am I doing wrong ? Thanks !

Seeing the relevant pieces of the HTML would be useful, but it looks like the issue is that you're supplying a FormData object to the upload call, as opposed to the File.
Try replacing this line:
fileData = new FormData($('#file-upload')[0]),
with this:
fileData = $('input[type=file]')[0].files[0],

Mapnik can't determine image type

I'm trying to load an image from a WMS into mapnik, but I'm getting an error Unhandled rejection Error: image_reader: can't determine type from input data. The code, stripped down, is
const request = require('request-promise');
const mapnik = require('mapnik');
request(`${wmsUrl}/GetMap`, {
qs: {
bbox: '-90,32,-89,33',
format: 'image/png',
height: 200,
layers: '5',
request: 'GetMap',
'srs(crs)': 'EPSG:4326,
styles: 'default',
version: '1.1',
width: 200,
},
}).then(res => {
const buffer = new Buffer(res);
return mapnik.Image.fromBytesSync(buffer); // This is the error line
});
I've run the request manually and it works, and I've inspected the buffer and it looks good (i.e. has 'PNG' at the start). I'm not sure what else to try.

In case anyone else encounters something similar to this, the problem is that request (or in this case request-promise) assumes that the response body should be a string and implicitly performs toString on it. To solve, the request should be
request(url, {
qs: { ... },
encoding: null,
}).then({ ... });
See more details here: https://github.com/request/request#requestoptions-callback

I solved my issue by specifying BOTH the responseType and the Content-Type header:
return axios.get(url, {
responseType: 'arraybuffer',
headers: {
'Content-Type': 'image/png',
},
});