I get a pop-up "Do you want to allow this website to open an app on your computer?" in IE11 when a pdf is downloaded.
With the code below in angularts the correct pop-up is opened "Do you want to open or save the file"? But also "Do you want to allow this website to open an app on your computer?"
const headerOptions = new HttpHeaders({
// 'Cache-Control': 'private',
// 'Content-Disposition': 'attachment; filename = ' + filename,
'Content-Type': 'application/pdf'
});
const requestOptions = {
headers: headerOptions,
responseType: 'blob' as 'blob'
};
this.http
.post(
`${this.url}?id=${id}&datasource=${datasource}&device=${device}&browser=${browser}&link=${link}`,
dataObj,
requestOptions
)
.catch(error => {
return this.clickHandlerError(error);
})
.pipe(
map((data: any) => {
const blob = new Blob([data], {
type: 'application/pdf'
});
window.navigator.msSaveOrOpenBlob(blob, filename);
})
)
.subscribe((result: any) => {});
I expect to have just the correct pop-up to open or save the file.
This is a client side error message letting the user know that this action will cause an application to open on the user's system. If you want this to stop then you'll need to configure the client machine not the web application.
I suggest you to check your IE options and disable this prompt.
If issue persist than you can reset your IE application can help to fix this issue.
Related
I am stuck with a file upload process in a react app. In the app, I am trying to upload local video files to Google Cloud Storage.
I take the input file from:
<input type={`file`} accept=".mp4" onChange={VideoSelectChangeFunc} />
In VideoSelectChangeFunc, I get the local URL of the input file by,
let file = URL.createObjectURL(event.target.files[0])
Then I use it in axios to send to cloud
export const UploadVideo = async (file, signedurl, asset_uuid) => {
let resultState = { state: '', data: {} };
await axios({
method: 'put',
url: signedurl,
data: file,
headers: {
'Content-Type': 'application/octet-stream',
},
}).then(function (response) {
resultState.state = 'success';
resultState.data = response.data
}).catch(function (error) {
resultState.state = 'error';
resultState.data.message = error.message;
window.toastr.error(error.message);
console.log(error)
})
return resultState;
}
What I see on cloud is:
blob:http://localhost:3000/9b650cbf-8b49-440b-9e90-da6bdb5d392a
This is just the local URL of the file as string but not the video itself, when I copy and paste it on browser I can see the video. I searched the situation and saw 'Content-Type': 'blob' would solve the problem. However, we are checking headers in our CORS Policy, so it has to be 'Content-Type': 'application/octet-stream'. Is there a way to work this out?
Before sending it, converting the blob url into file worked. I have only added these two lines then, called axios.
let blob = await fetch(blobURL).then(r => r.blob());
var file = new File([blob], "thisVideo.mp4",{type:"video/mp4", lastModified:new Date().getTime()})
This can be useful, in the situations where the file is not uploaded right away but the url saved temporarily to be called later on which was the case here. If you are interested visit this question too:
How to get a file or blob from an object URL?
I am trying to upload a file to the server and the server APIs are written using django. The file upload is working perfectly from Postman but when i try to upload from mobile app (React Native) using axios the backend is not able to read it.
Following is the Frontend Snippet:
let accessToken = await AsyncStorage.getItem('accessToken')
let formData = new FormData()
formData.append('doc_type', this.state.selectedDoc.id)
formData.append('document', this.state.selectedFiles) // <- This is the fetched file in array format . [{filname:'abc', size:12344,.....}]
formData.append('description', this.state.description.value)
formData.append('data', JSON.stringify(this.state.selectedDoc.fields))
let url = `${AppConstants.url}api/${AppConstants.apiVersion}/upload_doc`
var config = {
method: 'post',
url: url,
data: formData,
headers: {
'Authorization': `Bearer ${accessToken}`,
}
}
axios(config)
.then((resp) => {
resolve(resp)
})
.catch((err) => {
reject(err)
});
And the backend-end if else statement is as follows:
if(request.FILES.getlist("document")):
files = request.FILES.getlist("document")
....
....
....
else:
return response.JsonResponse({
'success' : False,
'message' : 'Please Upload a file'
}, status = status.HTTP_200_OK)
The above else block is executed even though the UI is sending a valid file.
Request you to please share a solution.
Have a client-side server in react that need to request files from backend server (kotlin + spring boot) to download them.
Using the request endpoint in Swagger, Postman and Insomnia, i can success download any file with any size.
In my client-side server, have a list of this files that download can be triggered by a click in an icon. I can download files that has less than 10mb with no error, but when file has more than 10mb, it fails with Failed to fetch error.
Actually, it's a weird behavior. Let say i have a file named FILE A that has under than 10mb and FILE B with 25MB (is the max size allowed to upload). In first entried of the page, if i first request to download FILE B, it throw Failed to fetch. Now, if first request is in FILE A and after FILE B, FILE B download is successed. I'm really confused what is going on here.
Code:
const options = {
method: 'GET',
headers: { "Authorization": `Bearer ${user?.token}` },
};
fetch(`http://localhost:8080/storage/download?fileName=${filePath}`, options)
.then(function (response) {
return response.blob();
})
.then(function (myBlob) {
setSpinControl(false);
const file = new Blob(
[myBlob],
{ type: 'application/pdf' }
);
const fileURL = URL.createObjectURL(file);
if (window) {
window.open(fileURL, '_blank');
}
})
.catch((err) => {
setSpinControl(false);
console.log(err)
});
Already tried some alternatives:
Using axios (throw Network Error);
Using libraries as file-saver;
Setting timeout to 9999999;
All achieve same behavior.
I read too that createObjectURL uses memory to perform download, but max size of a file is validated to be 25MB.
Some print of Network tab:
Request Header:
Request Response:
Network List:
Any tips what i can do here?
I have an application that downloads a zip file in this way. It works regularly but when clicked, the download is performed in the background and the browser shows the actual download of the file only when the whole stream has been downloaded locally. So if the file takes 1 minute to download, the user doesn't understand what the site is doing. Is there any way to show a progress bar?
await axios({
url: sUrl,
method: "GET",
responseType: "blob" // important
})
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", fname); //or any other extension
document.body.appendChild(link);
link.click();
this.setState({ downloading: false });
})
.catch(error => {
this.setState({ downloading: false });
message.warn("Errore: " + error.message);
return [];
});
Yes, you can achieve this by using onDownloadProgress method provided by axios package, check the below example :
await axios({
url: sUrl,
method: "GET",
responseType: "blob", // important
onDownloadProgress: (progressEvent) => {
let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); // you can use this to show user percentage of file downloaded
}
})
Axios package has both onDownloadProgress and onUploadProgress to show a progress bar during download or upload, have you tried them?
I recommend you to have a quick look at this Tutorial
I have been implementing the Dropbox API and Dropbox Chooser into a React application. When I call 'oauth2/authorize' for the login page, I receive the correct HTML, but when I load it I receive 404 errors for all of the image files that would help style it. I attached a screenshot to show what the error looks like. Any idea why it's happening or how to fix it?
The call :
axios({
method: 'get',
url: 'https://www.dropbox.com/oauth2/authorize?client_id=' + APP_KEY + '&response_type=code',
headers: {
'Content-Type' : 'application/json' ,
'Authorization' : AUTH
}
}).then(function (res) {
let pretty = stringifyObject(res.data, {
singleQuotes: false
});
response.send(pretty);
})
.catch(function (error) {
response.send(error.response.data);
});
The fetch :
fetch(URL + '/api/login', {method: "GET"})
.then((res)=>{ return res.text() })
.then((text)=>{
let html = React.createElement('div',{dangerouslySetInnerHTML: {__html:text}});
})
You're downloading the data for Dropbox's /oauth2/authorize, but https://www.dropbox.com/oauth2/authorize is actually a web page, not an API call, so you should not be using your HTTPS client like this to download the HTML data.
You should instead be directing the user to that https://www.dropbox.com/oauth2/authorize... page in their browser. For example, you can construct the https://www.dropbox.com/oauth2/authorize... URL and then put it in an <a> HTML link for the user to click on, or redirect them there via JavaScript, depending on what makes sense for your use case.