Recent searches
No recent searches
Nícola Gabriel
Joined Mar 21, 2024
·
Last activity Mar 21, 2024
Following
0
Followers
0
Total activity
2
Votes
0
Subscription
1
ACTIVITY OVERVIEW
BADGES
ARTICLES
POSTS
COMMUNITY COMMENTS
ARTICLE COMMENTS
ACTIVITY OVERVIEW
Latest activity by Nícola Gabriel
Nícola Gabriel commented,
Community comment Q&A - Help center and community
The solution that worked for me is:
1. Converting the image/video/file to a buffer first
2. Uploading the buffer as application/binary
The code is a bit big, but not hard to understand:
user selects file -> handleFileSelectAndUpload -> readFileAsBuffer -> handleImageUpload
const readFileAsBuffer = (file) => {
const reader = newFileReader();
reader.onload = (event) => {
const buffer = event.target.result;
handleImageUpload(file.name, buffer);
};
reader.readAsArrayBuffer(file);
};
const handleImageUpload = (name, buffer) => {
fetch(
`https://.zendesk.com/api/v2/uploads.json?filename=${name}`,
{ method: "POST", body: buffer, headers: { ["Content-Type"]: "application/binary" } }
)
.then(response => {
if(response.ok) console.log("Success uploading image!")
else console.log("Failed during image upload")
})
};
const handleFileSelectAndUpload = (event) => {
event.preventDefault();
// This is for multiple files, but if you only need one
// use readFileAsBuffer(event.target.files[0]) instead
event.target.files.forEach(file => readFileAsBuffer(file));
}
// REACT
// JAVASCRIPT / TYPESCRIPT
I spent weeks trying to figure out this, and since it worked I came back to answer this post which helped me go in the right direction and maybe help others :)
View comment · Posted Mar 21, 2024 · Nícola Gabriel
0
Followers
1
Vote
0
Comments