I'm facing a problem in loading Dropzone control in Hot Towel Template I used dropzone-amd-module and included it as a dependency
require.config({
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
'dropzone': '../Scripts/dropzone-amd-module'
}
});
and in my dashboard.js
define(['services/logger','dropzone'], function (logger,Dropzone) {
var title = 'Home';
var vm = {
title: title
};
return vm;
//#region Internal Methods
function activate() {
Dropzone.options.dropzoneJsForm = {
//prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
init: function () {
var submitButton = document.querySelector("#submit-all");
var myDropzone = this; //closure
submitButton.addEventListener("click", function () {
myDropzone.processQueue(); //tell Dropzone to process all queued files
});
},
addRemoveLinks: true
};
logger.log(title + ' View Activated', null, title, true);
return true;
}
});
but I got this error
Uncaught Error: Failed to load routed module (dashboard/dashboard). Details: Module name "emitter" has not been loaded yet for context: _. Use require([])
I followed those steps to solve the problem
1- include dropzone.js script BEFORE require.js in the index page
2- DO NOT include it in main.js as require configuration dependency
3- create dropzone element programatically in the attached event as follows
function attached(view) {
var myDropzone = new Dropzone("#dropzoneJsForm", { url: "/file/post", autoProcessQueue: false });
}
so my controller will be as follows
define(['services/logger'], function (logger) {
var title = 'Details';
var vm = {
activate: activate,
title: title,
attached: attached,
};
return vm;
function attached(view) {
var myDropzone = new Dropzone("#dropzoneJsForm", { url: "/file/post", autoProcessQueue: false });
}
//#region Internal Methods
function activate() {
logger.log(title + ' View Activated', null, title, true);
return true;
}
});