Redirect file drop event into file input - javascript

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

Related

setting an input control's Filelist to a previously selected Filelist

In my web app, the user selects local images via input type='file'. The app has multiple 'brushes' and, for each brush, the user can select a different set of local images to be used as 'paint' by the brush. If possible, I would like to use just one input type='file' and, when a given brush X is the editable brush (only one brush at a time is editable), I'd like to refresh the input so that its Filelist is the editable brush's Filelist, not simply the most recently selected bunch of files. I expect this is not possible. Is that right?
You wouldn't be able to set the FileList on an input control programmatically as that would imply that you could read (or re-upload) files that the user had not just selected manually (security risk.)
Maybe what you could do instead is compromise on the "I would like to use just one input type='file'" part. You could have an array of the input type='file' elements, and then show/hide them depending on which brush is selected. That would give the illusion of showing a different list of selected files in the UI.
This is not possible, since being able to set the default directory is a security risk. You wouldn't want a website to access your file system.

Can I drop an input tag holding a file onto a droppable zone?

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)?

HTML5 File Upload Input - onChange

When the user selects files to be uploaded I present one of two buttons to take action on the file(s) based on how many files there are. I get the number of files by including an onchange=getNumFiles(this) in the file input tag.
My problem is that I hide the button to take action on the files after the user clicks it, and if the user selects the same file(s) a second time the button is not "re-presented". This is happening because the file upload input never actually changed because the input is still holding the original file selection. How can I account for this?
Is there a way to clear the contents of the file upload input? I've tried setting the value to null to no avail. Or is there a different event other than onchange that I should be using? hope this makes sense....
"Is there a way to clear the contents of the file upload input"
Yes, call .reset() on the form.
$("#myform")[0].reset();
Now if the same file is selected again it will correctly trigger a change event since it changed from nothing to something again.

making drag and drop upload with less javascript

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.

Detect when user has selected a file for upload (without timers)

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.

Categories

Resources