/    Sign up×
Community /Pin to ProfileBookmark

Help with understanding the jQuery uploader plugin

Hello, people.

I know that a good programmer can easily make sense in simple and primitive documentation like this in a minute, so asking you for help!

I need to make a drag and drop file uploader on my website with a list of files waiting in a separate section so I chose to use the “jQuery uploader” plugin and I am nearly done with the coding for this but stuck in the end.

github https://github.com/danielm/uploader#live-demos
demos https://danielmg.org/demo/java-script/uploader/basic

My problem is that I can’t manage to do the main part. That is to upload files on click.

This is how it looks like:
https://drive.google.com/file/d/1iEIn6PIb12fR7n03ksOnztfcmSyzIAtU/view?usp=sharing

The only can that I can share (Because all the other parts don’t matter at all) is this:
Here I am creating the object, thats nearly copied from the original documentation. And at the bottom some of my own code.

[code]
$(document).ready(function(){
$(‘#drop-area’).dmUploader({
url: ‘scripts/launcher/launcher-xml/php/upload.php’,

onDragEnter: function(){
// Happens when dragging something over the DnD area
this.addClass(‘active-uploader’);
},

onDragLeave: function(){
// Happens when dragging something OUT of the DnD area
this.removeClass(‘active-uploader’);
},

onNewFile: function(id, file){
// When a new file is added using the file selector or the DnD area
add_file_to_queue(id, file);
},

onUploadCanceled: function(id) {
// Happens when a file is directly canceled by the user.
},
});

$(‘#files’).on(‘click’, ‘.upload-file svg’, function() {
object_id = $(this).parent().data(‘object-id’);
$(this).parent().remove();
$(“#drop-area”).dmUploader(“cancel”, object_id);
check_upload_available();
});

$(‘#start-xml-loading-button’).click(function() {
$(“#drop-area”).dmUploader(“start”);
});
});
[/code]

Mainly I am interested in this:

[code]
$(“#drop-area”).dmUploader(“start”);
[/code]

That is again copied from the documentation. This is supposed to start the file uploading by calling the php script that I specified in the URL at the top when I was creating the object.

I don’t get any errors or page reloading.
I also can’t check if all I have done before works because can’t see the array of files that are currently waiting for upload because the documentation does not specify the way to do so…
Also, the demo given does not use the button, it just starts the uploading automatically so I can’t see any examples of how to do this.

Please help

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumAug 01.2021 — I didn't test it but in the demos I find one where the features "Start" and "Cancel" are used:

https://danielmg.org/demo/java-script/uploader/controls

The widget settings read like this:
``<i>
</i>// Plugin settings:
$('#drag-and-drop-zone').dmUploader({
url: '/demo/java-script/upload',
maxFileSize: 3000000, // 3 Megs max
auto: false,
queue: false,
// ...
});<i>
</i>
`</CODE>
Try setting <C>
auto</C> and <C>queue</C> to <C>false`.
×

Success!

Help @weareandrei spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...