I'm working with an application where in i require to upload audio/image/video/pdf file , sometimes they get uploaded and sometimes it display message "file format is not supported". This issue is specific to IE EDGE and IE11 only, it works good in rest of the browsers.
Related
I fear this might be a bug with firefox, as this seems to work fine on any other browser I've used. If it is not a bug, what steps need to happen to force a download (versus a display in browser) of a file that can't be displayed in the browser.
Created a react site with a fastapi backend, through the api I am able to attain the url for a file to download.
A standard Anchor element is created for the download, when the user presses a button:
let a = document.createElement('a');
a.href = url;
a.dispatchEvent(new MouseEvent('click'))
but I get a matrix screen of characters rather than a download (only on firefox). I have another file on the same page that is text-based and through the same process get a "save file box" pop-up from firefox.
I've tried, surrounding the above code with
document.body.appendChild(a);
and
document.body.removeChild(a);
as I read that at one time firefox required that.
I've tried using the settings in firefox to force a download e.g. "Save File", but the extension is not listed and I changed all the extensions and the selection for "other files" to "ask whether to open or save files"
On the Anchor Element table of browser compatibility
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
there is an * for firefox that says "see implementation notes", yet the only notes I see referring to firefox are
If the Content-Disposition header has different information from the download attribute, resulting behavior may differ:
If the header specifies a filename, it takes priority over a filename specified in the download attribute.
If the header specifies a disposition of inline, Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline.
Which I am unsure how to use that information, I have the latest firefox version and the above code works fine on Chrome and other browsers. There doesn't seem to be much information about "specifying a disposition of inline", at least for react.
I can also take the link directly from the api and put it in the different browsers with the same effect (outside of the react/web front end). The only one that tries to open the file is firefox, the rest download it.
Thanks!
There doesn't seem to be much information about "specifying a disposition of inline", at least for react.
The Content-Disposition header is an HTTP header and needs to be set on the HTTP response given by the server.
React has nothing to do with it as it runs on the client.
(And you want to set the disposition to attachment, not inline, since the download attribute isn't working).
but I get a matrix screen of characters rather than a download (only on firefox).
This suggests that:
The download attribute isn't working anywhere (likely because you are making a cross-origin request so the attribute isn't supported).
The content-type of whatever the URL points to is either:
Wrong
Just not recognised by Firefox
… and downloads in other browsers are triggered by them recognising the content-type correctly (i.e. not the download attribute).
The solution is going to involve changing the Content-Type (if it is wrong) and/or Content-Disposition (to specify that the resource is an attachment and so should be downloaded and not displayed inline) of the resource the URL points to.
I'm developing an application that uses Selenium for automation of a certain process that involves file upload.
There is a button on that website that executes some ajax which loads in the file input element, but also tries to open file chooser for some reason.
In Chrome it works fine - the file chooser is blocked (message from the console: File chooser dialog can only be shown with a user activation.).
The problem is that I can't block it in Firefox. I looked through about:config and found nothing useful.
So how do I block it?
I have an Elixir/Phoenix crud app that serves some static files.
The file names are likely to contain (german) umlauts and I want to preserve them.
First I just responded with the file to the :show route of the upload but this had the unwanted effect that the filename at the downloading client would be the uploads id (e.g. 1 or 123).
To change that I switched to serving the files via a static plug. That worked well on Chrome and Firefox but today I noticed that it doesn't on Safari. On Safari I just get Page not found.
For me it seems like Safari doesn't encode the umlauts. Is this a bug in Safari? How do I work around that?
Here is a link to a page of the app that contains such a link: https://sozialoekonomie.klausurenarchiv.de/courses/21/instructors/25/uploads
On Safari the link of the file is: https://sozialoekonomie.klausurenarchiv.de/data/Makroökonomie/Pfannkuche/1474905178102463842/Makroökonomie%20Pfannekuche%20SoSe%2015%20mit%20Lösung%201,3.pdf
While on Chrome/Firefox the file uri is:
https://sozialoekonomie.klausurenarchiv.de/data/Makro%C3%B6konomie/Pfannkuche/1474905178102463842/Makroo%CC%88konomie%20Pfannekuche%20SoSe%2015%20mit%20Lo%CC%88sung%201,3.pdf
I have my resume linked in my home page.
But I found when I host the pdf file on two different storage server, the default behavior when click on the link differs: one directly download the pdf file bug the other preview in a new tab.
the two links are as below:
http://data-10045577.file.myqcloud.com/doc/Zhao.Kai_ShanghaiUniv.pdf
http://7xocv2.dl1.z0.glb.clouddn.com/doc/Zhao.Kai_ShanghaiUniv.pdf
I have tested on firefox chrome IE that this is not a browser issue.
For some price issue I have to switch to the storage server of which the default behavior is downloading pdf file.
what settings should I have so that click the pdf link then preview instead of downlod?
Additionally, the storage server provide a configure option that can set the "http header", I know little about the web, so can setting a header work, if so, how to ?
I googled it and it seems the content-disposition argument in http header account for this. But I add content-disposition='inline', doesn't help.
if not the browser's issue, then the download one is added programmatically with headers, and the preview one is just putting your file in that folder on the server
I am using s3 to store my pdf files. But when i tries to download the files from s3 using chrome browser it doesn't do anything. It just refresh the page, no error, nothing ...
But from other browsers i can download that file.
When i checked in the console it gives 'Resource interpreted as Other but transferred with MIME type undefined.'
I got one thread from AWS https://forums.aws.amazon.com/thread.jspa?threadID=79493
But we can not tell user that go & disable this plugin & then download.
Is it a problem from AWS end?
I searched a lot but didn't get any solution.
Please help me to resolve this issue.
Thanks,
Vijay
I had this problem too. The solution it to force Chrome to download the PDF file instead of trying to open it in its reader.
In your GET request, append response-content-disposition=attachment. Refer to the S3 documentation on how to do this.
More details available here.