Calling the instance and adding already uploaded files

[asanti82]

I understand from other comments that you just created the wrapper for which I am thankful. But if you could atleast shed some light into how to get/call the instance before it's created and add the following code? This is straight from Dropzone documentation as to how to add already uploaded files:

`// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");
// Or if the file on your server is not yet in the right
// size, you can let Dropzone download and resize it
// callback and crossOrigin are optional.
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);

// Make sure that there is no progress bar, etc...
myDropzone.emit("complete", mockFile);

// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
var existingFileCount = 1; // The number of files already uploaded
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;`

From what I understand "myDropzone" is the created instance, but when going by your example I just added the following:

<dropzone [config]="dzEditor" [message]="'Click or drag images here to upload'" [useDropzoneClass]="false" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"> </dropzone>

So not sure how to add the prev code to this?

[sconix]

See the readme how to get the dropzone instance from the wrapper.

[asanti82]

just saw that but not sure if I'm doing it right because I keep getting an error: ERROR TypeError: Cannot read property 'directiveRef' of undefined

And what I've done based on other posts is:

`
@ViewChild(DropzoneComponent) componentRef: DropzoneComponent;
dropzone: any;

   // Get a reference ot the dropzone component
    this.dropzone = this.componentRef.directiveRef.dropzone();
    for (let key in this.gallery) {
      let value = this.gallery[key];
      var mockFile = { name: value.filename, size: 12345 };
      this.dropzone.addedFiles( mockFile );
      this.dropzone.createThumbnailFromUrl( value.filename, value.filepath );
      this.dropzone.complete(mockFile);
    }

`

I do apologize if this is something really simple, but I'm barely starting out with Angular so everything is still super new to me

[sconix]

It all depends at what phase you are trying to access the reference. So you need to study basic of Angular lifecycle to understand what is available and when. The example app also has the example usage of the reference so a good starting point.