I just updated my User model with "avatar" field so I can upload a photo. I used a PUT method already configured and just added avatar to it. In postman the file upload (form-data) it works just fine, but when trying to upload it using axios from vue.js it doesn't work. I tried in many ways, the last one, I tried to send the request as multi form data.
async saveChanges() {
const fd = new FormData();
fd.append("id", this.$auth.user().id);
fd.append("username", this.$auth.user().username);
fd.append("email", this.user.email);
fd.append("firstName", this.$auth.user().firstName);
fd.append("lastName", this.$auth.user().lastName);
fd.append("isAdmin", this.$auth.user().isAdmin);
fd.append("password", this.user.password);
fd.append("confirmpass", this.user.confirmpass);
fd.append("avatar", this.selectedFile, this.selectedFile.name);
fd.append("_method", "put");
try {
await this.axios.put(`/users/${this.$auth.user().id}`, {
fd
}).then((res) => {
console.log(res);
});
} catch (err) {
console.error(err);
}
}
After i choose the file, it is available, but I am unable to send it trough my method. Should i create another request just for updating the avatar or is it possible to solve this?
Try this
axios.put('/users/${this.$auth.user().id', fd, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
Pass your method as post method and define put in form data
formData.append('_method', 'PUT') .
async handleSubmit() {
let formData = new FormData();
formData.append('image', this.file);
formData.append('title', this.form.title);
formData.append('_method', 'PUT')
try {
const response = await axios.post(`image-update/${this.$route.params.id}`, formData)
this.$router.push('/');
console.log(response);
} catch (e) {
this.error = 'Something error found !';
}
}
My previous wrong code that return empty result in $request->all()
let data = new FormData()
data.append('message', 'AnyMessage')
Then I change it as follows and it's working fine -
let data = "message=AnyMessage"
Related
I am trying to use the Piniata api. Here it is:
https://docs.pinata.cloud/
The idea is to upload and pin and image using the api, into my account in Piniata.
I got this sample to upload a file in base64, using Node.js and server side.
The sample use this api call:
"https://api.pinata.cloud/pinning/pinFileToIPFS"
I am suppose to be able to do this in client side as well.
However, there is no sample of client side without using Node.js. And I can't seem to find exactly a documentation of what the api call expects.
Here is the sample I got from the Piniata support:
const { Readable } = require("stream");
const FormData = require("form-data");
const axios = require("axios");
(async () => {
try {
const base64 = "BASE64 FILE STRING";
const imgBuffer = Buffer.from(base64, "base64");
const stream = Readable.from(imgBuffer);
const data = new FormData();
data.append('file', stream, {
filepath: 'FILENAME.png'
})
const res = await axios.post("https://api.pinata.cloud/pinning/pinFileToIPFS", data, {
maxBodyLength: "Infinity",
headers: {
'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
pinata_api_key: pinataApiKey,
pinata_secret_api_key: pinataSecretApiKey
}
});
console.log(res.data);
} catch (error) {
console.log(error);
}
})();
Here is my attempt to perform an upload from client side without Node.js
async function uploadFile(base64Data)
{
const url = `https://api.pinata.cloud/pinning/pinFileToIPFS`;
var status = 0;
try {
let data = new FormData();
var fileName = "FILENAME.png";
var file = new File([base64Data], fileName, {type: "image/png+base64"});
data.append(`data`, file, file.name);
data.append(`maxBodyLength`, "Infinity");
const response = await postData('POST', url, {
'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
"Authorization": "Bearer Redacted"
},
data
);
} catch (error) {
console.log('error');
console.log(error);
}
}
What I get as a response from the server is 400 and the error being:
{"error":"Invalid request format."}
What am I doing wrong?
Also, it seems like when I try to use FormData .append with a stream as a sample, it doesn't work. As if it only expects a blob.
I am getting "MissingServletRequestPartException: Required request part 'studentImg' is not present", It works fine with Postman but not with React. I am trying to call a end point in a Spring boot restful API.
Backend Controller Code:
#PostMapping("/add")
public ResponseEntity<StudentFile> addStudentImg(HttpServletRequest request, #RequestParam("studentImg") MultipartFile studentImg) {
boolean isStudent = (Boolean) request.getAttribute("isStudent");
if(false == isStudent) {
throw new EtAuthException("Only Student can add their image.");
} else {
Long addedBy = (Long) request.getAttribute("studentId");
StudentFile studentFile = studentFileService.addStudentImg(studentImg, addedBy);
return new ResponseEntity<>(studentFile, HttpStatus.CREATED);
}
}
React Components' Code Snippets:
handleStudentImgChange(event) {
this.setState({ studentImg: event.target.files[0] });
}
handleOnSubmit(event) {
event.preventDefault();
const { studentImg } = this.state;
this.props.addStudentImg(studentImg);
this.setState({ studentImg: null });
}
const mapDispatchToProps = (dispatch) => {
return {
addStudentImg: (studentImg) => {
dispatch(addStudentImgAction(studentImg));
},
};
export default connect(null, mapDispatchToProps)(AddStudentImgPage);
React Axios Call:
import axios from "axios";
const token = "...";
export const addStudentImg = (studentImg) => {
let bodyFormData = new FormData();
bodyFormData.append("studentImg", studentImg[0]);
const headers = {
Authorization: `Bearer ${token}`,
// Accept: "application/json",
"Content-Type": "multipart/form-data",
};
return axios
.request({
method: "POST",
url: "http://localhost:8080/api/studentfiles/add/",
data: bodyFormData,
headers: headers,
})
.then((res) => res.data);
};
The network log: enter image description here enter image description here
I'm unable to find any solution regarding that. Please give suggestions.
Thanks in Advance :D
You already set files[0] when you set
handleStudentImgChange(event) {
this.setState({ studentImg: event.target.files[0] });
}
then again, you are trying to access
bodyFormData.append("studentImg", studentImg[0]);
This, seems wrong, change this to
bodyFormData.append("studentImg", studentImg);
and see if it works..
First I changed these lines:
let bodyFormData = new FormData();
bodyFormData.append("studentImg", studentImg[0]);
With these:
const bodyFormData = new FormData();
const blob = new Blob([studentImg], {type: studentImg.type});
bodyFormData.append("studentImg", blob);
When I logged studentImg just above the bodyFormData, I get the response something like: {type: 'ADD_STUDENT_IMG', studentImg: File} where it was json object like this:
Then, I put thse lines and these are just working fine with it.
const bodyFormData = new FormData();
const blob = new Blob([studentImg.studentImg], {
type: studentImg.studentImg.type,
});
bodyFormData.append("studentImg", blob);
To understand how these lines are working:
Please read the FormData docs and also some additional information about how it's serialized over here.
If any queries, please ask. (P.S. prescriptionImg == studentImg for fig.)
Thanks :D
There are similar questions like this, this, this, and this, but none help.
In Node, the goal is to use the axios module to download an image from Twitter then upload this image as an image file as part of a form submission.
This code downloads the Twitter image, but the uploaded binary image is corrupted when it reaches the server (also our server).
The image must be uploaded in binary.
A form is required because other fields are also submitted with the binary image. These other form fields were removed to simplify the code sample.
const axios = require('axios');
const FormData = require('form-data');
let response = await axios.get('https://pbs.twimg.com/media/EyGoZkzVoAEpgp9.png', {
responseType: 'arraybuffer'
});
let imageBuffer = Buffer.from(response.data, 'binary');
let formData = new FormData();
formData.append('image', imageBuffer);
try {
let response = await axios({
method: 'post',
url: serverUrl,
data: formData,
});
// Do stuff with response.data
} catch (error) {
console.log(error)
}
You should pass the headers to the axios call using formData.getHeaders() to send a Content-Type header of multipart/form-data. Without it, a Content-Type header of application/x-www-form-urlencoded is sent. You could pass a responseType of stream to the axios call that downloads the image and add the stream to the form data.
You can also use axios.post to simplify the method call.
const url = 'https://pbs.twimg.com/media/EyGoZkzVoAEpgp9.png'
const { data: stream } = await axios.get(url, {
responseType: 'stream',
})
const formData = new FormData()
formData.append('image', stream)
try {
const { data } = await axios.post('http://httpbin.org/post', formData, {
headers: formData.getHeaders(),
})
console.log(data)
} catch (error) {
// handle error
}
You can use the fetch API to fetch the image as a blob object and append it to form data. Then simply upload it to its destination using Axios, ajax, or the fetch API:
const mediaUrl = "https://pbs.twimg.com/media/EyGoZkzVoAEpgp9.png"
fetch(mediaUrl)
.then((response) => response.blob())
.then((blob) => {
// you can also check the mime type before uploading to your server
if (!['image/jpeg', 'image/gif', 'image/png'].includes(blob?.type)) {
throw new Error('Invalid image');
}
// append to form data
const formData = new FormData();
formData.append('image', blob);
// upload file to server
uploadFile(formData);
})
.catch((error) => {
console.log('Invalid image')
});
I have created an input that can receive a file. Once the submit button is clicked, I set up a form Data, try to append the file to it, and then launch an axios post request to a server.
Sadly, I don't know how to pass the file to formData:
button.onclick = function(){
let formData = new FormData();
formData.append('myFile', e.dataTransfer.getData("files"));
axios.post("/api/upload", formData)
.then(response =>{
console.log(response.data)})
.catch(err=> {
console.log("error")
})
}
What is the correction to add to e.dataTransfer.getData("files")? The input file can be an image, a pdf, etc. The input looks like that:
<input type="file" multiple/>
Thanks.
try to append the formData this way:
form.append('fieldName', 'fileBufferData', 'fileName');
Field name will be the name the server look up in the form.
The buffer is the data/content of the file.
And file name.. well.. it's the file name.
Or it could be because you didn't set the header:
let form = new FormData();
form.append('field', 'buffer', 'fileName');
axios.post('/api/upload', form, {
headers: {
'Content-Type': `multipart/form-data; boundary=${form._boundary}`
}
}).then((res) => {
console.log(res.data);
}).catch((err) => {
console.log(err);
});
If this doesn't help it might be a problem on the server side.
I want to upload the file from front end developed in React and get that uploaded file inside Express js.
Below is the code snippet of React side when I am uploading the file :
handleUploadFile(ev) {
ev.preventDefault();
var a6 = "File";
const data = new FormData();
data.append('file', this.uploadInput.files[0]);
data.append('fileName', a6);
fetch('http://localhost:4000/api/addDcuments/upload', {
method: 'POST',
body: {data},
json: true,
headers: { "Authorization": cookie.load('userToken') }
}).then((response) => {
response.json().then((body) => {
this.setState({ imageURL: `http://localhost:4000/${body.file}` });
});
});
}
In above code, I have taken the form and called handleUploadFile function on it's onSubmit event.
Now, below is my backend express js code on which I am getting the uploaded file:
export function uploadDocument(req, res, next) {
console.log(JSON.stringify(req.body));
let imageFile = req.files.file;
var ext = path.extname(imageFile.name)
if(imageFile.mimetype == "application/pdf" ||imageFile.mimetype == "application/octet-stream"){
imageFile.mv('D:/React Workspace/React-videos-example/file_path/'+req.body.filename+ext, function(err) {
if (err) {
return res.status(500).send(err);
}
res.json({file: `public/${req.body.filename}.pdf`});
});
}
}
In above code, when I am trying print the req.body, it is returning "{}" as well as I am getting one error:
TypeError: Cannot read property 'file' of undefined.
So, my backend function has been called, but not able to getting that uploaded file. So can anyone have any solution or any reference link for this issue?
When using formdata, you can't use type json in your POST, it needs to be:
contentType: 'multipart/form-data'
instead of "json: true".