post bulk.json with axios elasticsearch - elasticsearch

I am trying to make bulk post with elasticsearch and axios ,
I have a problem with post request :
axios.put('http://localhost:9200/indexrandom881', {'products-bulk.json'
});
For adding and deleting index it work :
Deleting and index
axios.delete('http://localhost:9200/indexrandom'+x, {
});
Adding an index
axios.put('http://localhost:9200/indexrandom881'+x, {
});
Please do anyone has an idea.
In brief I need this command in axios form
curl -H "Content-Type: application/x-ndjson" -XPOST http://localhost:9200/products/_bulk --data-binary "#products-bulk.json"
Thanks

Thanks #Joe Sorocin but that working only in node js , I need to implement it in react , in react it shows error fs.readfile is not a function
the full essay is :
File : App.js
function App() {
const axios = require('axios');
const fs = require('fs');
const filePath = __dirname + '/national-es-bulk-index22.json';
const indexName = 'indexrandom881';
const url = `http://localhost:9200/${indexName}/_bulk`;
fs.readFile(filePath, async (err, jsonData) => {
if (err) {
console.error({ err });
return;
}
const { data } = await axios.post(url, jsonData, {
headers: {
'Content-Type': 'application/x-ndjson'
}
});
console.info({ data });
});
return (
<div className="App">
<h1>test</h1>
</div>
);
}
export default App;

Use post instead of put. Also, you'll need to first read the file using fs before you pass it along to Elasticsearch with the application/x-ndjson header:
const axios = require('axios');
const fs = require('fs');
const filePath = __dirname + '/products-bulk.json';
const indexName = 'indexrandom881';
const url = `http://localhost:9200/${indexName}/_bulk`;
fs.readFile(filePath, async (err, jsonData) => {
if (err) {
console.error({ err });
return;
}
const { data } = await axios.post(url, jsonData, {
headers: {
'Content-Type': 'application/x-ndjson'
}
});
console.info({ data });
});

Related

How to show a with axios loaded image in vue?

