How to AlpineJS - Simple reusable components for AlpineJS

apline-snippets.js

import plupload from "plupload";

export let alert = (
  message = "Success",
  details = [],
  type = "default",
  duration = 5000,
  position = "bottom-center",
  autoDismiss = true
) => ({
  init() {
    this.message = message;
    this.details = details;
    this.type = type;
    this.duration = duration;
    this.position = position;
    autoDismiss && this.autoDismissAlert();
  },
  message: "Success",
  details: [],
  type: "default",
  duration: 5000,
  position: "bottom-center",
  dismissAlert() {
    this.$root.remove();
  },
  autoDismissAlert() {
    setTimeout(() => this.$root.remove(), this.duration);
  }
});

export let mediaUpload = (
  browseButton = "browse",
  url = "http://localhost/media/upload"
) => ({
  init() {
    this.setup();
    this.uploader.init();
  },

  uploader: new plupload.Uploader({}),

  setup() {
    let token = document.getElementsByName("_token")[0].value;
    console.log("token", token);

    this.uploader = new plupload.Uploader({
      browse_button: browseButton,
      url: url,
      file_data_name: "media",
      multi_selection: false,
      filters: {
        mime_types: [{ title: "Image files", extensions: "jpg,gif,png" }],
        prevent_duplicates: true
      },
      max_retries: 3,
      chunk_size: "10kb",
      multipart_params: {
        _token: token
      },
      init: {
        PostInit: (up) => {
          // arrow syntax infers this from it global scope
          console.log("internal post init this:", this); // this = instance of Alpine data proxy
        },
        /* 
        // Alternative Syntax
        // Example 1:  // ES syntax methods bound this to it local scope
        PostInit(up) {
            console.log('internal post init this:', this); //this = instance of uploader
        },
             
        // Example 2: traditional function bounds this to it local scope
        PostInit: function (up) {
            console.log('internal post init this:', this); //this = instance of uploader
        },
         
        // More examples below
        */

        FilesAdded: (up, files) => {
          const reader = new FileReader();

          reader.addEventListener("load", () => {
            console.log("data url: ", reader.result);
            document.getElementById("image-preview").src = reader.result;
          });

          reader.readAsDataURL(files[0].getSource().getSource());
          up.start();
          // this.$dispatch('upload_started', this.uploader)
        },

        ChunkUploaded: (up, file, info) => {
          console.log("Chunk uploaded: ", info);
        },

        UploadProgress: (up, file) => {
          console.log("UploadProgress: ", file.percent, "%");
          console.log(file);
        },

        FileUploaded: (up, file, result) => {
          console.log("FileUploaded");
          console.log(file);
          console.log(JSON.parse(result.response));
          const responseResult = JSON.parse(result.response);

          if (!responseResult.ok) {
            console.log("Upload Error: ", responseResult.info);
          }
          if (result.status !== 200) {
            console.log("File Uploaded Failed");
          }
          if (responseResult.ok === 1 && result.status === 200) {
            console.log("File Uploaded Successfully");
          }
        },

        UploadComplete: (up, file) => {
          console.log("File Uploaded Successfully!!", file);
        },

        Error: (up, err) => {
          console.log("error: ", err, up);
        }
      }
    });
    /* 
    // More alternative syntax
    // Example 3: arrow syntax infers this from it global scope
    uploader.bind('PostInit', (up) => {
        console.log('post init this: ', this) // this = instance of Alpine data proxy
    });

    // Example 4: traditional function bounds this to it local scope
    uploader.bind('PostInit', function (up) {
        console.log("post init this: ", this) // //this = instance of uploader
    });

    // Example 5: Overriding the local scope of `this` bounded by the traditional function
    // by passing in the 3rd argument:`scope`
    uploader.bind('PostInit', function (up) {
        console.log("post init this: ", this) // this = instance of Alpine data proxy
    }, this);

    // Example 6: arrow syntax infers this from it global scope
    // again, the 3rd arugument scope is passed
    //(this is a little extraneous but here for demo purpose)
    uploader.bind('PostInit', (up) => {
        console.log("post init this: ", this) // this = instance of Alpine data proxy
    }, this);
    */
  }
});