We Keep Coding

How to call post API with image attached in body using javascript

I want to to call post API with image attached in body. I have browsed and tried available solutions but didnt work(getting 400 as error). Solutions tried -
File which is browsed I have created a filereader object and called readAsDataURL(). It gave undefined error(bad request error)
let reader = new FileReader()
reader.readAsDataURL(event.target.files[0]);
fetch('some endpoint, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: reader, //(reader.result also i tried)
})
.then((response) => response.json())
.then((json) => console.log(json))```
Second approach was creating a dataform, even this gave bad request as error
<form class="form" id="myForm">
<input type="file" id="fileUpload" accept="image/*" onchange="previewImage(event);"/>
</form>```
```const inpFile = document.getElementById('fileUpload');
const formData = new FormData();
formData.append('inpFile', event.target.files[0]);
fetch(some endpoint, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: formData,
})
.then((response) => response.json())
.then((json) => console.log(json))```
screenshot of error

The second approach is correct except your headers. try changing them to 'Content-Type': 'multipart/form-data'.
you are not posting JSON data but FormData.

NextJS, send image file to DjangoREST back-end from API route [duplicate]

I am still trying to wrap my head around it.
I can have the user select the file (or even multiple) with the file input:
<form>
<div>
<label>Select file to upload</label>
<input type="file">
</div>
<button type="submit">Convert</button>
</form>
And I can catch the submit event using <fill in your event handler here>. But once I do, how do I send the file using fetch?
fetch('/files', {
method: 'post',
// what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

I've done it like this:
var input = document.querySelector('input[type="file"]')
var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')
fetch('/avatars', {
method: 'POST',
body: data
})

This is a basic example with comments. The upload function is what you are looking for:
// Select your input type file and store it in a variable
const input = document.getElementById('fileinput');
// This will upload the file after having read it
const upload = (file) => {
fetch('http://www.example.net', { // Your POST endpoint
method: 'POST',
headers: {
// Content-Type may need to be completely **omitted**
// or you may need something
"Content-Type": "You will perhaps need to define a content-type here"
},
body: file // This is your file object
}).then(
response => response.json() // if the response is a JSON object
).then(
success => console.log(success) // Handle the success response object
).catch(
error => console.log(error) // Handle the error response object
);
};
// Event handler executed when a file is selected
const onSelectFile = () => upload(input.files[0]);
// Add a listener on your input
// It will be triggered when a file will be selected
input.addEventListener('change', onSelectFile, false);

An important note for sending Files with Fetch API
One needs to omit content-type header for the Fetch request. Then the browser will automatically add the Content type header including the Form Boundary which looks like
Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD
Form boundary is the delimiter for the form data

If you want multiple files, you can use this
var input = document.querySelector('input[type="file"]')
var data = new FormData()
for (const file of input.files) {
data.append('files',file,file.name)
}
fetch('/avatars', {
method: 'POST',
body: data
})

To submit a single file, you can simply use the File object from the input's .files array directly as the value of body: in your fetch() initializer:
const myInput = document.getElementById('my-input');
// Later, perhaps in a form 'submit' handler or the input's 'change' handler:
fetch('https://example.com/some_endpoint', {
method: 'POST',
body: myInput.files[0],
});
This works because File inherits from Blob, and Blob is one of the permissible BodyInit types defined in the Fetch Standard.

The accepted answer here is a bit dated. As of April 2020, a recommended approach seen on the MDN website suggests using FormData and also does not ask to set the content type. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
I'm quoting the code snippet for convenience:
const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then((response) => response.json())
.then((result) => {
console.log('Success:', result);
})
.catch((error) => {
console.error('Error:', error);
});

It would be nice to add php endpoint example.
So that is js:
const uploadinput = document.querySelector('#uploadinputid');
const uploadBtn = document.querySelector('#uploadBtnid');
uploadBtn.addEventListener('click',uploadFile);
async function uploadFile(){
const formData = new FormData();
formData.append('nameusedinFormData',uploadinput.files[0]);
try{
const response = await fetch('server.php',{
method:'POST',
body:formData
} );
const result = await response.json();
console.log(result);
}catch(e){
console.log(e);
}
}
That is php:
$file = $_FILES['nameusedinFormData'];
$temp = $file['tmp_name'];
$target_file = './targetfilename.jpg';
move_uploaded_file($_FILES["image"]["tmp_name"], $target_file);

Jumping off from Alex Montoya's approach for multiple file input elements
const inputFiles = document.querySelectorAll('input[type="file"]');
const formData = new FormData();
for (const file of inputFiles) {
formData.append(file.name, file.files[0]);
}
fetch(url, {
method: 'POST',
body: formData })

The problem for me was that I was using a response.blob() to populate the form data. Apparently you can't do that at least with react native so I ended up using
data.append('fileData', {
uri : pickerResponse.uri,
type: pickerResponse.type,
name: pickerResponse.fileName
});
Fetch seems to recognize that format and send the file where the uri is pointing.

Here is my code:
html:
const upload = (file) => {
console.log(file);
fetch('http://localhost:8080/files/uploadFile', {
method: 'POST',
// headers: {
// //"Content-Disposition": "attachment; name='file'; filename='xml2.txt'",
// "Content-Type": "multipart/form-data; boundary=BbC04y " //"multipart/mixed;boundary=gc0p4Jq0M2Yt08jU534c0p" // ή // multipart/form-data
// },
body: file // This is your file object
}).then(
response => response.json() // if the response is a JSON object
).then(
success => console.log(success) // Handle the success response object
).catch(
error => console.log(error) // Handle the error response object
);
//cvForm.submit();
};
const onSelectFile = () => upload(uploadCvInput.files[0]);
uploadCvInput.addEventListener('change', onSelectFile, false);
<form id="cv_form" style="display: none;"
enctype="multipart/form-data">
<input id="uploadCV" type="file" name="file"/>
<button type="submit" id="upload_btn">upload</button>
</form>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="#" id="upload">UPLOAD CV</a></li>
<li class="nav-item"><a class="nav-link" href="#" id="download">DOWNLOAD CV</a></li>
</ul>

How to upload a single file on select using HTML5 fetch
<label role="button">
Upload a picture
<input accept="image/*" type="file" hidden />
</label>
const input = document.querySelector(`input[type="file"]`);
function upload() {
fetch(uplaodURL, { method: "PUT", body: input.files[0] });
}
input.addEventListener("change", upload);

Getting `tar: Error opening archive: Unrecognized archive format` while downloading a file from server

I have a sample.tar.gz report that's getting generated on my remote system and needs to be downloaded on a button click. I am sending a request via the server and needs to be added to file sample.tar.gz on local system.
On the server side code, I do see binary data in the response
body:"�q'l_�=ks�6���_��^��*q���d��i��bIs9���-H��ṙl����5�_�P4���e�#h��F���}�y���,I�L]/~Bj�,~�USU%E�\r�I�UM�F��R��4C� |��q�\tn[�4���_�^z"�k�u���*�/������G�,��iC믚���%�8Y\t��‚\r���E!YP���U�r/#�d0<[��W=ũ��5t���9�&�X��`cF�5��AJ%[T�I�h�D������L6���[\nC���-5�Fy�9��L��IWy#9hv\+�E%�#N���r�٦��s�5"�P*ğa�����h\̆(��&!Þ!x9a�~�"5���('��>�Iwڂ�g��"�..."
But when the below code runs, I am able to download the file:
export const SystemReport = () => {
downloadReport = (url) => {
const options = {
credentials: 'same-origin',
responseType: 'arraybuffer',
method: 'GET',
headers: {
'Accept': 'application/gzip; charset=utf-8',
'Content-Type': 'application/json; charset=utf-8'
}
}
fetch(url, options)
.then(res => {return res.blob()})
.then(blob => {
let url = window.URL.createObjectURL(blob, {type: 'application/zip'})
let a = document.createElement('a')
a.href = url
a.download = 'test.tar.gz'
a.click()
}).catch(err => console.error(err))
}
const fileUrl = `<System-Path>/api/system-report/download/${<file-name>}`
return (
<div className='download-report'>
<a href='#' onClick={() => downloadReport(fileUrl)} target='_blank' download>
<Download16 />
</a>
</div>
)
}
But when I try to unzip the file, I get the below error
# tar -xvzf ~/Downloads/sample.tar.gz
tar: Error opening archive: Unrecognized archive format
Tried looking for some solutions online since I am still learning about these things, but no luck yet. Any help will be appreciated!
Edit: There is a return, but I somehow forgot to add it here. Have edited the code.

You have made a mistake in the following line:
.then(res => {res.blob()})
The function res => {res.blob()} is equivalent (if we don't take the differences between arrow and regular functions into account) to:
function (res) {
res.blob();
}
It has no return value, so blob in the next .then block will be equal to undefined.
You need to use the res => res.blob() syntax which is equivalent to the following code:
function (res) {
return res.blob();
}

How can I send a File to my Strapi app using Fetch API in the Front-End? [duplicate]

I am still trying to wrap my head around it.
I can have the user select the file (or even multiple) with the file input:
<form>
<div>
<label>Select file to upload</label>
<input type="file">
</div>
<button type="submit">Convert</button>
</form>
And I can catch the submit event using <fill in your event handler here>. But once I do, how do I send the file using fetch?
fetch('/files', {
method: 'post',
// what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

I've done it like this:
var input = document.querySelector('input[type="file"]')
var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')
fetch('/avatars', {
method: 'POST',
body: data
})

This is a basic example with comments. The upload function is what you are looking for:
// Select your input type file and store it in a variable
const input = document.getElementById('fileinput');
// This will upload the file after having read it
const upload = (file) => {
fetch('http://www.example.net', { // Your POST endpoint
method: 'POST',
headers: {
// Content-Type may need to be completely **omitted**
// or you may need something
"Content-Type": "You will perhaps need to define a content-type here"
},
body: file // This is your file object
}).then(
response => response.json() // if the response is a JSON object
).then(
success => console.log(success) // Handle the success response object
).catch(
error => console.log(error) // Handle the error response object
);
};
// Event handler executed when a file is selected
const onSelectFile = () => upload(input.files[0]);
// Add a listener on your input
// It will be triggered when a file will be selected
input.addEventListener('change', onSelectFile, false);

An important note for sending Files with Fetch API
One needs to omit content-type header for the Fetch request. Then the browser will automatically add the Content type header including the Form Boundary which looks like
Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD
Form boundary is the delimiter for the form data

If you want multiple files, you can use this
var input = document.querySelector('input[type="file"]')
var data = new FormData()
for (const file of input.files) {
data.append('files',file,file.name)
}
fetch('/avatars', {
method: 'POST',
body: data
})

To submit a single file, you can simply use the File object from the input's .files array directly as the value of body: in your fetch() initializer:
const myInput = document.getElementById('my-input');
// Later, perhaps in a form 'submit' handler or the input's 'change' handler:
fetch('https://example.com/some_endpoint', {
method: 'POST',
body: myInput.files[0],
});
This works because File inherits from Blob, and Blob is one of the permissible BodyInit types defined in the Fetch Standard.

The accepted answer here is a bit dated. As of April 2020, a recommended approach seen on the MDN website suggests using FormData and also does not ask to set the content type. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
I'm quoting the code snippet for convenience:
const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then((response) => response.json())
.then((result) => {
console.log('Success:', result);
})
.catch((error) => {
console.error('Error:', error);
});

It would be nice to add php endpoint example.
So that is js:
const uploadinput = document.querySelector('#uploadinputid');
const uploadBtn = document.querySelector('#uploadBtnid');
uploadBtn.addEventListener('click',uploadFile);
async function uploadFile(){
const formData = new FormData();
formData.append('nameusedinFormData',uploadinput.files[0]);
try{
const response = await fetch('server.php',{
method:'POST',
body:formData
} );
const result = await response.json();
console.log(result);
}catch(e){
console.log(e);
}
}
That is php:
$file = $_FILES['nameusedinFormData'];
$temp = $file['tmp_name'];
$target_file = './targetfilename.jpg';
move_uploaded_file($_FILES["image"]["tmp_name"], $target_file);

Jumping off from Alex Montoya's approach for multiple file input elements
const inputFiles = document.querySelectorAll('input[type="file"]');
const formData = new FormData();
for (const file of inputFiles) {
formData.append(file.name, file.files[0]);
}
fetch(url, {
method: 'POST',
body: formData })

The problem for me was that I was using a response.blob() to populate the form data. Apparently you can't do that at least with react native so I ended up using
data.append('fileData', {
uri : pickerResponse.uri,
type: pickerResponse.type,
name: pickerResponse.fileName
});
Fetch seems to recognize that format and send the file where the uri is pointing.

Here is my code:
html:
const upload = (file) => {
console.log(file);
fetch('http://localhost:8080/files/uploadFile', {
method: 'POST',
// headers: {
// //"Content-Disposition": "attachment; name='file'; filename='xml2.txt'",
// "Content-Type": "multipart/form-data; boundary=BbC04y " //"multipart/mixed;boundary=gc0p4Jq0M2Yt08jU534c0p" // ή // multipart/form-data
// },
body: file // This is your file object
}).then(
response => response.json() // if the response is a JSON object
).then(
success => console.log(success) // Handle the success response object
).catch(
error => console.log(error) // Handle the error response object
);
//cvForm.submit();
};
const onSelectFile = () => upload(uploadCvInput.files[0]);
uploadCvInput.addEventListener('change', onSelectFile, false);
<form id="cv_form" style="display: none;"
enctype="multipart/form-data">
<input id="uploadCV" type="file" name="file"/>
<button type="submit" id="upload_btn">upload</button>
</form>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="#" id="upload">UPLOAD CV</a></li>
<li class="nav-item"><a class="nav-link" href="#" id="download">DOWNLOAD CV</a></li>
</ul>

How to upload a single file on select using HTML5 fetch
<label role="button">
Upload a picture
<input accept="image/*" type="file" hidden />
</label>
const input = document.querySelector(`input[type="file"]`);
function upload() {
fetch(uplaodURL, { method: "PUT", body: input.files[0] });
}
input.addEventListener("change", upload);

How do I upload a file with the JS fetch API?

I am still trying to wrap my head around it.
I can have the user select the file (or even multiple) with the file input:
<form>
<div>
<label>Select file to upload</label>
<input type="file">
</div>
<button type="submit">Convert</button>
</form>
And I can catch the submit event using <fill in your event handler here>. But once I do, how do I send the file using fetch?
fetch('/files', {
method: 'post',
// what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

I've done it like this:
var input = document.querySelector('input[type="file"]')
var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')
fetch('/avatars', {
method: 'POST',
body: data
})

This is a basic example with comments. The upload function is what you are looking for:
// Select your input type file and store it in a variable
const input = document.getElementById('fileinput');
// This will upload the file after having read it
const upload = (file) => {
fetch('http://www.example.net', { // Your POST endpoint
method: 'POST',
headers: {
// Content-Type may need to be completely **omitted**
// or you may need something
"Content-Type": "You will perhaps need to define a content-type here"
},
body: file // This is your file object
}).then(
response => response.json() // if the response is a JSON object
).then(
success => console.log(success) // Handle the success response object
).catch(
error => console.log(error) // Handle the error response object
);
};
// Event handler executed when a file is selected
const onSelectFile = () => upload(input.files[0]);
// Add a listener on your input
// It will be triggered when a file will be selected
input.addEventListener('change', onSelectFile, false);

An important note for sending Files with Fetch API
One needs to omit content-type header for the Fetch request. Then the browser will automatically add the Content type header including the Form Boundary which looks like
Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD
Form boundary is the delimiter for the form data

If you want multiple files, you can use this
var input = document.querySelector('input[type="file"]')
var data = new FormData()
for (const file of input.files) {
data.append('files',file,file.name)
}
fetch('/avatars', {
method: 'POST',
body: data
})

To submit a single file, you can simply use the File object from the input's .files array directly as the value of body: in your fetch() initializer:
const myInput = document.getElementById('my-input');
// Later, perhaps in a form 'submit' handler or the input's 'change' handler:
fetch('https://example.com/some_endpoint', {
method: 'POST',
body: myInput.files[0],
});
This works because File inherits from Blob, and Blob is one of the permissible BodyInit types defined in the Fetch Standard.

The accepted answer here is a bit dated. As of April 2020, a recommended approach seen on the MDN website suggests using FormData and also does not ask to set the content type. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
I'm quoting the code snippet for convenience:
const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then((response) => response.json())
.then((result) => {
console.log('Success:', result);
})
.catch((error) => {
console.error('Error:', error);
});

It would be nice to add php endpoint example.
So that is js:
const uploadinput = document.querySelector('#uploadinputid');
const uploadBtn = document.querySelector('#uploadBtnid');
uploadBtn.addEventListener('click',uploadFile);
async function uploadFile(){
const formData = new FormData();
formData.append('nameusedinFormData',uploadinput.files[0]);
try{
const response = await fetch('server.php',{
method:'POST',
body:formData
} );
const result = await response.json();
console.log(result);
}catch(e){
console.log(e);
}
}
That is php:
$file = $_FILES['nameusedinFormData'];
$temp = $file['tmp_name'];
$target_file = './targetfilename.jpg';
move_uploaded_file($_FILES["image"]["tmp_name"], $target_file);

Jumping off from Alex Montoya's approach for multiple file input elements
const inputFiles = document.querySelectorAll('input[type="file"]');
const formData = new FormData();
for (const file of inputFiles) {
formData.append(file.name, file.files[0]);
}
fetch(url, {
method: 'POST',
body: formData })

The problem for me was that I was using a response.blob() to populate the form data. Apparently you can't do that at least with react native so I ended up using
data.append('fileData', {
uri : pickerResponse.uri,
type: pickerResponse.type,
name: pickerResponse.fileName
});
Fetch seems to recognize that format and send the file where the uri is pointing.

Here is my code:
html:
const upload = (file) => {
console.log(file);
fetch('http://localhost:8080/files/uploadFile', {
method: 'POST',
// headers: {
// //"Content-Disposition": "attachment; name='file'; filename='xml2.txt'",
// "Content-Type": "multipart/form-data; boundary=BbC04y " //"multipart/mixed;boundary=gc0p4Jq0M2Yt08jU534c0p" // ή // multipart/form-data
// },
body: file // This is your file object
}).then(
response => response.json() // if the response is a JSON object
).then(
success => console.log(success) // Handle the success response object
).catch(
error => console.log(error) // Handle the error response object
);
//cvForm.submit();
};
const onSelectFile = () => upload(uploadCvInput.files[0]);
uploadCvInput.addEventListener('change', onSelectFile, false);
<form id="cv_form" style="display: none;"
enctype="multipart/form-data">
<input id="uploadCV" type="file" name="file"/>
<button type="submit" id="upload_btn">upload</button>
</form>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="#" id="upload">UPLOAD CV</a></li>
<li class="nav-item"><a class="nav-link" href="#" id="download">DOWNLOAD CV</a></li>
</ul>

How to upload a single file on select using HTML5 fetch
<label role="button">
Upload a picture
<input accept="image/*" type="file" hidden />
</label>
const input = document.querySelector(`input[type="file"]`);
function upload() {
fetch(uplaodURL, { method: "PUT", body: input.files[0] });
}
input.addEventListener("change", upload);