I have a GET request with axios and get a .png file back and want to show this inside my template. I can't use a path url, because the image is each time differently.
This is my fastapi route.
from io import BytesIO
from fastapi.responses import Response
#app.get("/image", response_class=Response)
def load_image():
...
buffer = BytesIO()
img.save(buffer, format="PNG")
return Response(content=buffer.getvalue(), media_type="image/png")
This is the vue component:
<script>
export default {
name: "Example",
data() {
return {
image: null;
};
},
methods: {
async loadImage() {
const url = "/image";
const response = await $axios.get(url, { responseType: "arraybuffer" });
if (response.status == 200) {
const base64string = btoa(String.fromCharCode(...new Uint8Array(response.data)));
console.log(base64string); // -> this is a empty string
this.image = 'data:image/png;base64,' + base64string;
}
},
mounted() {
this.loadImage();
},
};
</script>
<template>
<div>
<img :src="image" title="Image" />
</div>
</template>
You can...
get the data as a blob by passing { responseType: "blob" } to axios
convert the blob to base64 with FileReader (used blobToData function from https://stackoverflow.com/a/63372663/197546)
use the base64 data as the image src
example:
const app = Vue.createApp({
data() {
return {
imageSrc: null,
};
},
methods: {
async loadImage() {
const url =
"https://images.unsplash.com/photo-1664300067908-84e8beb52a8f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60";
const response = await axios.get(url, { responseType: "blob" });
if (response.status == 200) {
const base64data = await blobToData(response.data);
this.imageSrc = base64data;
}
},
},
mounted() {
this.loadImage();
},
});
app.mount("app");
function blobToData(blob) {
return new Promise((resolve) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.readAsDataURL(blob)
})
}
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios#0.27.2/dist/axios.min.js"></script>
<app>
<img :src="imageSrc" v-if="imageSrc"/>
</app>
As Chris pointed out, you can also...
get the data as an array buffer by passing { responseType: "arraybuffer" } to axios
convert array to base64 data using btoa(String.fromCharCode(...new Uint8Array(response.data)))
build the src data by adding prepending the content type to the base64 data
example:
const app = Vue.createApp({
data() {
return {
imageSrc: null,
};
},
methods: {
async loadImage() {
const url =
"https://images.unsplash.com/photo-1664300067908-84e8beb52a8f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60";
const response = await axios.get(url, { responseType: "arraybuffer" });
if (response.status == 200) {
const b64 = btoa(String.fromCharCode(...new Uint8Array(response.data)));
const imgData = "data:" + response.headers['content-type'] + ";base64," + b64;
this.imageSrc = imgData;
}
},
},
mounted() {
this.loadImage();
},
});
app.mount("app");
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios#0.27.2/dist/axios.min.js"></script>
<app>
<img :src="imageSrc" v-if="imageSrc"/>
</app>

FormData not being read by laravel on backend

This qn is related to vue and alravel, I try to make and api request on vue with const response = await http.put("api/v1/vehicles/" + vehicleId,formData);. I see the data going on payload, But when i DO dd($request->all()) It shows empty
async update(vehicleId, data) {
try {
let formData = new FormData();
(data.files ?? []).forEach((file, key) => {
formData.append("files[]", file);
});
Object.entries(data).forEach(([key, value]) => {
if (key !== "files" && value !== null) formData.append(key, value);
});
const response = await http.put(
"api/v1/vehicles/" + vehicleId,
formData
);
return Promise.resolve(response.formData);
} catch (err) {
return Promise.reject(err);
}
},
When I hit url with const response = await http.put("api/v1/vehicles/" + vehicleId,data); It shows on $request->all(). I need to add formData to attach the fiels. Is it because put request doesnot read formData??
I saw a method spoofing and I did this
let vehicle_data = { _method: "PUT", form: formData };
const response = await http.post(
"api/v1/vehicles/" + vehicleId,
vehicle_data
);
BUt it gives null on form?
PUT and PATCH request types require adding a _method property in payload and using .post instead .put
Said that, you should do this:
async update(vehicleId, data) {
try {
let formData = new FormData();
(data.files ?? []).forEach((file, key) => {
formData.append("files[]", file);
});
Object.entries(data).forEach(([key, value]) => {
if (key !== "files" && value !== null) formData.append(key, value);
});
formData.append("_method", "PUT")
const response = await http.post(
"api/v1/vehicles/" + vehicleId,
formData
);
return Promise.resolve(response.formData);
} catch (err) {
return Promise.reject(err);
}
},
Please note that I've changed request to http.post() and added formData.append("_method", "PUT")
Your API will recognize it as a PUT request and also grab payload correctly.
The same should be done for PATCH requests.

`next.js` api is resolved before promise fullfill?

I want to achieve something like this:
call my website url https://mywebsite/api/something
then my next.js website api will call external api
get external api data
update external api data to mongodb database one by one
then return respose it's status.
Below code is working correctly correctly. data is updating on mongodb but when I request to my api url it respond me very quickly then it updates data in database.
But I want to first update data in database and then respond me
No matter how much time its take.
Below is my code
export default async function handler(req, res) {
async function updateServer(){
return new Promise(async function(resolve, reject){
const statusArray = [];
const apiUrl = `https://example.com/api`;
const response = await fetch(apiUrl, {headers: { "Content-Type": "application/json" }});
const newsResults = await response.json();
const articles = await newsResults["articles"];
for (let i = 0; i < articles.length; i++) {
const article = articles[i];
try {
insertionData["title"] = article["title"];
insertionData["description"] = article["description"];
MongoClient.connect(mongoUri, async function (error, db) {
if (error) throw error;
const articlesCollection = db.db("database").collection("collectionname");
const customQuery = { url: article["url"] };
const customUpdate = { $set: insertionData };
const customOptions = { upsert: true };
const status = await articlesCollection.updateOne(customQuery,customUpdate,customOptions);
statusArray.push(status);
db.close();
});
} catch (error) {console.log(error);}
}
if(statusArray){
console.log("success", statusArray.length);
resolve(statusArray);
} else {
console.log("error");
reject("reject because no statusArray");
}
});
}
updateServer().then(
function(statusArray){
return res.status(200).json({ "response": "success","statusArray":statusArray }).end();
}
).catch(
function(error){
return res.status(500).json({ "response": "error", }).end();
}
);
}
How to achieve that?
Any suggestions are always welcome!

Getting 429 (Too Many Request) in vue.js laravel

I'm using vue.js and laravel when i open edit page i get this error in my console but Update function is called on button click and bill url is also called multiple times without parameter on mounted function
app.js:1088 GET http://localhost:8000/api/userbackend/bill/undefined 404 (Not Found)
POST http://localhost:8000/api/userbackend/Update 429 (Too Many Requests)
Code Snippet:
async mounted(){
this.roleid = this.userData.role_id;
const header = {
'Authorization': 'Bearer ' + this.LoginUserData,
};
this.editId = this.$route.params.id;
if(this.$route.params.id !== undefined) {
try{
let response = await axios.get(`/api/userbackend/bill/${this.editId}` ,{headers: header});
this.form = response.data;
}
saveRecord(){
let loader = this.$loading.show();
let formData = new FormData();
formData.append('id', this.editId);
....
const header = {
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + this.LoginUserData,
};
axios.post('/api/userbackend/Update', formData ,{headers: header}).then((response) =>{
loader.hide();
if(response.data.status == true){
.....
}
})
.catch((response) => {
loader.hide();
this.showErrorMsg();
});
},
validateBeforeSubmit(e) {
e.preventDefault();
let app = this;
this.$validator.validateAll().then((result) => {
if (result) {
app.saveRecord();
return;
}
this.showWarningMsg();
});
}
Any suggestion is highly appreciated

gapi.client.drive.files.create does not work

I'm writing a vue app. I read this sample code and wrote code like this:
const apiKey = 'mykey';
const discoveryDocs = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"]
const clientId = 'myclientid'
const scopes = 'https://www.googleapis.com/auth/drive.appdata'
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}
function initClient() {
gapi.client.init({
apiKey,
discoveryDocs,
clientId,
scope: scopes
}).then(function () {
createFile()
});
}
function createFile() {
console.log('createFile')
var fileMetadata = {
'name': 'config.json',
'parents': ['appDataFolder']
};
var media = {
mimeType: 'application/json',
body: "body"
};
gapi.client.drive.files.create({
resource: fileMetadata,
media,
fields: 'id'
}, function (err, file) {
console.log('function in createFile')
if (err) {
console.error(err);
} else {
console.log('Folder Id:', file.id);
}
});
}
window.onload=handleClientLoad()
In the console, 'createFile' is logged but 'function in createFile' is not logged, so I think function(err, file)... does not work.
What is wrong?
I want the sample code to work.
I had the same issue. The function create() returns a promise, to execute the request, it seems to need a then(). See also this post.
The example code though does not work since you will get a 403 The user does not have sufficient permissions for this file error. This seems to happen since example code will create the file not in appDataFolder but in the root directory.
I managed to get it to work using the following code. Putting all request parameters flat into the object passed to create() seems to do the trick.
const s = new Readable();
s.push("beep"); // the string you want
s.push(null);
gapi.client.drive.files
.create({
name: "config.json",
parents: ["appDataFolder"],
mimeType: "application/json",
upload_type: "media",
fields: "id",
body: s,
})
.then(function (response) {
if (response.status === 200) {
var file = response.result;
console.log(file);
}
})
.catch(function (error) {
console.error(error);
});

Resources