Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to call uppload with dynamic method using nextjs #688

Open
hbinduni opened this issue Jul 3, 2021 · 3 comments
Open

Unable to call uppload with dynamic method using nextjs #688

hbinduni opened this issue Jul 3, 2021 · 3 comments

Comments

@hbinduni
Copy link

hbinduni commented Jul 3, 2021

Describe the bug
I am using latest uppload and trying to integrate it with nextjs. here is what i get when i call uppload:

Unhandled Runtime Error
TypeError: Uppload.on is not a function

To Reproduce
Steps to reproduce the behavior:
You can see my implementation on stackblitz.com-nextjs-fwhaef
Basically, here how i try it:

components/uppload.js

import { Uppload, en, Local, fetchUploader } from 'uppload';

const uppload = new Uppload({
  lang: en,
  defaultService: 'local',
  maxSize: [1024, 1024],
  uploader: fetchUploader({
    endpoint: 'https://your-backend.com/upload'
  })
});

uppload.use([new Local()]);

export default uppload;

index.js

import Head from 'next/head';
import dynamic from 'next/dynamic';
import { useEffect, useState } from 'react';

import styles from '../styles/Home.module.css';

const Uppload = dynamic(() => import('../components/uppload'), {
  ssr: false
});

const URL = 'https://cdn.stocksnap.io/img-thumbs/280h/TLCYRTMCTR.jpg';

export default function Home() {
  const [image, setImage] = useState(URL);

  useEffect(() => {
    Uppload.on('upload', url => {
      setImage(url);
    });
  });

  const doUpload = async evt => {
    evt.preventDefault();
    Uppload.open();
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Test uppload</h1>

        <a
          className="uppload-button"
          href="/#upload"
          onClick={evt => doUpload(evt)}
        >
          click to upload
        </a>
      </main>

      <footer className={styles.footer}>
        <p>Power by Uppload</p>
      </footer>
    </div>
  );
}

Expected behavior
I try with reactjs, it working ok, but nextjs give me an error like above.
@TimNZ
Copy link

TimNZ commented Jul 3, 2021

next/dynamic only works with React components.

https://nextjs.org/docs/advanced-features/dynamic-import

@hedaukartik
Copy link

How to fix this issue for next.js?

@philohelp
Copy link

@hedaukartik Just dynamic import the component in which you call uppload

const Uppload = dynamic(() => import("./uppload/uppload_new_file"), {
  loading: () => <p>Loading...</p>,
  ssr: false,
});

Then, in your uppload_new_file.tsx:

import { uppload } from "./index";

export default function UpploadNewFile() {
  const manageUpploadResult = (res) => {
    const { dataFile } = res;
    console.log(dataFile.name);
  };
  const open = () => {
    uppload.on("upload", (res) => {
      manageUpploadResult(res);
    });
    uppload.open();
  };
  return (
    <button onClick={open}>
      <p>[Add an image]</p>
    </button>
  );
}

And finally, in your index.tsx:

import {
  Uppload,
} from "uppload";
export const uppload = new Uppload({
etc.
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@TimNZ @hbinduni @philohelp @hedaukartik