Show input file dialog on load? - javascript

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.

Related

window.history.go(-1) on Firefox vs. chromium-based browsers different behaviours with forms

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.

How to hide "open with" option at the time of downloading file using javascript?

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

is it possible to prevent oracle apex from submitting a page until a user clicks on a refresh button on that page?

I have just started working with Oracle APEX and would like users to be able to download reports from my application.The problem is I have a number of reports which have a large number of rows. Each time a user clicks on a page tab, the page is resubmitted and the query for the reports are executed again. This results in a lot of delay and is becoming frustrating for the users!
Is it possible to stop APEX from resubmitting the page until the user clicks a refresh button or is it possible to stop the query for reports from executing everytime the user clicks on a page tab?
To prevent submitting you can change the page template. Open page properties, in the section Shared Components find Templates. Near the word Page you will see a link to its template. Follow this link, then find a section Standard Tab Attributes. In the field Current Tab you will see something like this:
<li>#TAB_LABEL##TAB_INLINE_EDIT#</li>
Change this value to:
<li><a class="active">#TAB_LABEL#</a>#TAB_INLINE_EDIT#</li>
After that an active item in a menu will be displayed as a static text, not as a link.
All pages with this page template will have this behavior. If you don't need to change behavior of all pages: before changing template make copy of it, change the copy and choose the new template in a page properties.
Have you tried with the conditions?? I pretty new with Apex too, I had a similar problem, what I did was put conditions to the buttoms and regions.
After that I good a nice result. Hope it helps you.
Good luck

jquery dialog capture form data from external site

How would you capture form data from a dialog window on your website that is going to an external website? For example, the dialog loads the website www.google.com. I want to capture the text typed when the when the user searches for something. If that's not possible, is there a way to capture the key strokes from the dialog window?
That depends on the site, if they have an API.
Though I must tell you, you are talking about spying on people using internet,that's illegal and unethical.

How to download a file from a modal Dialog that posts back to itself?

ASP.Net Webforms pages are wrapped in a massive form, which restricts other forms on the page because nested forms don't work. This is intentional because in a webforms project, there can only be one form per page, and all of the server/client interaction require it. In order to build a custom form, I put together a modal dialog in this way. In order to allow for proper error messages from the server, my modal dialog has to post back to itself. In order to do this, I followed this trick to use the form target as the name of the window the dialog is in.
The problem comes when I try to add a button to download a file. When I try to download a file from this dialog now, nothing happens. I can redirect my response to the file in question, but I can't write the file to the response because the dialog box just sits there when I click the button and nothing happens.
After quite some time researching and building a small test case, I found out that there are several interesting factors here.
Response.WriteFile() works fine in webforms, even when the form is set with a target of the current window.
Modal dialogs can download files perfectly fine, unless the form is set to the target of the current window.
Through extensive testing, this appears to be an obscure bug, or perhaps even a strange attempt at security. This also appears to be specific to IE 8, though I didn't get to test other versions of IE.
The trick to allowing the download inside the modal dialog is to change the form's target.
function downloader() {
document.getElementById("form1").target = "_blank";
}
This fixes the IE bug and appears to work in all other browsers (though I couldn't get opera to show the pop up at all, even with "allow all popups").
Thought my day of toiling shouldn't go to waste and maybe this will help someone else in the future.

Categories