CODEWITHSUNDEEP
htmlnode.jsbackbone.jsfile-upload
Jay
Jay

Reputation: 1033

backbone.js Image uploading

I'm using nodecellar to get a better understanding of backbone.js and I've come across a problem which was answered in great detail in a similar question, however, the answer doesn't seem to be working for me:

What i'm trying to do.

Using Nodecellars wineview, i'm trying to utilise the drag and drop feature, to upload an image. I've made a note of a previous very well answered question which basically states that you have to disable the default behaviour of on dragover, so I have the following in my wine view:

    events: {
        "change"        : "change",
        "click .save"   : "beforeSave",
        "click .delete" : "deleteWine",
        "drop #profile" : "dropHandler",
        "dragover #profile" : "dragover",
        'dragenter #profile' : 'alertMe'
    },

then my dragover event looks like this:

    dragover: function(event){
        console.log('drag over event called');
        event.preventDefault();
    },

This is fine and working as the console log is called when it fires. and the draghandler looks like this:

    dropHandler: function (event) {
        event.stopPropagation();
        event.preventDefault();
        var e = event.originalEvent;
        e.dataTransfer.dropEffect = 'copy';
        this.pictureFile = e.dataTransfer.files[0];


        // Read the image file from the local file system and display it in the img tag
        var reader = new FileReader();
        reader.onloadend = function () {
            $('#profile').attr('src', reader.result);
            $('#picText').html('Picture added, select save to complete changes.')
        };
        reader.readAsDataURL(this.pictureFile);
    }

The problem

The code works, however it doesn't upload the image or save the details in the model to the database. so once I move away then select the wine again the image is back to what it was originally.

I've done some research into the HTML5 fileReader api, but there isn't much on how it uploads, or where it uploads to.

And this is where I am now, I'm looking to you guys for suggestions on how to ensure the model saves the image url, and the image is uploaded to the pics folder.

How is the best way to go about this. Is the HTML 5 fileReader API the best option to go with?

Thank you for your feedback.

Jay

Upvotes: 1

Views: 2376

Answers (1)

dierre
dierre

Reputation: 7210

You are missing in your function dropHandler the call to your model to set the property for the image you want to save.

Upvotes: 2

Related Questions