Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
function uploadMovie(_context, fileList) {
  return Promise.resolve('HELLO WORLD')
}
  
  const fetchMachine = Machine({
  id: "gif",
  type: "parallel",
  states: {
    upload: {
      id: "upload",
      initial: "idle",
      context: {
        file: null
      },
      states: {
        idle: {},
        uploading: {
          entry: assign(() => ({
            file: null
          })),
          invoke: {
            id: "upload-file",
            src: uploadMovie,
            onDone: {
              target: "uploaded",
              actions: assign((_context, { data }) => ({
                file: data
              }))
            },
            onError: "failure"
          }
        },
        uploaded: {
          on: {
            REFRESH: "uploading",
            RESET: "idle"
          }
        },
        failure: {
          on: {
            RETRY: "uploading",
            CANCEL: "idle"
          }
        }
      }
    },
    drag: {
      id: "drag",
      initial: "idle",
      states: {
        idle: {
          on: {
            DRAGOVER: "dragover"
          }
        },
        dragover: {
          on: {
            DRAGLEAVE: "dragleave",
            DROP: "drop"
          }
        },
        dragleave: {
          on: {
            DRAGOVER: "dragover",
            DROP: "idle"
          }
        },
        drop: {
          entry: raise("UPLOAD"),
          on: {
            DRAGOVER: "dragover",
          }
        }
      }
    }
  },
  on: {
    UPLOAD: {
      target: ".upload.uploading"
    }
  }
});