Im trying to make a file input field have the following extensions only ".zip,.rar,.tar,.tar.gz" and i also want to trap event for when file has been selected and dialog has closed. any help
Limiting the file selection to certain extensions can't be done using the normal browser's file upload control. You'd have to use a Flash-based uploader like SWFUpload (Features Demo here) or Uploadify for this.
The event of a new file selection will be reflected in the onchange event.
Related
I have an Angular keystroke service that I am listening to keyboard keystrokes & performing actions based on the keystroke pressed.
I have a keyboard shortcut that I would like for it to open the file dialog, & the user should select a specific JSON file to upload, & then use this JSON data & convert to an object to use in the system.
The normal way of uploading a file is trough a HTML: <input type="file" />. However I am in a service and I don't need an input element, nor do I have where to put it. as I don't think a service should contain HTML.
How can I accomplish to trigger the file dialog box to open in a function & get the data of the selected JSON file that without an input and without downloading any external npm packages.
Unfortunately, <input type="file"> is a little bit special in HTML. You cannot generate such an event in JavaScript that would correspond clicking this input.
The only way to trigger this programmatically is to have a hidden UI component where this input is added and then the click triggered.
I'm working on a basic jQuery plugin that attaches itself to a file input and allows the user to choose an image, with which the plugin will then generate a preview.
Note: The plugin doesn't immediately try to upload the file (That will happen when a form is submitted and is beyond the scope of the plugin).
What want to do is accept a drop event on another element (In this case the window), which would ideally set the value of the file input to be the dropped file, and update the preview.
Now I know from researching and looking at other questions similar to this, that it's not possible to programmatically set the value of a file input for security reasons, which makes perfect sense. User action is required to set the value of the file input.
Is there some way to perhaps take something from the drop event (Which is user input) and use it to fill the file input's value? Or is it just simply not possible whatsoever to programmatically set it's value?
Alternatively, if the above isn't possible - is there perhaps a way to redirect the drop event from my other element, onto the file input and let the browser handle setting the file input's value?
The only other way I could conceive this working would be to have the file input (Which in my case is positioned off-screen) follow the mouse around while it's dragging so that the drop event eventuallylands in the file input.
Any other techniques or tips welcome.
Thanks
what i want to do is localize <asp:FileUpload> control. as far as i understand it is not possible, because input file is being rendered by a browser and there is no way to control it from the server.
so i do this: i create <asp:FileUpload>, make it transparent, create input text and input button and write
function browse() {
$('#fileupload').click();
}
on input button onclick event.
firefox and chrome does fine, IE8 - does not: it opens fileupload's "Browse..." dialog, writes it's value to input text (via $('#filepath').val($('#fileupload').val());), but when i start uploading, there is this problem: jQuery function before the Postback for FileUpload in ASP.NET
So my question is: is there any other (better?) way to override upload control (custom width, localized texts on button etc...), that works on every browser?
Thanks.
Have you tried uploadify so far?
How to show image thumb from input type file without upload, or with
I need to create file preview, when user select file in input type=file, i found, that ajax don't support file upload, so - maybe it is possible to show thumbs _without_actual_upload_ in js? Jquery/simple js
There's no current, cross-browser compatible method of getting the data from a file input.
You could use a hidden iframe as the target for upload, when the user selects a file, submit the form to the iframe window. You could use the jQuery Form Plugin (since you tagged jQuery), which will create the hidden iframe for you if the form contains a file input.
Some browsers implement File API, so you could use it for displaying the images. Using the File API together with some new features of the XMLHttpRequest objects, it's possible to upload files using ajax.
Other possibility is to upload the file with hidden iframe.
I would like to to create a 2-step file uploader:
Open dialog.
Select one file from computer.
I would like to eliminate the step where the user must submit the form, and instead do it automatically with JavaScript. Is there anyway to achieve it?
Thanks.
Setting an onChange event and checking for whether the ".value" of the upload field is "!= null" does the trick for me. However, accessing file upload fields programmatically is always a shaky issue, and things can change with future browser security updates.
If you want to be sure, use a flash based upload component like SWFUpload.