1

Alright, so a little preface: I've been working on adding drag and drop file uploading to the course management system called Moodle (specifically 2.0.1). This version of Moodle uses the YUI3 framework and uploads the form data with the file to be uploaded and the save-as name through an io-upload-iframe. The file is stored in the super global $_FILES until the filesystem is sent the relevant data on where to store it permanently.

The trouble I'm having is that instead of using YUI3's drag and drop features (Which, from a cursory look at their website is not the kind of drag and drop I need anyways) I'm using the native HTML5 drag and drop code. This seems to work in most major browsers (I haven't had the time to test much, and it's outside the scope of this project). The trouble I'm having is that this design of DND immediately gives you a file from the Event object in javascript. I could send this file object off to wherever I want, but the filesystem is only designed to handle variables temporarily stored in the $_FILES variable. I've not been able to find any easy way of getting this file stored there, unfortunately. I could to an HTTP request of various forms (either one of YUI3's special Y.io() requests or an XHR), but this requires a lot of duplicated code from the original source code.

Anybody have some suggestions?

Clint
  • 11
  • 2

1 Answers1

0

Hard to tell what your problem is. But whatever your server or filesystem is, it has nothing to do with the temporarity of the $_FILES array.

When you receive the DND event, and YUI subsequently sends the file, then you will receive some data either in $_FILES or in $_POST. If so, just use move_uploaded_file or file_put_contents and store it elsewhere.

Assign that moved file a md5() hash as name, and have that returned as file identifier for your AJAX-DND upload request.

You can then use that hash id in your Javascript code, and refer to the already uploaded image file by this reference. Should your app initiate a normal form request after the drag'n'dropping, then you just include the collected image reference ids. And thus your server-side code can associate it again.

You could even reconstruct the $_FILES array if you want to:

foreach ((array)$_POST["prev_image_ids"] as $md5) {
    $md5 = basename($md5);
    $_FILES["image"][] = array(
        "tmp_name" => $fn="./already-uploaded/$md5",
        "size" => filesize($fn), "type"=>"image/whatever",
        "name" => "unknown.jpg", "error"=>UPLOAD_ERR_OK,
    );   // you could store away those original attributes too
}
mario
  • 144,265
  • 20
  • 237
  • 291
  • Sorry, I probably wasn't clear in all that, the problem I'm having is the "and YUI subsequently sends the file" bit. By design file upload is normally done through File input in a form, which is POSTed, I need to replicate that without a form because the DND event gives ME the file, rather than storing it. – Clint Apr 23 '11 at 15:29
  • When you receive that file object, then you don't need a form. Skimming some articles on DND, you use the [`.getAsDataURL()`](http://dev.w3.org/2006/webapi/FileAPI/#readAsDataURL) method on it, which you can then use to craft an AJAX request. -- I can't believe there are no YUI plugins which already handle that. – mario Apr 23 '11 at 15:50
  • http://stackoverflow.com/questions/2117845/html-5-file-api and browse around http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/ for some more tutorials – mario Apr 23 '11 at 15:53
  • .getAsDataURL() just runs an input file through a FileReader object, which gives you data to work with, such as a text document. I've experimented with all of these DND-related objects, but they don't actually upload anything. As I said I could use an XHR object to send the dropped file to another PHP file, but I'm working with existing code and I want to minimize changes as much as possible. There are a lot of other parameters that need to be passed when uploading a file. What I really need is some way to upload files without any sort of destination. I don't know if that's possible though. – Clint Apr 23 '11 at 19:23
  • Nah. That doesn't make much sense. You can store your file into .localStorage maybe. But at some point you'll have to send it to some server. Or is this image uploading without purpose? -- Also you should show some existing code, maybe you'll get a more specific answer then. – mario Apr 23 '11 at 19:33
  • @mario: the problem is how do you send it to the server the same way that an upload form does – user102008 May 11 '11 at 01:35