Style a type 'file' component - Upload File

Hello,

I have created a Kind that handles image uploads. Everything works fine and I can send the file to the server correctly. Now I need to style it because the default style is not pretty - you can see it here: http://imagebin.org/274618

I have tried many techniques but unfortunately nothing has worked for me. This is the original code and I would appreciate if you could help me with this.

Many thanks!

enyo.kind({ name: 'Uploads', classes: 'onyx-sample-popup pad10', components: [{ kind: 'Upload' }, { classes: 'fl', components: [{ classes: 'onyx-sample-divider', }, { tag: 'form', name: 'uploadForm', attributes: { action: '/upload', method: 'post', enctype: 'multipart/form-data' }, components: [{ kind: 'onyx.InputDecorator', components: [{ kind: 'onyx.Input', name: 'imageFile', type: 'file', attributes: { name: 'file', }, accept: 'image/jpeg, image/png' }, { kind: 'Image', name: 'pic', style: 'width: 48px; height: 48px;', attributes: { name: 'photo', } }, { tag: 'br' }, { kind: 'enyo.Input', name: 'user', attributes: { name: 'user', }, value: env.user, type: 'hidden', }, { kind: 'enyo.Input', name: 'entity', attributes: { name: 'entity', }, value: 'user', type: 'hidden', }] }, { tag: 'br' }, { kind: 'onyx.Button', name: 'uploadFile', content: 'Upload', classes: 'onyx-affirmative', ontap: 'uploadFileTapped' }, { kind: 'Signals', onNewUpload: 'handleNewUpload' }] }] }, { classes: 'c' }], create: function () { this.inherited(arguments); // this.$.uploadForm.setAttribute(arguments); }, keyPressed: function (inSender, inEvent) { if (inEvent.keyCode === 13) { this.uploadFileTapped(inSender, inEvent); } }, showPopup: function (msg) { this.$.popup.setContent(msg); this.$.popup.show(); }, uploadFileTapped: function (inSender, inEvent) { var filename = this.$.imageFile.getValue(); if (!filename) { return this.showPopup('Please select a file'); } document.getElementById(this.$.uploadForm.id).submit(); }, rendered: function () { this.inherited(arguments); this.$.uploadForm.setAttribute('target', 'uploadFrame'); }, handleNewUpload: function (inSender, inEvent) { this.$.pic.setSrc(inEvent.filename); return true; } });

Comments

  • I'd suggest checking out Jason Robitaille's FileInputDecorator kind (http://enyojs.com/gallery/#JayCanuck.FileInputDecorator) for some pointers on how to style a file input.

    Also of note, in your uploadFileTapped method, I would change document.getElementById(this.$.uploadForm.id).submit(); to:
    var formNode = this.$.uploadForm.hasNode();
    if (formNode != null) {
        formNode.submit();
    }
    The hasNode() method will return null if the node doesn't exist (hence the check) or will return the node itself.
  • Thank you - this is great
  • I was able to style the file input but when sending it to the server I'm getting this message:

    "Resource interpreted as Image but transferred with MIME type application/octet-stream"

    And thus, the image is not getting transferred correctly.

    Now it's sending this:

    {:file {:size 0, :tempfile #, :content-type application/octet-stream, :filename }

    And before the styling:

    {:file {:size 13906, :tempfile #, :content-type image/png, :filename image.png}

    Could this be related to FileInputDecorator.js?

    Thanks!
  • I have finally managed to get it working. Thank you.
Sign In or Register to comment.