Javascript makes my brain hurt...

[mic_y]

Hi guys,

I am busy with an MVC project and my JS knowledge is clearly lacking.

What I am trying to do is to populate a Dropzone.js control with files that have already been uploaded to the server as per https://github.com/enyo/dropzone/wiki/FAQ

the JS initialization code is as follows:

var EditFormInit = function (imageIds) {

    var imageIdsArr = imageIds.split(",");
    var imageFiles = [];
    
    imageIdsArr.forEach(function (ImageId) {
        var requestData = { imageId: parseInt(ImageId) };
        
        $.ajax({
            type: "POST",
            url: "/Admin/PropertyImage/GetImageInfo",
            data: requestData,            
            success: function (data, status, jqXHR) {
                var image = { fileName: data.fileName, size: data.size, thumbnail: data.thumbnailURI };
                return imageFiles.push(image);
            }
        });
    });

I receive the right responses from the server, but no matter what I have tried, the imageFiles array stays bank.

Once the array has been generated with all the correct details, I want to pass it on to the DropZone initialization to create Mock files, but since the imageFiles array stays blank, I never see anything further.

   Dropzone.options.propertyImages = {
        url: "/admin/PropertyImage/UploadPropertyImages",
        acceptedFiles: "image/*",
        uploadMultiple: true,
        addRemoveLinks: true,
        maxFiles: 20,
        init: function () {
            imageFiles.forEach(function (image, index) {
                var mockFile = { name: image.fileName, size: image.size }
                this.emit("addedfile", mockFile);
                this.emit("thumbnail", mockfile, image.thumbnailURI)
            });

 

[_kabal_]

When are you checking imageFiles?

You cannot check this after your foreach, because it is only getting populated once the Ajax promise is resolved, inside the success callback.

Look at the jquery When documentation https://api.jquery.com/jquery.when/


Edit: read this first so you can understand how promises work. This is mandatory reading for anyone with JavaScript ambitions imo - http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html

 

[stricken]

The most important concept to grasp about js is that it is mostly asynchronous.

 

[mic_y]

When are you checking imageFiles?

You cannot check this after your foreach, because it is only getting populated once the Ajax promise is resolved, inside the success callback.

Look at the jquery When documentation https://api.jquery.com/jquery.when/


Edit: read this first so you can understand how promises work. This is mandatory reading for anyone with JavaScript ambitions imo - http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html

Thanks for the helpful hint of where to look _kabal_

Eventually after a lot of head scratching, I got this to work as follows:

        Dropzone.options.propertyImages = {
        url: "/admin/PropertyImage/UploadPropertyImages",
        acceptedFiles: "image/*",
        uploadMultiple: true,
        addRemoveLinks: true,
        maxFiles: 20,
        init: function () {
            var thisDropzone = this;
            
            imageIdsArr.forEach(function (imageId) {
                $.when(
                    $.ajax({
                        type: "POST",
                        url: "/Admin/PropertyImage/GetImageInfo",
                        data: { imageId: imageId },
                        success: function (data, status, jqXHR) {
                            return image = { fileName: data.fileName, serverImageId: data.serverImageId, size: data.size, thumbnailURI: data.thumbnailURI };
                        }
                    })
                ).then(function (image) {
                    var mockFile = {
                        name: image.fileName,
                        serverImageId: image.serverImageId,
                        size: image.size,
                    }

                    thisDropzone.emit("addedfile", mockFile);
                    thisDropzone.emit("thumbnail", mockFile, image.thumbnailURI);
                })
            });

I did have a look at the article you sent me, and I wont lie, most if it went straight over my head. Luckily I have no aspirations of becoming a JS dev, but unfortunately, with the requirements of developers today, one has to know how to use it.

 

[mic_y]

The most important concept to grasp about js is that it is mostly asynchronous.

yup yup, i could not understand how the code was jumping around when stepping through it, but finally seem to have gotten my head around it.

 

[_kabal_]

I'll admit that promises are ****ing tricky to decipher initially. Experienced guys get caught up in them, me included, especially coming for a mostly synchronous background.

In your solution 'then' is the key, glad you came right. Remember that 'then' will only occur when the promise resolves (pretty much never use the 2nd or 3rd parameter of 'then'). If you want to handle any errors add a '.catch' to the 'then'

 

[FarligOpptreden]

The most important concept to grasp about js is that it is mostly asynchronous.

What the hell are you talking about? AJAX is, by definition and name, asynchronous. One part of AJAX is JavaScript. JS is not only AJAX, it is a scripting language that you can do just about anything with. Ever heard of node.js? Ever used a canvas in HTML5 to animate awesome pictures? Ever used JS for anything other than DOM manipulation or fetching data from a server "asynchronously"? Clearly not...

 

[rward]

What the hell are you talking about?

I think he's referring to this specific instance or possibly the way javascript is currently being used, asynchronously.

I do agree with all your point, I just think you've misunderstood the context of stricken's statement.