header

[mihaipopescu0409]

if i am trying to add a authorization header like this:

 url: `${environment.baseURL}/api/routing/version/${this.version.ID}/content/zip`,
 headers: {
    Authorization: `Bearer ${this.adal.userInfo.token}`
 },
 acceptedFiles: '.zip'

the field hiddenFileInput is empty, and i get this error: Uncaught TypeError: Cannot read property 'files' of null

If i am not passing the header parameter, everything works, but i am getting 401 from the server.

Any suggestions?

[j99ht]

Same thing happens here. Any news on this?

[mihaipopescu0409]

@j99ht i couldn't find a solution, so i ended up using dropzone without this wrapper

[sconix]

This wrapper passes in the configuration for the Dropzone as it is so this question is about how to use Dropzone and not about this wrapper.

The problem description is really vague so really hard to understand what is the problem. We are using authorization headers without any problems and I can not see any problems with it since as said this wrapper basically just relays the configuration to the Dropzone instance so everything works exactly the same way as with using Dropzone without this wrapper.

[AnimaWolf]

Same problem here:

Template

<dropzone [message]="'Click or drag files to upload'" (success)="_handleUploadSuccess($event)"
                  (error)="_handleUploadError($event)" [config]="createDropzoneHeader()"></dropzone>

Function

  createDropzoneHeader() {
    return {
      headers: {
        Authorization: `Bearer ${this.authService.getToken().access_token}`
      }
    };
  }

With the headers set the result I get is Uncaught TypeError: Cannot read property 'files' of null

UPDATE: It only seems to happen when I set the "headers" in the config of the component. When I set the headers globally (in the app.module.ts) there are no problems.

[sconix]

The problem with your solution is that actually creates new config object so dropzone gets re-initialized every time the config changes. So this wrapper just re-initializes dropzone when ever config object changes since I am not aware what config options of dropzone can be changed on the fly and what needs to be there in the init so its just easier to refresh on all changes. It would be nice if dropzone would support headers as a function then setting tokens would be slightly easier. But of course there is a way to do it now as well.

So you need to have your config object stored in your component and only update the headers inside that object and not create new config object each time. So just change your createDropzoneHeader to return the same object with updated headers and it should work.

[AnimaWolf]

Thanks, that seems to work :)

[cizaquita]

Same problem here:

Template

<dropzone [message]="'Click or drag files to upload'" (success)="_handleUploadSuccess($event)"
                  (error)="_handleUploadError($event)" [config]="createDropzoneHeader()"></dropzone>

Function

  createDropzoneHeader() {
    return {
      headers: {
        Authorization: `Bearer ${this.authService.getToken().access_token}`
      }
    };
  }

With the headers set the result I get is Uncaught TypeError: Cannot read property 'files' of null

UPDATE: It only seems to happen when I set the "headers" in the config of the component. When I set the headers globally (in the app.module.ts) there are no problems.

Can you explain how did you does it?

My auth token refresh every 300ms, so I need to dynamically set the bearer token on every update.

The library does not allow me to do this when the component init, it gets the first configuration I set.