CODEWITHSUNDEEP
javascriptjqueryember.js
monk
monk

Reputation: 4817

Ember with jquery file upload

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

Upvotes: 0

Views: 2273

Answers (2)

opsb
opsb

Reputation: 30211

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"}}

Upvotes: 3

Kingpin2k
Kingpin2k

Reputation: 47367

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
        });
    }
});

Upvotes: 2

Related Questions