Josh4324/index.js

## index.js
import Head from "next/head";
import styles from "../styles/Home.module.css";
import Sidebar from "../components/Sidebar";

export default function Home() {
  //The showWidget pops up a cloudinary widget that we can use to upload any file and it returns an object that contains
  // the name, link to the url of the uploaded file and other information
  const showWidget = () => {
    const myWidget = window.cloudinary.createUploadWidget(
      {
        cloudName: "Insert your cloudName",
        uploadPreset: "Insert your uploadPreset",
      },
      (error, result) => {
        if (!error && result && result.event === "success") {
          console.log(result);
        }
      }
    );
    myWidget.open();
  };
  return (
    <div>
      <Head>
        <title>CloudDrop - Home</title>
        <meta name="description" content="Clouddrop" />
        {/*  eslint-disable-next-line @next/next/no-sync-scripts */}
        <script
          src="https://upload-widget.cloudinary.com/global/all.js"
          type="text/javascript"
        ></script>
      </Head>

      <div className={styles.homeflex}>
        <Sidebar />
        <div className={styles.home}>
          <div className={styles.cloud}>
            <h1 className={styles.homehead}>CloudDrop </h1>
            <h3 className={styles.homehead2}></h3>
          </div>
          {/* We added the showWidget function to the onClick handler */}
          <button onClick={showWidget} type="button" className={styles.upload}>
            Upload File
          </button>
        </div>
      </div>
    </div>
  );
}
	import Head from "next/head";
	import styles from "../styles/Home.module.css";
	import Sidebar from "../components/Sidebar";

	export default function Home() {
	//The showWidget pops up a cloudinary widget that we can use to upload any file and it returns an object that contains
	// the name, link to the url of the uploaded file and other information
	const showWidget = () => {
	const myWidget = window.cloudinary.createUploadWidget(
	{
	cloudName: "Insert your cloudName",
	uploadPreset: "Insert your uploadPreset",
	},
	(error, result) => {
	if (!error && result && result.event === "success") {
	console.log(result);
	}
	}
	);
	myWidget.open();
	};
	return (
	<div>
	<Head>
	<title>CloudDrop - Home</title>
	<meta name="description" content="Clouddrop" />
	{/* eslint-disable-next-line @next/next/no-sync-scripts */}
	<script
	src="https://upload-widget.cloudinary.com/global/all.js"
	type="text/javascript"
	></script>
	</Head>

	<div className={styles.homeflex}>
	<Sidebar />
	<div className={styles.home}>
	<div className={styles.cloud}>
	<h1 className={styles.homehead}>CloudDrop </h1>
	<h3 className={styles.homehead2}></h3>
	</div>
	{/* We added the showWidget function to the onClick handler */}
	<button onClick={showWidget} type="button" className={styles.upload}>
	Upload File
	</button>
	</div>
	</div>
	</div>
	);
	}