0

I am trying to use jquery file upload with ember.js. What i am hoping to achieve is there is a file input and when user browse the picture and hit the upload button, the jquery file upload will upload the file and return with the location of the uploaded file then.. i will collect other data from the rest of the form and post the information using ember data, which will include the the image url and rest of the form data.

I cannot make it work, but the same code works with plain html file with php backend.

Here i have included non functional code in jsbin which include my template and app.js code

http://jsbin.com/EtOzeKI/1/edit

3
  • What portion of the code doesn't work? This is completely possible to do.
    – Kingpin2k
    Oct 27, 2013 at 16:35
  • when i select the image and hit upload nothing happens
    – monk
    Oct 27, 2013 at 16:41
  • no error on the console nothing.. i am having hard time geting this things right
    – monk
    Oct 27, 2013 at 16:42

2 Answers 2

3

Here's a minimal component you can use:

// index.html
<script src="/vendor/jquery/jquery.js"></script>
<script src="/vendor/jquery-ui/ui/jquery-ui.js"></script>
<script src="/vendor/jquery-file-upload/js/jquery.iframe-transport.js"></script>/script>
<script src="/vendor/jquery-file-upload/js/jquery.fileupload.js"></script>

// components/file-upload.js
export default Ember.TextField.extend({
    attributeBindings: ['name', 'data-url', 'multiple'],
    tagName: "input",
    type: 'file',
    name: "file[]",

    "data-url": function(){
        return this.get("path");
    }.property("path"),

    multiple: true,

    didInsertElement: function() {
        this.$().fileupload();
    }
});

// to use in your hbs template
{{file-upload path="pathToUploadTo"}}
2

Here's an upload button that I use in my application: It builds up an input button, and auto uploads on change.

{{view App.UploadButton groupBinding="model"}}


App.UploadButton = Ember.View.extend({
    tagName: 'input',
    attributeBindings: ['type'],
    type: 'file',
    originalText: 'Upload Finished Product',
    uploadingText: 'Busy Uploading...',

    newItemHandler: function (data) {
        var store = this.get('controller.store');

        store.push('item', data);
    },

    preUpload: function () {
        var me = this.$(),
            parent = me.closest('.fileupload-addbutton'),
            upload = this.get('uploadingText');

        parent.addClass('disabled');
        me.css('cursor', 'default');
        me.attr('disabled', 'disabled');
    },

    postUpload: function () {
        var me = this.$(),
            parent = me.closest('.fileupload-addbutton'),
            form = parent.closest('#fake_form_for_reset')[0],
            orig = this.get('originalText');

        parent.removeClass('disabled');
        me.css('cursor', 'pointer');
        me.removeAttr('disabled');
        form.reset();
    },

    change: function (e) {
        var self = this;
        var formData = new FormData();
        // This is just CSS
        this.preUpload();
        formData.append('group_id', this.get('group.id'));
        formData.append('file', this.$().get(0).files[0]);
        $.ajax({
            url: '/file_upload_handler/',
            type: 'POST',
            //Ajax events
            success: function (data) { self.postUpload(); self.newItemHandler(data); },
            error: function () { self.postUpload(); alert('Failure'); },
            // Form data
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false
        });
    }
});
8
  • it says textSpan is undefined, what is the function of textspan
    – monk
    Oct 27, 2013 at 17:34
  • It's just the text span, I was changing the text of the span, feel free to remove it, I did above.
    – Kingpin2k
    Oct 27, 2013 at 17:48
  • both the pre and post upload are just css, you can completely remove them and they are unrelated.
    – Kingpin2k
    Oct 27, 2013 at 17:48
  • thank you so much.. i am now working on php part of its upload
    – monk
    Oct 27, 2013 at 17:53
  • can you tell me how can i pass the value of the file input to my controller's variable?? i suppose it is called 'file' right now.. how can i be able to get the value from controller as or similar to this.get('file')
    – monk
    Oct 27, 2013 at 18:24

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.