I'm trying to make an upload holder for my website, so users can easily drag and drop a file on it.
there is a lot of libraries and events for doing that, but I need a simple way.
this (thought) came to my mind...
I put a file input to the page and sets width and height.
now when my user drag a file on it, onchange event will work.
but I want to hide browse button and there is two way:
set 0 opacity.(it is not working in some browsers)
set hidden visibility.(the thought is not working)
help me, what else I can try?
Put the form on a hidden iframe. Use an ordinary div for the target. When the file is dropped, catch the event and update the input, then submit as post. The result is ajax-like uploading via file drag and drop.
Related
I'm making a pic uploader of drag & drop function for the react drop-zone. My task is to indicate a focus ring on the input box when particular types of the img file gets dragged into the webpage (not the input box). How can I achieve this?
I'm using next.js 13 and I don't want to implement 'getRootProps' in the layout.tsx root file for this one single matter.
I can't find a method to do what I want on the document.
I'm trying to implement a note system where users can append notes to documents and upload files inside a popover
Unfortunately, when I click on the "Browse" button, the popup is closed.
Is there anything I can do to prevent that?
Thanks
Well, forget about it, I had another event (body click) that was being intercepted by the file input button.
I've fixed the issue.
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
I am doing some front end testing using Sahi, and it's built in methods _setFile & _setFile2 are not flexible enough for the file uploading approach being used by the site. For this reason, I am wondering if I can add an input element to the browser and attach file elements and then execute a drag drop (via Sahi) to get the file elements passed to the droppable area. Does anyone know if it's possible to drag files from one browser input tag to another (or another viable approach)?
I'm having some trouble to make the file input work the way I want it. The file element exists of 2 parts, the textfield and the browse button. In other browsers than IE clicking either of them opens a window where you can select your files. In IE however it only opens when I click the browse button. If I click the textfield next to it I have to doubleclick in order for the window to open.
Is there a way to fix this with javascript so a single click on the textfield will also open the window? I tried the following, but it didn't work. (code is much simplified from the real example)
Html:
<input id="file" name="file" type="file"/>
JS / jQuery:
$("#file").click(function(){
$(this).trigger("dblclick");
});
$("#file").dblclick(function(){
alert("Double");
});
Now the above code alerts the "Double" but doesn't open the window. Is there a way to fix this?
Thanks in advance.
Since the entire control is native to the browser (and are never exposed as text box plus button) you simply do not have access to methods/events that will allow you to invoke the upload button. I believe this is mainly to avoid sites tricking the user into uploading non-intended files.
If you can manage to take a little time to implement a workaround, this does a nice of job of creating a rather nice upload component thats easier to manage. I'm sure a quick google will list you many other examples on how to style the file upload component.
Just tested your code with JSFiddle on IE6 (http://jsfiddle.net/SUWRK/) and, from my understanding, it works as you're expecting ... The alert shows up on a single click event (please note that's it's tricky to catch the dblclick event in IE < 9 - see https://gist.github.com/399624).
Are you sure there's not something else going on with the larger code set?