Databases
StackOverflow2013
Postsdbo
POHow to upload files to a server: Multiple Files and Custom UI
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to upload files to a server: Multiple Files and Custom UI
    primarykey
    data
    text
    <p>I'm trying to implement a UI that would let the end user upload multiple file sot a server, on a custom UI - pretty much the same way GMail or Outlook.net is doing it.</p> <p>Few things to node:</p> <ol> <li>The <code>&lt;input type="file"&gt;</code> is ugly - and not standard (IE shows a button named 'Browse' to the left of the file name. Chrome shows a button named 'Choose' to the right of the file name).</li> <li>Most suggestions how to do the UI suggests hiding a input file element with <code>opacity=0</code>, but on top of by custom UI. The 'click' event will open the dialog box, and upon return the file name (without the path) will be available as a $('#file').val(). See <a href="https://stackoverflow.com/q/8974633/341971">this</a> question, as well as the sample on <a href="http://jsfiddle.net/A4BS7/1/" rel="nofollow noreferrer">jsfiddle</a>.</li> <li>I'm also aware HTML5 has a <code>multiple="multiple"</code> attribute now, which will let the user select multiple files.</li> <li>However, I'm looking for a multiple file solution, which will work on IE8 and above (as well as WebKit, Mozila).</li> <li>Some people suggested Google is using Flash. This is not true. Their multi file upload is working when flash is disabled.</li> </ol> <p>Now, here is my biggest surprise: Using the developer tools (F12) on both IE and Chrome, looking at both GMail and Outlook.NET - <b>both implementations do not have a <code>&lt;input type='file'&gt;</code> element in the tree</b> (as far as I can tell). Moreover, both implementations are working with IE8 (flash disabled).</p> <p>What is going on? How do they do it?</p> <p><b>EDIT</b>: Why do I think they don't use file input element? Open the developer tools (F12), switch to Console, type: <code>document.getElementsByTagName('input')</code>. There are 24 input elements, 19 of which are type=hidden, none is type=file.</p> <p><b>EDIT 2:</b>Thank you all responders and commentators. Indeed - the "there is no other way" argument (in comment) below was valid. As it turns out, both Outlook.NET and GMail will have a <code>&lt;input type='file'&gt;</code> element, which they will add dynamically, only when the user clicks the 'Attach a file' button. Then, they will send a 'click' event to the element, which will trigger the select file dialog.</p> <p>The witness this, use the F12 development tool (either in Chrome, or in IE), and in the interactive console type: document.querySelectorAll('input[type=file]'). Note that in both implementations, the element is a direct child of body (with display=none).</p> <p>They do <b>not</b> use iframe for the upload (unlike the only answer below), but simple XHR code to upload, which is now, in HTML5 is available.</p> <p>The best resource on the Web for how to do it is: <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications</a>. I've went through the steps of @Jay below (which are great), but the Mozilla page is simpler, <strong>which is my recommendation</strong>. Also, take a quick look at the jsfiddle sample on @Niranjan comment.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USUri
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to upload files to a server: Multiple Files and Custom UI
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to upload files to a server: Multiple Files and Custom UI
      1. USMaciej
      1. VTFavorite
    3. VO
      singulars
      1. POHow to upload files to a server: Multiple Files and Custom UI
      1. This table or related slice is empty.
      1. VTUpMod
    1. COuse a label[for=id] and hide the input display:none; since labels style way more consistently than inputs...
      singulars
      1. POHow to upload files to a server: Multiple Files and Custom UI
      1. USdandavis
    2. COFirst off, google IS using flash, but only when the File API is not supported. Second, of course they are using a file input element. There is no other way to present a file chooser to the user without resorting to flash or java.
      singulars
      1. POHow to upload files to a server: Multiple Files and Custom UI
      1. USRay Nicholus
    3. CO@Ray, please find my edit. I totally understand the argument "There is no other way", so I'm puzzled why can't I find it (I was also looking at two unrelated iframes).
      singulars
      1. POHow to upload files to a server: Multiple Files and Custom UI
      1. USUri
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload