Using dropzone.js to upload files OnClick with ASP.NET Service

ermalsh

Hi all and thank you in advanced.

Basically, I want to add a Dropzone.js Upload box on my page that allows me to drag n' drop files into the dropzone and then click a button to upload it to a folder using a backend API. The error is client side with the JS and I'm just looking for assistance on how I can approach this in a better/working way.

My html:

<form action="#" class="dropzone">
  <div class="fallback">
     <input id="fileUpload" type="file" name="file" multiple onchange="setFileInfo(this.files)" />
  </div>
</form>
<button id="btnUploadFile" type="button"></button>

My JS:

$('#btnUploadFile').on('click', function () {

var data = new FormData($('form')[0]);
var files = $("#fileUpload").get(0).files;

// Add the uploaded image content to the form data collection
if (files.length > 0) {
    for (i = 0; i < files.length; i++) {
        data.append("UploadedImage" + i, files[i]);
    }
}

console.log(data)

// Make Ajax request with the contentType = false, and procesDate = false
var ajaxRequest = $.ajax({
    type: "POST",
    url: "api/fileupload/uploadfile",
    enctype: 'multipart/form-data',
    contentType: false,
    processData: false,
    data: data
});

ajaxRequest.done(function (xhr, textStatus) {
    // Do other operation
    console.log(textStatus)
    console.log(xhr)
});

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(element, {
    url: "#",
    autoProcessQueue: false
});

My error:

Uncaught TypeError: Cannot read property 'files' of undefined
at HTMLButtonElement.<anonymous> (core.js:1064)
at HTMLButtonElement.dispatch (jquery.js:5206)
at HTMLButtonElement.elemData.handle (jquery.js:5014)

I hope this suffices in detail. Thank you very much.

K. Tippenhauer

Take a look here DropZone Doc, Usage without JS. The content in the fallback div will be removed by dropzone.js when JS is available. This means, there is no fileUpload-Input available, after the JS from dropzone.js is executed on pageload. Instead dropzone will create its own . You can see it, when you take a look at the HTML in you browser.

Since the fallback is only available when there is no javascript, there is also no way to send the content of your form with JS. Can you explain why you aren't uploading the data with the form action? Maybe I can help you a little more how to fix this.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

how to upload and delete files from dropzone.js

From Dev

Dropzone.js upload progress bar not showing

From Dev

Alternative options to upload files to Microsoft Azure using Asp.net 3.5 (latest Azure Storage libraries not compatible)?

From Dev

Rails 4 file upload with Dropzone.js using Paperclip

From Dev

Upload multiple files in Struts2 with Dropzone.js

From Dev

how to set upload button in dropzone.js

From Dev

Upload order with Dropzone.js

From Dev

Simulated file drop and upload in dropzone.js

From Dev

Upload files to Google Drive using Dropzone

From Dev

Upload Files using Dropzone JS with regular HTTP request NOT AJAX

From Dev

Upload multiple files with FormData using AngularJS and Asp.Net MVC

From Dev

Dropzone.js - Success message after Upload

From Dev

Dropzone upload all in one array using serialize

From Dev

can't upload multiple files with dropzone

From Dev

Upload files to Amazon S3 With Dropzone.js issue

From Dev

Upload images to Imgur with Dropzone.JS

From Dev

Upload multiple files/ filepath using asp.net mvc

From Dev

Upload Multiple Image using multiple file control in asp.net mvc 4.0 (angular js)

From Dev

Dropzone JS Change Filename Before Upload

From Dev

can not multiple upload using dropzone and multer

From Dev

Dropzone JS Upload to WCF Getting Wrong Data

From Dev

How to upload files using ajax to asp.net mvc controller action

From Dev

Upload Files To Dropbox In ASP.Net

From Dev

Upload files to Google Drive using Dropzone

From Dev

Upload Files using Dropzone JS with regular HTTP request NOT AJAX

From Dev

Dropzone.js - Success message after Upload

From Dev

JS files upload queue using Django block

From Dev

How to Upload Files using ajax call in asp.net?

From Dev

How can i upload files on dropzone.js with style="display: none;" using Selenium?

Related Related

  1. 1

    how to upload and delete files from dropzone.js

  2. 2

    Dropzone.js upload progress bar not showing

  3. 3

    Alternative options to upload files to Microsoft Azure using Asp.net 3.5 (latest Azure Storage libraries not compatible)?

  4. 4

    Rails 4 file upload with Dropzone.js using Paperclip

  5. 5

    Upload multiple files in Struts2 with Dropzone.js

  6. 6

    how to set upload button in dropzone.js

  7. 7

    Upload order with Dropzone.js

  8. 8

    Simulated file drop and upload in dropzone.js

  9. 9

    Upload files to Google Drive using Dropzone

  10. 10

    Upload Files using Dropzone JS with regular HTTP request NOT AJAX

  11. 11

    Upload multiple files with FormData using AngularJS and Asp.Net MVC

  12. 12

    Dropzone.js - Success message after Upload

  13. 13

    Dropzone upload all in one array using serialize

  14. 14

    can't upload multiple files with dropzone

  15. 15

    Upload files to Amazon S3 With Dropzone.js issue

  16. 16

    Upload images to Imgur with Dropzone.JS

  17. 17

    Upload multiple files/ filepath using asp.net mvc

  18. 18

    Upload Multiple Image using multiple file control in asp.net mvc 4.0 (angular js)

  19. 19

    Dropzone JS Change Filename Before Upload

  20. 20

    can not multiple upload using dropzone and multer

  21. 21

    Dropzone JS Upload to WCF Getting Wrong Data

  22. 22

    How to upload files using ajax to asp.net mvc controller action

  23. 23

    Upload Files To Dropbox In ASP.Net

  24. 24

    Upload files to Google Drive using Dropzone

  25. 25

    Upload Files using Dropzone JS with regular HTTP request NOT AJAX

  26. 26

    Dropzone.js - Success message after Upload

  27. 27

    JS files upload queue using Django block

  28. 28

    How to Upload Files using ajax call in asp.net?

  29. 29

    How can i upload files on dropzone.js with style="display: none;" using Selenium?

HotTag

Archive