Permalink
Browse files

Initial Commit

  • Loading branch information...
0 parents commit 5e7874eb6748dfd74f3bfa7fad783ff8d43e1ec0 @arian committed Jun 4, 2011
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<title>Multiple Upload</title>
+<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools.js"></script>
+<script src="../Source/Request.File.js"></script>
+<script src="../Source/Form.MultipleFileInput.js"></script>
+<script src="../Source/Form.Upload.js"></script>
+<link href="http://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css" />
+<link href="styles.css" rel="stylesheet" type="text/css" />
+
+<script>
+
+window.addEvent('domready', function(){
+
+ var upload = new Form.Upload('url', {
+ onComplete: function(){
+ alert('Completed uploading the Files');
+ }
+ });
+
+ if (!upload.isModern()){
+ // Use something like
+ }
+
+});
+
+</script>
+
+</head>
+<body>
+
+<div id="wrapper">
+
+ <form method="post" action="files.php" enctype="multipart/form-data">
+ <fieldset>
+ <legend>Upload Files</legend>
+
+ <div class="formRow">
+ <label for="url" class="floated">File: </label>
+ <input type="file" id="url" name="url[]" multiple><br>
+ </div>
+
+ <div class="formRow">
+ <input type="submit" id="_submit" name="_submit" value="Upload">
+ </div>
+
+ </fieldset></form>
+
+</div>
+
+</body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,8 @@
+<?php
+
+echo '<pre>';
+
+print_r($_FILES);
+
+print_r($_POST);
+
@@ -0,0 +1,111 @@
+
+/* some general styles */
+
+body {
+ font: 0.9em 'Ubuntu', arial, sans-serif;
+}
+
+#wrapper {
+ margin: 100px auto;
+ width: 50%;
+}
+
+fieldset {
+ border: 0;
+}
+
+form {
+ border-top: 1px #545a74 solid;
+ border-bottom: 1px #545a74 solid;
+ background: #e2e5f3;
+ margin: 20px 0;
+ padding: 10px;
+}
+
+fieldset legend {
+ color: #666;
+ margin: 0;
+ font-size: 1.5em;
+ font-weight: normal;
+ padding-bottom: 20px;
+}
+
+.formRow {
+ overflow: auto;
+ border-bottom: 1px #bcbcbc solid;
+ padding: 5px 0;
+ max-width: 100%;
+}
+
+.formRow label {
+ padding: 4px;
+ margin: 0 3px 0 0;
+ border-right: 1px #bcbcbc solid;
+}
+
+
+/* Drag & Drop file uploading */
+
+.droppable {
+ border: #121a3f 1px solid;
+ border-radius: 3px;
+ background: #545A74;
+ color: white;
+ padding: 20px;
+ margin: 10px;
+ clear: both;
+ text-align: center;
+}
+
+.droppable.hover {
+ background: #121a3f;
+}
+
+.uploadList {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.uploadItem {
+ overflow: hidden;
+ border-bottom: #BCBCBC 1px solid;
+ margin: 0 20px;
+ padding: 3px;
+}
+
+.uploadItem span {
+ overflow: hidden;
+ width: 150px;
+ float: left;
+ display: block;
+}
+
+a.addInputRow,
+a.delInputRow,
+.uploadItem a {
+ display: inline-block;
+ background: url(add.png) no-repeat;
+ height: 16px;
+ width: 16px;
+ text-indent: -999px;
+}
+
+.uploadItem a {
+ float: left;
+ display: block;
+ padding-left: 20px;
+ background-image: url(delete.png);
+}
+
+a.delInputRow {
+ background-image: url(delete.png);
+}
+
+.progress {
+ margin: 5px 0;
+ height: 15px;
+ border-radius: 3px;
+ background: #545A74;
+}
+
159 README.md
@@ -0,0 +1,159 @@
+Multiple File Upload with HTML5
+===============================
+
+Upload your files the HTML5 way, drag and drop from your computer, multiple
+files the ajaxy way!
+
+It works about the same as uploading attachments to gmail.
+
+- HTML5 Drag and Drop files from your computer
+- HTML5 multiple attribute files for selecting multiple files
+- Uploading files through XMLHttpRequest with FormData
+- Progress bar
+- Graceful degradation for IE / Opera
+
+
+How To Use
+-----------
+
+Include the JavaScript files in your page, for example with the `<script>` tag,
+or with a Script Loader with an extra check for `FormData` support.
+
+When using the last option it'll look something like:
+
+ #JS
+ if ('FormData' in window){
+ // Load Form.MultipleFileInput.js
+ // Load Request.File.js
+ } else {
+ // Load IframeFormRequest
+ // e.g. http://mootools.net/forge/p/iframeformrequest
+ }
+
+If you're not using a Script Loader, just include MooTools and all three files:
+
+ #HTML
+ <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools.js"></script>
+ <script src="../Source/Request.File.js"></script>
+ <script src="../Source/Form.MultipleFileInput.js"></script>
+ <script src="../Source/Form.Upload.js"></script>
+
+To get the magic running just initiate the Form.Upload class:
+
+ #JS
+ new Form.Upload('url');
+
+This is for the html structure like
+
+ #HTML
+ <form method="post" action="files.php" enctype="multipart/form-data">
+ <fieldset>
+ <legend>Upload Files</legend>
+
+ <div class="formRow">
+ <label for="url" class="floated">File: </label>
+ <input type="file" id="url" name="url[]" multiple><br>
+ </div>
+
+ <div class="formRow">
+ <input type="submit" name="upload" value="Upload">
+ </div>
+
+ </fieldset></form>
+
+### Events
+
+The `Form.Upload` class has only one event: `onComplete`. This is only used
+in the HTML5 uploader
+
+### Graceful Degradation
+
+Note that in the HTML the input is wrapped in a `div.formRow` element. This
+is for the graceful degradation in older browsers. The Form.Upload class will
+clone the first parent that maches `.formRow` of the `input#url` element. Then
+it will append the clones after that `div.formRow` element.
+
+By default it will just upload the files and go to the page given in the action
+attribute, like any other form post. With the `isModern()` method you could
+check whether it's using the HTML5 possibilities or the legacy upload.
+
+**Example**
+
+ #JS
+
+ var upload = new Form.Upload('url', {
+ onComplete: function(){
+ alert('Completed uploading the Files');
+ }
+ });
+
+ if (!upload.isModern()){
+ // using iFrameFormRequest from the forge to upload the files
+ // in an IFrame.
+ new iFrameFormRequest('myForm', {
+ onComplete: function(response){
+ alert('Completed uploading the files');
+ }
+ });
+ }
+
+### Using the files separately
+
+The Form.Upload Class is just a useful class to use when you quickly want to
+build the upload form. However the `Form.MultipleFileInput` and `File.Request`
+classes can be used separately too!
+
+#### Form.MultipleFileInput
+
+This is a class that transforms a simple `input[type="file"]` into a multiple
+file input field with even drag and drop!
+
+Checkout the source for all options and events. That's not very spectacular.
+
+#### Request.File
+
+This is a class that extends Request and brings file uploading to Request.
+Some credits should go to fellow MooTools Developer Djamil Legato for proving
+this class.
+
+In this version it is a very stripped down version and not all Request options
+might work. In 95% of the cases you don't really need them though, so it doesn't
+matter really.
+
+#### Combining Form.MultipleFileInput and Request.File
+
+When the user has selected all the files, they can be uploaded.
+To bridge those to classes, usually Form.Upload can be used.
+
+However if you want more control, the following can be done:
+
+ #JS
+ // the input element, the list (ul) and the drop zone element.
+ var input, list, drop;
+ // Form.MultipleFileInput instance
+ var inputFiles = new Form.MultipleFileInput(input, list, drop, {
+ onDragenter: drop.addClass.pass('hover', drop),
+ onDragleave: drop.removeClass.pass('hover', drop),
+ onDrop: drop.removeClass.pass('hover', drop)
+ });
+
+ // Request instance;
+ var request = new Request.File({
+ url: 'files.php'
+ // onSuccess
+ // onProgress
+ });
+
+ myForm.addEvent('submit', function(event){
+ event.preventDefault();
+ inputFiles.getFiles().each(function(file){
+ request.append('url[]' , file);
+ });
+ request.send();
+ });
+
+In the last loop, we loop over the [File](http://www.w3.org/TR/FileAPI/)
+instances and we append them to the request:
+
+ request.append((string) fieldname, (File) file);
+
Oops, something went wrong.

0 comments on commit 5e7874e

Please sign in to comment.