Comments (6)
The point about overlapping CSS zones is that it provides legacy (and by now I would say very legacy) support for no-D&D upload (not FF/Chrome/Safari/Opera). It works by creating an element that's relatively positioned and with hidden overflow, putting an <input type=file>
inside and giving that input maximum possible transparency and font size so it will likely fill the entire parent element. That parent element, in turn, clips the input. This way when you drop a file onto the element you are actually dropping it onto the input.
In your case I see two approaches:
- fiddle with CSS and see if you can make clipping boxes peacefully coexisting near each other
- better - drop legacy iframe support (
iframe: false
) and rely on drag & drop only - this gives you complete flexibility of CSS without trade offs
edit: I should probably mention that IE10 still doesn't support D&D but it's fairly rare so it might be worth having two versions of your page since nobody can deny the beauty of proper CSS/HTML.
from filedrop.
Removing the iframe option worked wonderfully, thanks! I am in a PURE Chrome environment, so 95% of the time, my clients should be using DnD. However, for that other 5%, take a look at the image attached. How can I allow them to click the folder icon to restore click/browse functionality? It looks as if the FIleDrop handle may be what I want but haven't I ruled that out by shutting down iframe? Your help is greatly appreciated, as is this awesome jQ extension!
from filedrop.
Hardly any problem there - simply create new FileDrop zone for every folder icon you have. A zone isn't necessary that standard <fieldset><legend>...
markup - it can be bound to really any kind of element with any children. Therefore nobody prevents you from having something like this:
<span id="drawings_legacy"><img></span>
$('#drawings_legacy').filedrop()
The only downside is that you will have to handle both D&D and this legacy drop zones but if you reuse your code properly this won't be a problem.
It looks as if the FIleDrop handle may be what I want but haven't I ruled that out by shutting down iframe?
You can't toggle legacy/HTML5 upload on the fly (not a good idea, it will need to add/remove event listeners, somehow prevent DOM structure, etc.) but it's not user-friendly either so I think the above approach will work better for you.
from filedrop.
So far, all of your suggestions have been GREAT! I've actually solved the whole thing by tweaking the .fd-file CSS to include the area around the folder icon. Now I have a new problem... my $_FILES global in PHP is always empty. The console reports that each file is being processed correctly, being POST'd to my AJAX call and my progress
events are working.
Here's my file processing function in JavaScript:
var processUploads = function(f,subdir) {
$.each(f, function (i, file) {
console.log('Processing ' + file.name);
file.event('sendXHR', function() {
$('#fileprog').progressbar({value:0,max:file.size});
});
file.event('progress', function(curr) {
$('#fileprog').progressbar({value:curr});
});
file.sendTo('ajax/ajax.receiveFile.php?subdir=' + subdir + '&job_id=' + job_id);
});
};
And here's my PHP:
require_once ( 'init.php' );
var_dump($_FILES);
ob_start();
$callback = &$_REQUEST['fd-callback'];
$job_id = &$_REQUEST['job_id'];
$subdir = &$_REQUEST['subdir'];
$j = loadJob($job_id);
$save_path = "D:\\JobFiles\\" . $j->gOrderNumber() . "\\" . $subdir . "\\";
if ( ($_FILES['fd-file']['size'] > 0) && is_uploaded_file($_FILES['fd-file']['tmp_name']) ) {
$name = $_FILES['fd-file']['name'];
if (move_uploaded_file($_FILES['fd-file']['tmp_name'], $save_path.$name)) {
$j->addAttachment($subdir,$name);
echo 'true';
} else {
echo 'false';
}
}
ob_end_flush();
from filedrop.
First off, sendXHR is now xhrSend (since FileDrop v2), by analogy with added xhrSetup. The former still works but is deprecated.
Second, you're not using FileDrop right - check included upload.php, you will see that $_FILES is used for legacy iframe uploads while php://input (RAW_POST_DATA) is used fpr modern AJAX uploads. This means that if you upload via iframe it's exactly like normal <form enctype="multipart/form-data" method="post">
but with AJAX you upload raw data, you get no file name, nothing, so $_FILES is not populated - this kind of metadata (info about, er, data) you can get from $_SERVER['HTTP_X_FILE_NAME']
and other X-
headers. Once again, check the included upload.php.
from filedrop.
Got it! Thanks for all of your help!
from filedrop.
Related Issues (20)
- Using FileDrop as standard input element HOT 4
- File without parameter name in post request HOT 1
- Not Receiving $_FILE in PHP HOT 2
- [questions] Status of this project / plans HOT 2
- Upload but not saved HOT 7
- Documentation/progressbar, suggestion of adding comment or CCS for demo
- file.type seems doesn't work for several files HOT 8
- Traditional ASP Forms Application Usage HOT 1
- Can I get returned data from the `sendTo()` function? HOT 1
- Change Url Dynamically HOT 3
- Clear the drop area HOT 1
- File Drop js is not working in strict mode
- Please add a license
- Files of the same name are ignored when uploading directories HOT 2
- Click to upload only allowed once HOT 2
- move_uploaded_file HOT 3
- MIME type before upload? HOT 1
- request function, fd.serialize(form) HOT 1
- file name problem HOT 1
- Publish to NPM.js HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from filedrop.