Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Remotipart Might Not Be The Answer</h2> <p>So little disclaimer, I have not myself used Remotipart gem but I have spent a lot of time dealing with file uploads and Rails. Unfortunately based on my understanding of Remotipart it will not suport the progress-bar use case you are looking for, because progress events are not supported by the underlying iFrame Transport strategy. </p> <p>To explain, let's look at the different options that are available to us as developers at the browser level. These options hold true regardless of what server side framework or libraries you are using.</p> <h2>Refresh-less File Uploads</h2> <ol> <li>iFrame Transport</li> <li>Plugin Supported (Flash/Silverlight/Other)</li> <li>HTML5 (File &amp; XHR2 APIs, optionally Drag-n-Drop)</li> </ol> <h3>Option 1 - iFrame Transport (Remotipart's Strategy)</h3> <p>The oldest and most widely supported (in terms of browsers) strategy for refresh-less page loading essentially involves doing a standard submit of the form but using a hidden iFrame as the target. Unfortunately this option does not support progress events, See this link (from Remotipart's README):<br/> <a href="http://www.alfajango.com/blog/ajax-file-uploads-with-the-iframe-method/" rel="nofollow">http://www.alfajango.com/blog/ajax-file-uploads-with-the-iframe-method/</a></p> <h3>Option 2 - Plugin Supported</h3> <p>Uses an upload module (usually written in Flash or Silverlight) to get around the limitations imposed by historical browser standards. Allows for multiple file upload and progress events, but requires the user to install a 3rd party browser extension (although we can assume most desktop browsers have Flash).</p> <h3>Option 3 - HTML 5 (Strategy used by the articles you reference)</h3> <p>So as usual, HTML 5 is the answer to all life's challenges. Using the File and XHR2 APIs it is possible to support multiple-file upload with progress events without any browser extensions. This is the strategy being used by the articles you reference, and is generally the best practice looking forward, but carries the caveat that you may see a lot of users with browsers that don't support it.</p> <h2>What I Do</h2> <p>I'm a big fan of any solution that let's you leverage the latest and greatest while still degrading gracefully on older browsers. With that in mind, I use a library called Plupload for my file uploads:<br/> <a href="http://www.plupload.com/" rel="nofollow">http://www.plupload.com/</a></p> <p>Plupload contains 4 upload "runtimes" bundled together in a single library:</p> <ul> <li>HTML5 (Option 3)</li> <li>Flash (Option 2)</li> <li>Silverlight (Option 2)</li> <li>HTML4 (Option 1)</li> </ul> <p>You configure your order of preference and the Plupload JS runtime will intelligently load the first one supported by the users browser. The JS portion of the library does a really nice job of providing you consistent events to program against, regardless of which runtime is being used. As developers this let's us focus on building a nice UI that will "just work" regardless of which runtime is being used.</p> <p>Of course if you degrade all the way to HTML4 you're going to lose the ability to get progress updates so you should be ready for that.</p> <p>Hope that helps! If you're interested in using Plupload there are a lot of good articles and answers out there to help.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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