1

Problem: I am getting this error after uploading a file via dropzone.js

POST http://localhost:8080/[object%20Promise] 404 (Not Found)

I am using dropzone.js library in order to upload videos on an app. The url is different each time for every file. So I make http request - using axios - in order to get each time the url.

The only possible solution I found was by passing a callback function to the url (Dropzone.options):

   var myDropzone = new Dropzone(".my-upload-container", { 
            url: axios.post('/createURL)
                   .then( function (response) {
                       var theURL = bla
                       return theURL
                   })
          });

When I am uploading a file and the Dropzone is sending a POST request, I am getting this 404 error.

Question: How can I get the correct url that I want?

A sample of a url that I want is like: http://blabla.com/v1/key=bla&token=bla

gassio
  • 185
  • 2
  • 13
  • Set the instance url after the promise resolves and make the Dropzone disabled before that, or create the instance after the promise has resolved. – Etheryte Nov 09 '17 at 17:46
  • Thank you. I found another solution. I created the Dropzone instance after the promise has resolved. – gassio Nov 14 '17 at 15:09

1 Answers1

3

Here's an answer for the same question: https://stackoverflow.com/a/49900990/3236706

Dropzone.autoDiscover = false;

const doStuffAsync = (file, done) => {
  fetch('https://httpbin.org/get').then((response) => {
    file.dynamicUploadUrl = `https://This-URL-will-be-different-for-every-file${Math.random()}`
    done();//call the dropzone done
  })  
}

const getMeSomeUrl = (files) => {
  return `${files[0].dynamicUploadUrl}?sugar&spice`;
}

let myDropzone = new Dropzone("#my-awesome-dropzone", {
  method: "put",
  accept: doStuffAsync,
  url: getMeSomeUrl
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">

<form action="/file-upload" class="dropzone" id="my-awesome-dropzone">
</form>
BlueWater86
  • 1,773
  • 12
  • 22