Question

Starting by some nice tutorials I tried to:
1) use jQuery (and in particular the AjaxUpload library) to upload an image file from an input file button.
2) use s CSS trick to replace the default HTML5 input file button to a more nice custom button.
3) use HTML5 filters for allowing “only specific image” file upload.

The point is that the AjaxUpload library seems to be broken when I use the modified input file button (i.e nothing happens).

For instance, this JSFiddle is a test with the default input file. If you try to upload a file, the loading gif say you that the file is currently in upload.
This one is the same with the modified input file. No loading gif is started.

Also the HTML5 file filtering seems to be broken on my Chrome browser, but it is a minor issue.

Any idea?

Answer 1

This may be because of some inner logic of AjaxUpload or security restriction of the browser. Try it with this CSS (height is 30px instead of 0%):

    .file-wrapper input {
         cursor: pointer;
         font-size: 100px;
         width:100%; height:30px;
         filter: alpha(opacity=1);
         -moz-opacity: 0.01;
         opacity: 0.01;
         position: absolute;
         right: 0;
         top: 0;
     }

Also, about accept. It must be like this (works for sure in Chrome):

accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp,image/tiff"

And looks like it won’t work with AjaxUpload. I’ve tried it in JSFiddle, but in result I see no accept attribute. Possibly it is removed by plugin for some reason