Dojo Uploader with Drag and Drop - file-upload

I am trying to recreate this example in my project, to add the drag and drop feature to the dojo uploader:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_Uploader.html
Copying the exact same code in jsfiddle or in my application the line
if(uploader.addDropTarget && uploader.uploadType=='html5'){
returns undefined for addDropTarget and iframe for the uploadType.
I tried it with various browsers, and even added force: html5 in the uploader but nothing changed.
Please, note that everything works ok except from the dnd.
I am using dojo 1.8.1.

In dojo 1.8, the uploader is not yet fully AMD compliant. So, in order to make the example from the trunk tests work in 1.8, you need to create the uploader programmatically using the dojox.form.Uploader constructor rather the required AMD module. As follows :
<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
<fieldset>
<legend>DnD Test</legend>
<input class="browseButton" id="uploader"/>
<input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
<div id="files" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader"' ></div>
</fieldset>
</form>
<div id="dropTarget">Drop files here !</div>
And in the javascript :
require([
'dojo/parser',
'dojo/dom',
'dijit/registry',
'dojox/form/Uploader',
'dojox/form/uploader/FileList',
'dojox/form/uploader/plugins/HTML5',
'dojo/domReady!'
], function(parser, dom, registry, ready){
var dropTarget = dom.byId('dropTarget'), uploader;
parser.parse().then(function(){
// You need to use dojox.form.Uploader, as in dojo 1.8,
// the module is not fully AMD compliant yet.
uploader = new dojox.form.Uploader({
name:'uploadedfile',
label:'Select Some Files',
multiple:true,
force:'html5'
}, 'uploader');
uploader.startup();
if(require.has('file-multiple')){
console.debug("Adding a new drop target");
registry.byId('uploader').addDropTarget(dropTarget);
}
});
});
See http://jsfiddle.net/psoares/6r2jZ/

Related

"Unable to resolve constructor for: '"dojox.mobile.TextBox"'"

I am facing following issue while working with dojo inline template:
I am creating the template in a html page by defining the template in between the following tags(It has mvc also integrated)
`<script id="createNewItem" type="text/template">
<div>
<div data-dojo-type='dijit/TitlePane' data-dojo-props='open:false'>
<div class='accordionRev'>
<input type="number" name="qty" placeholder="Quantity (required)" data-dojo-type="dojox.mobile.TextBox" class='quantity' data-dojo-props="value: at('rel:','quantity'), class:at('rel:', 'quantityErr')" onchange="cntrl.createQuoteFields(true, this, '{{lineNumber}}');" onkeypress="cntrl.quantityHandler.call(this, '{{lineNumber}}')" onpaste="cntrl.pastehandler.call(this)" tabindex=0/>
</div>
</div>
</div>
</script>'
I will be using this template in another page like this
`<ul id="rfqTitlePane" class="hide"
data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: at(cntrl.createQuoteList,'items').direction(at.from)"
data-mvc-child-type="dojox/mvc/Templated"
data-mvc-child-props="clickable: true, variableHeight: 'true',
indexAtStartup: this.indexAtStartup,
customTitle: at(this.target, 'title').direction(at.both), titlePaneDOM:at(this.target,'displayDetails').direction(at.from).transform({format:custom.helpers.RequestMarkup})">
<script type="dojox/mvc/InlineTemplate">
<li>
${titlePaneDOM}
</li>
</script>
</ul>`
I am getting "Unable to resolve constructor for: '"dojox.mobile.TextBox"'" error. I actually defined textbox before the template gets loaded. I am not sure where its going wrong
It appears that the question contains wrong markdown, so I'd recommend fixing that so that better answers can be provided. Meanwhile some things I can say are:
You may want to try importing dojox/mobile/TextBox module before running the template.
Recent releases of Dojo prefers AMD format in data-dojo-type e.g. data-dojo-typ="dojox/mobile/TextBox".
dojox/mvc/InlineTemplateMixin looks at <script type="dojox/mvc/InlineTemplate"> instead of <script type="text/template">.
Hope this helps.
Best, Akira

Google script HTML api can´t process file upload field

I am trying to create a simple web app in google scripts with the HTML api.
code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function processForm(formObject) {
var formBlob = formObject.myFile;
var driveFile = DriveApp.createFile(formBlob);
return driveFile.getUrl();
}
index.html
<script>
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = 'Got it!';
}
</script>
<form id="myForm">
<input name="myFile" type="file" />
<input type="button" value="Submit"
onclick="google.script.run
.withSuccessHandler(updateUrl)
.processForm(this.parentNode)" />
</form>
<div id="output"></div>
The form fails to submit. I´m using google chrome Versión 30.0.1599.101 m
This appears in the console: Uncaught NetworkError: Form submission failed.
Here is the app: https://script.google.com/d/1yrgM20n1ZI99bChN2qtQWgGck36OccLN3A16Gn7tCPvsJw0EcK_ql7C5/edit?usp=sharing
Maybe you should add encoding="multipart/form-data" attribute to form tag.
If not solved already – did you try changing the input type from "button" to "submit"? On top of that I'd also try giving it another value than "Submit" since that might interfere with the actual submit parameter.

DOJO 1.8 /dojo/request/iframe is deleting <form></form> when uploading a file

I'm seeing a really strange behavior under DOJO 1.8.0. I'm trying to asynchronously upload a file. The file is uploading just fine and I'm getting the payload as expected, but when clicking the submit button the tags and everything in between is inexplicably deleted! It just vanishes. (NOTE: I've isolated this testing to a test page, so there's nothing else at play that would account for it. You're looking at the entirety of the code.)
require(['dojox/form/Uploader',
"dojo/request/iframe",'dojo/dom','dojo/on',
'dojox/form/uploader/plugins/IFrame', 'dojo/domReady!'],
function(Uploader,iframe,dom,on){
on(dom.byId("myButton"), "click", function(){
iframe.post("UploadFile.php",{
form: dom.byId("myForm"),
handleAs: "json"
}).then(function(data){
console.log(data);
}, function(err){}
);
});
<form method="post" id="myForm" enctype="multipart/form-data" >
<input name="uploadedfile" type="file" data-dojo-type="dojox.form.Uploader"
label="Select Some Files" id="uploader" />
<input id="myButton" type="button" value="Submit" />
</form>
Any ideas from anyone with DOJO 1.8 experience? I've been using /dojo/io/iframe just fine with versions 1.6 thru 1.7. This started happening only with 1.8 using the new /dojo/request/iframe code.
See http://jsfiddle.net/seeds/XD4Dc/1/
The form element is set to have target of dojo's injected iframe. Then form gets like, 'dijitHidden' with abs position -1000 top/left. Cant see why tbh.
There's a fix in the fiddle, add to your callback:
with(dom.byId("myForm").style) {
position = "";
left = "";
top = "";
}
I took this issue to the DOJO-Interest group and it was found to be bug with DOJO 1.8.0. It'll be fixed with the upcoming 1.8.1 release.
http://bugs.dojotoolkit.org/ticket/15939
From the bug report:
The form wasn't getting "eaten", but rather the position was getting set on it and moved out of the viewport because of some faulty logic to check if the form was in the DOM. This has been fixed and should be in 1.8.1.

Newbie Dojo - Google CDN Question

I have a test jsp with:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript">
</script>
<script type="text/javascript">
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeSelector");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");
</script>
</head>
<body>
<div dojoType="TreeSelector" widgetId="treeSelector"></div>
<div dojoType="Tree" widgetId="treeWidget" selector="treeSelector"toggler="wipe">
<div dojoType="TreeNode" widgetId="1" title="First node" isFolder="false"></div>
<div dojoType="TreeNode" widgetId="2" title="Second node">
<div dojoType="TreeNode" widgetId="2.1" title="Second node First Child"></div>
<div dojoType="TreeNode" widgetId="2.2" title="Second node Second Child"></div>
</div>
<div dojoType="TreeNode" widgetId="3" title="Third node" isFolder="false"></div>
</div>
This will not work in any browser.
I thought this would be easy, it seems the dojo library is not being downloaded/found?
Do I need to do anything else?
Also, my IDE, JDeveloper, reports that the attribute "dojoType" is not defined on element div.
I have to say, this example looks like it is taken from a very old version of dojo, but you're trying to run it against Dojo 1.5. That most likely won't work. dojo.widget hasn't existed since...0.4, 0.9 maybe.
You may be right in your comment to the previous answer in that no parseOnLoad: true was necessary in the original example, but I'd also assure you that that example was not running any version of Dojo anywhere near what you're running it with.
Based on what you're looking at there, you may want to start somewhere like here: http://www.dojotoolkit.org/reference-guide/dijit/Tree.html
I'm not sure what the default behavior is when it's not present, but you probably need to define a djConfig with parseOnLoad set to true (or call the parser directly). See the following links for more information:
http://docs.dojocampus.org/djConfig
http://dojocampus.org/content/2008/03/08/the-dojo-parser/
Follow the:
Google AJAX Libraries API Dev Guide,
and the Google API Loader's Guide.
You need to:
register for an API key (or use a direct link as you did),
if not using a direct link but google.load, you need to defer the execution of your code using an onload callback.
Personally, I would just do something like:
within the <head> section of my.html:
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_API_KEY_GOES_HERE"></script>
<script type="text/javascript" src="my.js"></script>
in my.js:
google.load("dojo", "1.5", {
uncompressed: true
});
function OnLoad() {
/* do stuff here */
}
google.setOnLoadCallback(OnLoad);

Dijit combobox not rendering in custom widget

I am trying to use the combobox provided by Dijit inside of a custom-made widget. I have been using Dojo's tutorial on comboboxes to guide me.
When I implement a stand-alone webpage similar to their tutorial examples, everything worked fine; but when I ported the code into my custom-made widget, it just renders the combobox as a plain HTML text box.
Here's what my custom widget's template looks like:
<div class='customWidget'>
...
<div dojoAttachPoint="mainDiv" class="mainDiv">
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.txt"></div>
<input dojoType="dijit.form.ComboBox"
store="stateStore"
value="California"
searchAttr="name"
name="state2" />
<button dojoAttachEvent="onclick:chooseState">OK</button>
</div>
...
</div>
In the widget code, I require the combobox and read store:
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
I also tried putting these includes in a <script/> within the custom widget (similar to the way they do it in the tutorial), but it didn't work (in fact, it appears as if the script tag wasn't even evaluated, since I couldn't reference a function I declared inside of it!)
Do you have widgetsInTemplate in your widget declaration?
dojo.declare('my.widget.Cool',[ dijit._Widget, dijit._Templated ], {
widgetsInTemplate: true,
// rest of widget JS here
});
Here's an article about including other widgets in your template.
Have you tried adding:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse();
});
</script>
(from Dojocampus) to ensure Dojo is parsing the page? Are there any errors in your Javascript console? Is the page rendering any normal Dojo widgets?