Destroy

[Zmoki]

I added the destroy method to the widget. This method remove an element uploadcare-widget from DOM and flush a uploadcare's data in the input element.

But we have a problem 😣. If uploadcare initialized on the default input with role="uploadcare-uploader, after uploadcare-widget will be removed, it returns anyway. Because live is true and uploadcare initialized as a widget after about ~100 ms. So, we need set UPLOADCARE_LIVE = false;.

Example 1

<input className="hey" id="hey" />
<button onClick="removeHey()">Exterminate!</button>

let widget = uploadcare.Widget("#hey");

removeHey() {
  widget.destroy();
}

Example 2

doesn't work, because live = true

<input role="uploadcare-uploader" id="hey1" />
<input role="uploadcare-uploader" id="hey2" />
<input role="uploadcare-uploader" id="hey3" />
<button onClick="removeHey2()">Exterminate!</button>

removeHey2() {
  let widget = uploadcare.Widget("#hey2");
  widget.destroy();
}

Example 3

UPLOADCARE_LIVE = false;

<input role="uploadcare-uploader" id="hey1" />
<input role="uploadcare-uploader" id="hey2" />
<input role="uploadcare-uploader" id="hey3" />
<button onClick="removeHey2()">Exterminate!</button>

removeHey2() {
  let widget = uploadcare.Widget("#hey2");
  widget.destroy();
}

Related with #328

[Zmoki]

@homm what do you think?

[homm]

If uploadcare initialized on the default input with role="uploadcare-uploader, after uploadcare-widget will be removed, it returns anyway.

This is not a problem because user removes the widget for a reason: he wants to remove entire HTML fragment or reinitialize the widget.

[Zmoki]

I added new method reset to uploadcare. Its destroy default widgets ([role=uploadcare-uploader]). Works, if UPLOADCARE_LIVE = false.

I create usage example in https://github.com/Zmoki/try-uploadcare-widget/tree/destroy

<script>
  UPLOADCARE_LIVE = false;
</script>

import React, {Component} from "react";
import uploadcare from "uploadcare-widget";

class Uploader extends Component {

  componentDidMount() {
    uploadcare.start({
      publicKey: "demopublickey"
    });
    uploadcare.Widget("#Uploadcare2");
    uploadcare.Widget("#Uploadcare3");
  }

  reset() {
    uploadcare.reset();
  }

  initialize() {
    uploadcare.initialize();
  }

  destroyAll() {
    uploadcare.reset();

    let widgetInputs = document.querySelectorAll("[id^=Uploadcare");
    widgetInputs.forEach(input => {
      (uploadcare.Widget(input)).destroy();
    });
  }

  resurrectAll() {
    uploadcare.initialize();
    uploadcare.Widget("#Uploadcare2");
    uploadcare.Widget("#Uploadcare3");
  }

  render() {
    return (
      <div>
        <input type="hidden" role="uploadcare-uploader"/>
        <input type="hidden" id="Uploadcare2" data-images-only/>
        <input type="hidden" id="Uploadcare3" data-multiple/>
        <hr/>
        <button onClick={this.reset}>reset</button>
        <button onClick={this.initialize}>initialize</button>
        <button onClick={this.destroyAll}>destroy all!</button>
        <button onClick={this.resurrectAll}>resurrect all!</button>
      </div>
    )
  }
}

export default Uploader;

[Zmoki]

@homm bump

[homm]

the comma is unnecessary

[homm]

I added new method reset to uploadcare.

I don't like it for three reasons:

1. Nobody asks it.
2. Its implementation doesn't require any internal details and can be done outside of widget.
3. The name is ambiguous.

[homm]

I've added memory leaks test. Looks like there are no memory leaks, but memory was freed only after major GCs.

[Zmoki]

@homm

1. How i can destroy all widgets? #331
2. hm, yep, with new widget's method destroy
3. agree, "Exterminate!" will be better 😀

Stay on widget's method destroy and remove reset from uploadcare or do something else?

[homm]

Ok, if it is requested, let's give it the better name uninitialize.

[homm]

No, deinitialize.