fine-uploader
fine-uploader copied to clipboard
FineUploader
DragAndDrop standalone + FineUploaderBasic = javascript error
Type of issue
- [x] Bug report
Uploader type
- [x] Traditional
Bug Report
Fine Uploader version
5.14.3
Browsers where the bug is reproducible
"Firefox", "Chrome"
Operating systems where the bug is reproducible
"Linux Mint", "Windows 10"
Exact steps required to reproduce the issue
- Download FineUploader
- Create a new folder on my own html server
- Copy fine-uploader.core.min.js and dnd.min.js to it
- Make a sample html file with a code written below
All relevant Fine Uploader-related code that you have written
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload your files</title>
<script src="fine-uploader.core.min.js"></script>
<script src="dnd.min.js"></script>
</head>
<body>
<div id='fine-uploader'>upload</div>
<div id='myDropZone'></div>
<script>
var dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: [document.getElementById('myDropZone')],
classes: {
dropActive: "cssClassToAddToDropZoneOnEnter"
},
callbacks: {
processingDroppedFiles: function() {
},
processingDroppedFilesComplete: function(files, dropTarget) {
fineUploaderBasicInstance.addFiles(files);
}
}
}),
fineUploaderBasicInstance = new qq.FineUploaderBasic({
request: {
endpoint: "server/uploadHandler"
}
});
</script>
</body>
</html>
Detailed explanation of the problem
As you can see sample html file is basic one - it's almost copy and paste from FineUploader Documentation. Although this code doesn't work. With the above code I get in browser this error: GET http://localhost/fine-uploader/sample.html [HTTP/1.1 200 OK 1 ms] GET http://localhost/fine-uploader/fine-uploader.core.min.js [HTTP/1.1 200 OK 6 ms] GET http://localhost/fine-uploader/dnd.min.js [HTTP/1.1 200 OK 2 ms] TypeError: qq.FineUploaderBasic is not a constructor
As I understand this error it means that I'm trying to make a constructor from already defined element, eg. var FineUploaderBasic='a'; var xxx = new FineUploaderBasic (...) As you can see there is no such code in my sample html file, and I checked that there is none in dnd.js and fine-uploader.core.js
If I switch in my code: (...)
<script src="fine-uploader.core.min.js"></script>
<script src="dnd.min.js"></script>
(...) To:
<script src="dnd.min.js"></script>
<script src="fine-uploader.core.min.js"></script>
I get: TypeError: qq.DragAndDrop is not a constructor
Is there some kind of problem with using standalone dnd and fineuploader core ? Or maybe I'm missing something ?
BTW If I remove dnd related section - everything is fine. (however dnd works only on div id='fine-uploader' - which is quite understandable)
BTW2 Couldn't check it (because of above error) so I'll ask here: dropZoneElements: [document.body], Will that work ? (I want to make whole browser window act as droppable area)
Thanks m.
@micholus
I'm sorry, I hope that now it is ok I do not know why "Insert code" doesn't work at all.... I had to make "8x nbsp's" for TAB's ... and "lt's and gt's" for html brackets
Hope that it is better now.
not sure what you mean by "insert code". Code formatting is explained at https://help.github.com/articles/creating-and-highlighting-code-blocks/
@micholus
Ach ... lame me :) Done ... it's fixed now.
By "insert code" I meant a button in a function menu of WYSIWYG - it looks like this: "<>" .... and it makes ` .. but only one ;) - so that's why it didn't work.
I am having this exact (mis)behavior with:
- FineUploader 5.14.3 (same as above)
- Chrome 58.0.3029.110 (64-bit)
- macOS Sierra 10.12.5
Fantastic library. Any help is most appreciated, thanks.
Edit: BTW, This error is generated just by including the dnd.js after fine-uploader.core.js.
I'm low on time these days to step in regularly to look into these types of issues. But I'm optimistic that I will secure a regular maintainer to help out.
This seems to be the problem: Both dnd.js and fine-uploader.core.js start by defining var qq = function(element) { .... It seems to work for me by removing this block from dnd.js and including dnd.js after fine-uploader.core.js (so qq is defined only in one place).
I'd fork & submit a pull request, but removing var qq = ... from dnd.js would make dnd.js NOT function stand-alone. Maybe the answer is to separate qq from each of these (ie, provide a qq.js separate from dnd.js, fine-uploader.core.js, etc).
I ran into the same issue using an NPM installation of fine-uploader and got around the issue with:
const qq = require('fine-uploader/lib/core/all')
const dnd = require('fine-uploader/lib/dnd')
this._uploader = new qq.FineUploaderBasic({
autoUpload: false,
button: selectEl,
callbacks: {
onDelete: this._onDelete,
onSubmit: this._onSubmit
},
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
acceptFiles: 'image/*'
}
})
this._dnd = new dnd.DragAndDrop({
dropZoneElements: [document.body],
classes: {
dropActive: 'drag-over'
},
callbacks: {
processingDroppedFilesComplete: (files, target) => {
this._uploader.addFiles(files)
}
}
})
I'd fork & submit a pull request, but removing var qq = ... from dnd.js would make dnd.js NOT function stand-alone.
Instead of overwriting, why not check for window.qq first, and extend it?
i just ran into this with the latest release 5.15.6. including dnd.js kills it :(
This is not something that is causing issues for me in any of my projects using Fine Uploader, but if someone here is able to commit to verifying a solution, i'm willing to write the code and then release a new version with a fix.
Plus one here.
I am using s3.fine-uploader.core.min.js and as soon as i add dnd.min.js to the mix i just start getting various JavaScript errors however i try to implement it. I get one of these two:
- qq.s3 is undefined (calling dnd.min.js after s3.fine-uploader.core.min.js)
- qq.DragAndDrop is not a constructor (calling dnd.min.js before s3.fine-uploader.core.min.js)
UPDATE: Just as i wrote that i managed to get it working.
So the reason why it didn't work was: I went here: https://fineuploader.com/customize.html selected Amazon S3 and pressed download. Inside there were two files: dnd.js and dnd.min.js i tried using them and got the errors above.
I then went to this repo directly and downloaded dnd.js directly from the repo (https://raw.githubusercontent.com/FineUploader/fine-uploader/master/client/js/dnd.js) and voila - works like a charm.
Are you saying the customize page only provided two versions of the dnd module, and for some reason you used them both for some reason? That is what you have said above. Or is that a typo?
What i tried to say is that when i downloaded the files from https://fineuploader.com/customize.html and tried to use dnd.js or dnd.min.js i was constantly getting these two errors:
- qq.s3 is undefined (calling dnd.min.js after s3.fine-uploader.core.min.js)
- qq.DragAndDrop is not a constructor (calling dnd.min.js before s3.fine-uploader.core.min.js)
After that i went on to downlaod dnd.js directly from source (https://raw.githubusercontent.com/FineUploader/fine-uploader/master/client/js/dnd.js) and i used that version instead of the one that came with the downloaded ZIP file and it works just fine, out of the box, like magic.
i'm seeing the same errors. i'm loading the fu scripts using
global.qq = qq;
not sure how that ever works.
if someone here is able to commit to verifying a solution, i'm willing to write the code and then release a new version with a fix.
rnicholus ... hmm maybe something as trivial as:
(function(global) {
if (typeof(qq) === 'undefined') {
var qq = function(element) {
(...)
}
}
(...)
in every file: dnd.js and fine-uploader.js, and probably others... it should be enought
-- sincerely marcyn
i'm not sure that would work. shouldn't it be typeof(global.qq) anyway? but what if it is defined, wouldn't that cause the dnd methods to not be added to qq?
the easiest solution here is to just not use global variables, for this exact reason
sure, but this regression breaks existing code that just includes the scripts directly. AFAICT from reading the docs, this is still supposed to be supported. if something has changed, maybe the docs should be changed to indicate that that method is no longer supported, and that all existing code that uses it should be updated to use a module loader?
yes, this should still be supported - can someone commit to testing my fix (once I have time to write it)? Or, if someone wants to try a PR, that would be great too
I'm using version 5.16.0 and sill have the same error. Both files starts with !function(global){var qq=function(e)...
any solution for this? I need this work :(
PRs are accepted here. If someone has the time to submit a PR with a fix, I will review, but I don't currently have the time to address this particular issue myself.
I've also asked several times for someone to even volunteer to verify a fix, and have received zero responses, which does not give me great motivation to work on a fix that does not affect me.
@rnicholus,
I can help test your fix for this issue.
I have this exact issue others have reported.
Thanks @jimmalone, but i don't currently have time to work on this specific issue as others have higher priority at the moment. I'll get to this when I have time again. In the meantime, if anyone wants to try a PR, let me know.