Uploading a pic doesn't just work on android native browser

Question

I've been having problem with this code that uploads an image. It doesn't work on native android browser(Tried on galaxy note 2). It works fine on all other browsers on different machines. Please help if anyone has ever come across this problem before or can figure out what went wrong.

Here is the template -> image_upload_view.hbs

<label>
<div class='label-text'>{{t label }}:</div>
<div class="input-prepend">
<div class="preview" style="background-image: url('{{src}}');"></div>
<i class="icon-arrow-up"></i>
<span class="input-description">{{t description}}</span>
<span class="change-notification hide">{{t 'COMPONENT_IMAGE_UPLOAD_IMAGE_CHANGED'}}</span>
<i class="icons"></i>
<input class="input hide" type="file" name="image_file_name" accept="image/gif, image/jpeg, image/jpg, image/png"></input>
</div>
</label>

Here is the logic -> image_upload_view.js

var Base = require( '../../base' ),
_ = require( 'underscore' ),
oldBrowserPreviewImage = '/images/profiles/edit/default_cover_image_preview.jpg';

module.exports = Base.extend( {

className: 'component-image-upload',

events: {
    'change input[type=file]': 'onChange',
    'click .remove-image': 'onRemove'
},

getTemplateData: function () {
    return _( this._super() ).extend( {
        description: this.description,
        label: this.label,
        src: this.src
    } );
},

postRender: function () {
    // TODO: Let parent instantiate and pass in models once new hydration logic is merged.
    var ModelType = require( '../../../models/image_upload/' + this.type );

    this._super();

    this.model = new ModelType( {
        file_url: this.src
    }, {
        app: this.app
    } );

    this.renderImagePreview();
},

onChange: function ( evt ) {
    this.updateFile( this.$( evt.currentTarget ) );
},

onRemove: function ( evt ) {
    var fileInput = this.$( 'input[type=file]' );

    // Prevent remove click from also triggering input's file selection.
    this.disableEvent( evt );

    // Quirky, but correct way to clear the file input.
    // http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery#answer-13351234
    fileInput.wrap( '<form>' ).closest( 'form' ).get( 0 ).reset();
    fileInput.unwrap();

    this.updateFile( fileInput );
},

updateFile: function ( fileInput ) {
    this.model.setFile( fileInput );
    this.renderImagePreview();

    // TODO: Need to let parent know which model type this is until the parent
    // can instantiate the model itself (pending hydration).
    this.$el.trigger( 'imageUploadComponent:changed', [ this.model, this.type ] );
},

renderImagePreview: function () {
    var self = this;

    this.model.getFileUrl().done( function ( url ) {
        var backgroundImage,
            hasFile = self.model.hasFile(),
            // If we have a file set but got a null URL back, it means we're using an old browser
            // that doesn't support generating local file URLs via the FileReader API.
            isOldBrowser = hasFile && url === null;

        if ( url ) {
            backgroundImage = 'url(\'' + url + '\')';
        } else if ( isOldBrowser ) {
            // For old browsers, show a generic preview image.
            backgroundImage = 'url(\'' + oldBrowserPreviewImage + '\')';
        } else {
            backgroundImage = 'none';
        }

        self.$( '.preview' ).css( 'background-image', backgroundImage );

        // If we can't show a preview of the selected image (old browsers), display a change notification message
        // to let the user know that the selection "took".
        self.$( '.change-notification' ).toggleClass( 'hide', !( hasFile && isOldBrowser ) );

        self.toggleActionIcon( !url );
    } );
},

toggleActionIcon: function ( toggle ) {
    var input = this.$( '.icons' );

    input.toggleClass( 'icon-add', toggle );
    input.toggleClass( 'remove-image icon-close', !toggle );
}

} );

module.exports.id = 'shared/components/image_upload_view';

Answer 1

If you use <file accept="image/*"/> it should also work on older (Android) browser versions.

<file accept="image/jpeg"/> is only supported on newer browsers.

I don't know from which Chrome version it is supported (chrome://version), but:

• Chrome v18: doesn't support it.
• Chrome v38: supports it.