I have a react application where I am getting list of events and displaying them in a list. I want to have a button when I click on a specific event, it adds the user as an attendee. I had it that I display a button afterwards to show "download invitation link" but the requirement changed to download the file automatically once the user clicks the first registration link.
I am checking resources on the internet and found 2 options, the first is with URL.createObjectURL() but I don't currently have an object, I have a url of the file returned from the request. The second object I found was the browser.downloads.download but I am not sure if this would support internet explorer 11.
I thought about using the link I already have to download the file, and call it from another button, but I don't know if that's possible in React.
How can I solve this?
Related
This is a bit of a messy situation that I'll do my best to describe as accurately and briefly as possible.
I have been tasked to maintain an old project. The code is extremely messy and everything is mixed together (One PHP file for every page, and that file contains JS and HTML..)
In that project there is a form to insert new data into the database.
The requirement was for a confirmation page to show up after submitting the form, that reflects what the user has input. From that confirmation page the user can either confirm, which would write the data to the database, or go back to the form, and the user has to see all the data he input previously.
One of the fields is a file upload, that has to be an image. If the user decides to upload an image, a few additional fields are to be displayed and made required.
I was tasked to generate a preview for the uploaded image on the form page, and on the confirmation page.
That was easy enough for the form itself..
const [img] = imgfield.files;
if (img) {
imgplaceholder.src = URL.createObjectURL(img);
}
For the confirmation page, after the user submits the first form, I had the picture uploaded to a scratch folder, that gets scraped regularly, and had the picture displayed from there.
And I had the brilliant idea to do window.history.go(-1) for the button on the confirmation page, that should take the user back to the form.
<label class="navLink" id="changeClick" onclick="window.history.go(-1)">Change</label>
This worked fine on firefox. When the user clicked that link, the browser went back instantly to the previous page, with the user's previous entries still intact, where they could edit them and submit again.
On Chromium-based browsers however, when using this link to go back to the form, the preview of the uploaded image would disappear, and is replaced with the broken image icon, and the fields that should also appear, since the user had uploaded an image previously, also disappear.
What's even more confusing to me is that on firefox, clicking the browser's own back button and this link works exactly the same. Whereby in chrome-based browsers, clicking on the link shows this problem, but clicking on the browser's own back button does not.
So now the question is: why do chrome-based browsers act differently here, and (besides making an entire new hidden form within the confirmation page to send the data back to the form, which would be far too much effort for what this is worth) how to I get that link with history.go(-1) to act like the back button in chromium?
I hope I explained the situation thoroughly enough. I'd be glad to provide any additional details that might be of help.
I got a HTML page with a form. When I post, it returns a pdf based on the form data.
Is it possible to open the browser when submiting (post) the data when the user are in standalone mode?
I tried to set target="_blank" in both the form tag and on the submit button but it doesn't work.
It's not any problem if it's an a-tag link. But the problem with a link is that my form doesn't get posted (I know that I can post it trough JS but it will still be in the app).
If it isn't possible to post it with a submit button. I'll need to use a link (or another element) and with Javascript make an event that builds me the URL with a querystring with the form data. And that opens the browser and that will return me the pdf.
(However the main problem is that it isn't no way back to the app when the server give the user a pdf in app-view (standalone). And that problem isn't it any solution for what I can find. That's the reason to why I need to open it in the browser.)
I have small requirement for downloading the file, here I would like to hide "open with" option and "Save" should be "Save As", could you please help me,
I'm assuming this is firefox relating. I don't think it's possible to change the options you're trying to change. However you can change the download action which might be useful to yourself. Please see below
This will not affect media embedded in a web page - only links to the files themselves.
Click the menu button and choose Options
Select the Applications panel.
The Applications panel will display. Select the type of file for which you want to change the default action.
The Action column will give you a drop-down menu, with options on action to take, whenever you click that type of file.
Always ask: will prompt you to select what action you want Firefox to take when you click on that type of file. This can be useful if Firefox is automatically saving a file type or is always opening it with a certain program and you want to be asked what to do.
Save File: will always save the file to your computer using the Downloads window, whenever you click that type of file.
Open the file with an application or plugin of your choosing.
Click Ok to close the options window after making changes]
Further reading here
I'm making a dialog for changing an image. Instead of having the user to click the file input field I want it to be brought up immediately. The input field is simply a:
<input type="file">
Is there a way to display it when page is loaded?
Bonus points if there is an angular way of doing it.
As described here only Internet Explorer allows for programmatic opening of the File Upload dialog.
So the short answer is no, there is no way to automatically open the File Upload dialog on page load.
The long answer that you might consider is that you can show it when the user clicks on anything.
The fact that you prefer an AngularJS solution tells us that you are writing a Single Page Application. Also, I don't think you need to show the File Upload dialog when the app first loads. You most likely need it to show after some user interaction - after the user clicks on something. That something, using the an AngularJS directive from here, could look like anything but be a file input. On click (the same user interaction) you can also switch to another route in your AngularJS app, effectively simulating a user navigating to another page and automatically presenting him the File Upload dialog.
I am making a blog app in Django and I want to do the following things
When the user submits the preview button I want to open the partially completed blog in a new tab in the same window.
Secondly if the user does not close the tab and again presses preview button, I want to display the updated blog in the tab which was previously opened.
How can I do this?
Edit:
As told in the answer below I am trying to use this code snippet to open it in a new window, but this does not work
<script>
var current_link = $(location).attr('href');
$('.preview_button').onClick(function() {
window.open(current_link,'preview_tab');
});
</script>
Also I currently have 3 submit buttons and I want to provide this feature only for 1 submit button i.e. preview So I cannot directly do (#form).onSubmit. For the the other two buttons, one updates the content via Ajax and the other redirects to a new page.
Try using a Javascript onSubmit to open the appropriate preview page with window.open, passing a name as the second parameter. It does almost exactly that. (If you want to support having different preview tabs associated with different editing tabs, include something in the name based on a tab ID of some kind -- maybe the article ID plus a random number, or something.)
You'll have to also send the updated content into the server via AJAX.