I'm trying to download a Blob from React that can be either a PDF or an image(jpg, jpeg, png...). PDF's are downloading good from the next code but images not. I get this files from Laravel Backend with an return response()->download($full_path);
The request in React is the next one:
export const getFileApi = async (token, documentType) => {
const url = API_URL + `commerces/getFileDoc`;
try {
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
body: JSON.stringify({document_type: documentType})
});
const data = await response.blob();
console.log(data);
const link = document.createElement("a");
link.href = URL.createObjectURL(data);
link.download = documentType;
link.click();
if(data.errors) {
return {
error: data.errors
}
} else {
return {
data: data,
error: null
}
}
} catch (error) {
console.log(error);
return {
error: JSON.stringify(error)
}
}
Console.log of data is printing this:
When I open the image with Windows 10 the error says: "Seems that format of this file is not compatible"
Thank you beforehand.
Related
English is not my main language so I will try to explain myself (sorry).
I have a website developed in ReactJS that works perfectly on a subdomain called "test": https://test.mydomain.com
All the URL's that call the api point to another subdomain called "api", for example: https://api.mydomain.com
In the desktop browser it works perfectly. But when I test in the device's browser (Chrome) the api always returns "undefined".
I copy part of my code:
At https://test.mydomain.com:
const myFuction= async() => {
try {
const API_ENDPOINT = `https://api.mydomain.com/users.php`;
const data = await fetch(API_ENDPOINT, {
method: "POST",
headers: {
Accept: "application/json",
"Content-type": "application/json",
},
body: JSON.stringify({
param1: "PARAM_1",
}),
});
const users = data.json();
if (users.result.user != undefined) {
console.log("Token OK");
return true;
} else {
console.log("Token ERROR.");
return false;
}
} catch (error) {
alert(error);
console.error(error);
}
return "ERROR";
};
Could you help me? I've been trying to figure it out for days.
Thanks!
I solved the problem with the help of #punjira. The error was from CORS.
To solve it I had to add this line in the backend response:
header('Access-Control-Allow-Origin: *');
And I commented the headers that I sent in the request, the function looks like this:
const myFuction= async() => {
try {
const API_ENDPOINT = `https://api.mydomain.com/users.php`;
const data = await fetch(API_ENDPOINT, {
method: "POST",
// headers: {
// Accept: "application/json",
// "Content-type": "application/json",
// },
body: JSON.stringify({
param1: "PARAM_1",
}),
});
const users = data.json();
if (users.result.user != undefined) {
console.log("Token OK");
return true;
} else {
console.log("Token ERROR.");
return false;
}
} catch (error) {
alert(error);
console.error(error);
}
return "ERROR";
};
i have a url which onclick downloads me a csv file.I want to fetch data from that url and show it in console.How can i do it?
const downloadCsv = async () => {
try {
const target = `https://connect.emgsrv.com/wT3Kjzu4B3P43VQikYjq/wT3Kjzu4B3P43VQikYjq.CSV`; //file
const res = await fetch(target, {
method: 'get',
mode: 'no-cors',
headers: {
'content-type': 'text/csv;charset=UTF-8',
//'Authorization': //in case you need authorisation
}
});
const data = await res.text();
console.log(data,'hahah');
} catch (err) {
console.log(err)
}
}
Up to this point a file can be viewed on input:
export async function store(input) {
console.log("input", input);
return httpClient.post(`${apiEndpoint}`, input);
}
On above console.log, it shows data as:
But, on the serverside laravel, if I print_r($request->all()) it shows data as:
My http client looks like this:
import axios from "axios";
const apiURL = process.env.MIX_SPA_URL;
axios.defaults.headers.common["Content-Type"] = "application/json";
axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.withCredentials = true;
let client = axios.create({
baseURL: apiURL,
});
axios.interceptors.response.use(null, (error) => {
const expectedError =
error.response &&
error.response.status >= 400 &&
error.response.status < 500;
if (!expectedError) {
console.log("error from httpClient >>", error);
}
return Promise.reject(error);
});
function setJwt(token) {
client.defaults.headers.common["Authorization"] = "Bearer " + token;
}
const httpClient = {
get: client.get,
post: client.post,
put: client.put,
delete: client.delete,
setJwt,
};
export default httpClient;
Also, in case if you want to look how I have created input file using react-hook-form as:
<input
className={`form-control w-full ${
errors["cover_image"] ? "border-red-500" : ""
}`}
type="file"
{...register("cover_image")}
/>
Why are the images not being sent to the server?
In case of laravel, I am using laravel sanctum in combination with fortify. And, the middleware added for this route are auth:sanctum and verified.
Also, I have tried by adding headers as: "Content-Type": "multipart/form-data",
export async function store(input) {
console.log("input", input);
return httpClient.post(`${apiEndpoint}`, input, {
headers: {
"Content-Type": "multipart/form-data",
},
});
}
But, with this header, not a single data got send to the server. Here, is the screenshot:
I think you must put your file in formData and then pass it as your post request data
export async function store(input) {
const formData = new FormData();
formData.append("cover_image", input.cover_image[0]);
formData.append("blockchain", input.blockchain);
formData.append("description", input.description);
formData.append("name", input.name);
return await httpClient.post(`${apiEndpoint}`, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
}
I am trying send file to server with laravel api and react but the response is null this my code in frontend
let File;
const onChangeHandler = (e) => {
File = (e.target.files[0]);
}
const send = () => {
const formData = new FormData();
formData.append("media", File);
console.log(formData)
try {
PostRequest.post("/upload-post", {"media": formData}).then(r => console.log(r.data)).catch((e) => console.log(e));
} catch (error) {
console.log(error)
}
}
and my header :
headers: {
"Content-Type": "multipart/form-data",
"Accept":"application/json",
"Authorization": Token
}
and network tab
img
File log
File log
this is from post man
in react native how can i convert image and upload it to server as binary
this is my code i try to use form data insted of header but still not working
the upload work but the image not showing
ImagePicker.showImagePicker(options, async (response) => {
if (response.didCancel) {
setIsLoading(false);
} else if (response.error) {
setIsLoading(false);
} else if (response.customButton) {
} else {
setIsLoading(true);
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type: mime});
}
var file = dataURLtoFile(
'data:image/png;base64,' + response.data,
'hello2.png',
);
var myHeaders = new Headers();
myHeaders.append('type', '1');
myHeaders.append('uploadPath', 'xxx');
myHeaders.append('Content-Type', 'image/png');
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: file,
processData: false,
contentType: false,
};
fetch(
'xxx',
requestOptions,
)
.then((response) => response.json())
.then((result) => {
after i upload the image this is how it show
I don't know why you convert your file to data:String, and try to upload as image/png content-type. Do you want data:string or as the file itself? if you want to use data:String then your content type should be plain/text.
This is what I normally do to upload image.
const uploadImage = async (response) => {
const put = await fetch(url, { method: 'post', body: response, headers: { "Content-type": response.type } });
}
Where response is the response returned by ImagePicker.showImagePicker
Depending on your server, you may require form data, which then you need to do the formData way.
const uploadImage = async (response) => {
let formData = new FormData();
formData.append('file', response);
//in most case you do not need to create custom header object.
const put = await fetch(url, { method: 'post', body: formData });
}
blob method.
const uploadImage = async (response) => {
var blob = new Blob(response);
//in most case you do not need to create custom header object.
const put = await fetch(url, { method: 'post', body: blob, header: { 'Content-type": response.type });
}
Above example is base on a single file selected, if you select multiple file then response will of course be an array instead.