Uploadify ruins file upload when no flash in browser

Question

I have an HTML form with a file upload element, which is based on Uploadify. Unfortunately, if the browser doesn't have flash installed/enabled (I tested on Chrome and Safari), then the file upload element is completely disappearing, while I would have expected to have at least plain, regular, file upload html element as a fallback.

You can see this behavior even in Uploadify official demo (as of today, 28.2.2011):

http://www.uploadify.com/demos/

Anyone found his way around this? Cheers

---

none of these work in the situation that flash is installed, but is disabled !
for example, this line:

if (swfobject.getFlashPlayerVersion().major === 0)

behaves the same weather flash is installed and enabled, or installed and disabled !
I thought about obtaining uploadify API and checking it, but I have found zero examples, any ideas?

Answer 1

It seems that older uploadify had a

flashVer=-1;

in its code and later on it was doing a split on it which failed when Flash wasn't installed. Changing it to:

flashVer="-1";

solves the issue with the classic HTML fallback (single file upload only though - have to put multiple such in that case and make sure your onCompleteAll event handler logic doesn't fail but instead notifies some other object it finished and when all onCompleteAll are called for each such upload control you can do whatever logic you were doing before at onCompleteAll

Answer 2

This works for no Flash installed and for Flash installed but disabled. I've only confirmed it in IE7-9 and FF19 but should work in any browser that can use Uploadify SWF version.

In the html have 2 divs. One for no Flash and for with Flash

<div id="uploadifyDiv" runat="server" style="float: left; width: 100%; margin-top: 10px;">
  <div id="uploadifyNoFlashDiv">
   <p style="font-weight:bold; background-color:Red; color:Black;">Flash is not installed or is not enabled</p>       
     File upload requires Flash to be installed and enabled.<br />
     Click <a href="http://get2.adobe.com/flashplayer/" target="_blank">here</a> to install<br />
     You will need to <a href="javascript:window.location.href=window.location.href">refresh</a> the page when installation is completed</p>
  </div>
  <div id="uploadifyHasFlashDiv" style="display:none;">
    <asp:FileUpload ID="ImageFileUpload" runat="server" />
  </div>
</div>

In the Uploadify script include a function for onInit

onInit : function(instance) {
  $('[id$="uploadifyNoFlashDiv"]').css('display','none');
  $('[id$="uploadifyHasFlashDiv"]').css('display','block');},

If Flash is not installed, or installed but not enabled, then the uploadifyNoFlashDiv div will be shown, otherwise the OnInit will hide the uploadifyNoFlashDiv div and show the uploadifyHasFlashDiv div which, assuming everything else is OK, will render the Uploadify control.

This of course doesn't provide any functionality if user doesn't install Flash but it does at least
- Show an appropriate message advising they need to install Flash (or enable it if already installed)
- Hide the generic FileUpload which appears if the Uploadify script fails

IMHO Uploadify is still superior to the other uploaders mentioned as alternatives as it the only one to provide multiple file selection in non HTML5 browsers, which sadly includes IE9 on Win7. All the other uploaders only allow a single file to be selected in the file dialog.

EDIT: On slow connections the No Flash installed div will be displayed before the Uploadify script has a chance to run which is confusing to the user if they do have Flash installed and the div will eventually be hidden. In this scenario add another div with a loading gif in it and then run some script on document load to show the appropriate div.

<div id="uploadifyDiv" runat="server" style="float: left; width: 100%; margin-top: 10px;">
    <div id="uploadifyNoFlashDiv" runat="server" class="infoBoxDiv" style="display: block;">
        <div id="uploadifyNoFlashLoadingDiv" style="display:block">
            <img src="../images/uploading.gif" alt="Loading ..." /> Loading. Please wait a moment ...
        </div>
        <div id="uploadifyNoFlashFinalDiv" style="display:none;">
            <p style="font-weight: bold; background-color: Red; color: Black;">
                Flash is not installed or is not enabled</p>
            <p>
                File upload requires Flash to be installed and enabled.<br />
                Click <a href="http://get2.adobe.com/flashplayer/" target="_blank">here</a> to install<br />
                You will need to <a href="javascript:window.location.href=window.location.href">refresh</a>
                the page when installation is completed
            </p>
        </div>
    </div>
    <div id="uploadifyHasFlashDiv" runat="server" style="display: none;">
        <asp:FileUpload ID="ImageFileUpload" runat="server" />
    </div>
</div>

<script language="javascript" type="text/javascript">
    // If the NoFlashDiv is still visible then hide the loading gif and show the info box
    // Otherwise leave alone and the Uploadify script will do its thing
    $(document).ready(function() {
        if ($('[id$="uploadifyNoFlashDiv"]').css('display') == 'block')
        {
            $('[id$="uploadifyNoFlashLoadingDiv"]').css('display','none');
            $('[id$="uploadifyNoFlashFinalDiv"]').css('display','block');
        }                
    });
</script>

Answer 3

My solution works in IE6, IE9, Firefox, Chrome, and Safari, with Flash enabled, disabled, or not installed.

I start with a basic HTML file upload form:

<input id='f_file' name='f_file' type='file' />
<input id='f_submit' name='f_submit' type='submit' value='Upload' />

The onFallback event is fired when the required Flash version is not installed or is disabled. If this happens I 'destroy' the uploadify instance, which resets it back to the basic HTML form.

'onFallback' : function() {
    $("#f_file").uploadify("destroy");
}

Answer 4

If you are using the latest version of uploadify you can use the onFallback event to detect if flash is installed (or if the required flash version of flash is supported):

$("#file_upload").uploadify({
    'swf'        : '/uploadify/uploadify.swf',
    'uploader'   : '/uploadify/uploadify.php',
    'onFallback' : function() {
        alert('Flash was not detected or flash version is not supported.');
    }
});

Answer 5

Why can't you do the following (provided you have swfobject)?

if(swfobject.getFlashPlayerVersion().major > 0)
   //uploadify code here...
}

If flash is detected the uploadify script gets executed. Otherwise, it gracefully degrades to the standard browser file input.

I tested this in Chrome/FireFox/Safari/IE7/IE8 and it works just fine.

Answer 6

I use the onSWFReady event, which isn't triggered if flash is disabled of course. I remove the block containing the native file input and show the uploadify div if swf is loaded, works like a charm:

onSWFReady: function() {
    $('#property-post .upload .browse').remove();
    $('#uploadify').css('display', 'block');
}

Answer 7

Here is how I solved this problem. I added to my code:

<!--Flash Fallback-->
<div>
  <object type="application/x-shockwave-flash" width="0" height="0">
    <a href="http://www.adobe.com/go/getflashplayer" target="_blank"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
  </object>
</div>

Then I positioned it absolutely over the uploadify button so the 'Get Flash Player' button is displayed instead of the uploadify button if the browser has no flash installed.

Once the flash player is installed, the 'Get Flash Player' button disappears now that the object has width and height set to 0.

Answer 8

I think jQuery File Upload is a great solution for that.

Features:

1. Multiple file upload
2. Drag & Drop support
3. Upload progress bar
4. Cancelable uploads
5. Resumable uploads
6. Chunked uploads
7. Preview images
8. No browser plugins (e.g. Adobe Flash) required
9. Graceful fallback for legacy browsers
10. HTML file upload form fallback
11. Cross-site file uploads
12. Multiple plugin instances
13. Customizable and extensible
14. Multipart and file contents stream uploads
15. Compatible with any server-side application platform

Answer 9

I had the same problem and worked around it using the Javascript Flash Detection Library. It's a small script file that allows you to check for the currently installed Flash Player version.

Answer 10

I've also been pretty happy with plupload (http://www.plupload.com/). It supports HTML 5, Flash, Silverlight, Google gears, and HTML 4.

Answer 11

I'm surprised Uploadify does not degrade gracefully, it seems like a key requirement. If you don't wan to work around it yourself you can use a library that does provide a fallback when Flash is not present.

http://swfupload.org/

SWFUpload is a small JavaScript/Flash library to get the best of both worlds. It features the great upload capabilities of Flash and the accessibility and ease of HTML/CSS.

• Upload multiple files at once by ctrl/shift-selecting in dialog
• Javascript callbacks on all events
• Get file information before upload starts
• Style upload elements with XHTML and css
• Display information while files are uploading using HTML
• No page reloads necessary
• Works on all platforms/browsers that has Flash support.
• Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable
• Control filesize before upload starts
• Only display chosen filetypes in dialog
• Queue uploads, remove/add files before starting upload