Update example and fix bug with missing base url

example/react-app/package.json

@@ -4,11 +4,11 @@
   "private": true,
   "proxy": "http://localhost:8080",
   "dependencies": {
-    "graphql": "^14.3.1",
-    "graphql-tag": "^2.10.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1",
+    "graphql": "^15.3.0",
+    "graphql-tag": "^2.11.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.3",
     "react-use-upload": "file:../../"
   },
   "scripts": {

example/react-app/src/App.js

@@ -1,32 +1,32 @@
-import React from 'react';
+import React from "react";
 import {
   UploadProvider,
   createXhrClient,
   createGraphQLClient,
-} from 'react-use-upload';
+} from "react-use-upload";
 
-import SignedUpload from './signed-upload';
-import NormalUpload from './normal-upload';
-import GraphQLUpload from './graphql-upload';
+import SignedUpload from "./signed-upload";
+import NormalUpload from "./normal-upload";
+import GraphQLUpload from "./graphql-upload";
 
 const xhrClient = createXhrClient({
-  baseUrl: 'http://localhost:3000',
-  modifyRequest: request => ({
+  baseUrl: "http://localhost:8080",
+  modifyRequest: (request) => ({
     ...request,
     headers: {
       ...request.headers,
-      authorization: `Bearer ${localStorage.getItem('token')}`,
+      authorization: `Bearer ${localStorage.getItem("token")}`,
     },
   }),
 });
 
 const graphQLClient = createGraphQLClient({
-  baseUrl: 'http://localhost:3000/graphql',
-  modifyRequest: request => ({
+  baseUrl: "http://localhost:8080/graphql",
+  modifyRequest: (request) => ({
     ...request,
     headers: {
       ...request.headers,
-      authorization: `Bearer ${localStorage.getItem('token')}`,
+      authorization: `Bearer ${localStorage.getItem("token")}`,
     },
   }),
 });
@@ -38,11 +38,14 @@ export default () => {
         <GraphQLUpload />
       </UploadProvider>
       <UploadProvider client={xhrClient}>
-        <NormalUpload />
+        <NormalUpload path="/upload" />
         <SignedUpload />
       </UploadProvider>
 
-      <NormalUpload title="Normal upload, no provider" />
+      <NormalUpload
+        title="Normal upload, no provider"
+        path="http://localhost:8080/upload"
+      />
     </React.Fragment>
   );
 };

example/react-app/src/graphql-upload.js

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import { useUpload } from 'react-use-upload';
+import React, { useState } from "react";
+import { useUpload } from "react-use-upload";
 
-import gql from 'graphql-tag';
+import gql from "graphql-tag";
 
 const uploadMutation = gql`
   mutation UploadFile($input: UploadFileInput!) {
@@ -17,9 +17,11 @@ const GraphQLUpload = () => {
 
   let { loading, progress, error } = useUpload(files, {
     mutation: uploadMutation,
-    variables: { input: { files, name: 'test' } },
+    variables: { input: { files, name: "test" } },
   });
 
+  console.log(loading, progress, error);
+
   return (
     <div style={{ marginBottom: 50 }}>
       <div>GraphQL Test</div>
@@ -28,7 +30,11 @@ const GraphQLUpload = () => {
       ) : error ? (
         <div>{error}</div>
       ) : (
-        <input type="file" onChange={e => setFiles(e.target.files)} multiple />
+        <input
+          type="file"
+          onChange={(e) => setFiles(e.target.files)}
+          multiple
+        />
       )}
     </div>
   );

example/react-app/src/normal-upload.js

@@ -1,24 +1,24 @@
-import React, { useState } from 'react';
-import { useUpload } from 'react-use-upload';
+import React, { useState } from "react";
+import { useUpload } from "react-use-upload";
 
-const NormalUpload = ({ title }) => {
+const NormalUpload = ({ title, path }) => {
   let [files, setFiles] = useState();
   let { loading, progress, error } = useUpload(files, {
-    path: 'http://localhost:3000/upload',
-    name: 'test',
-    fields: { extraData: 'hello!' },
+    path,
+    name: "test",
+    fields: { extraData: "hello!" },
   });
-  console.log(error, 'here');
+  console.log(error, "here");
   return (
     <div style={{ marginBottom: 50 }}>
-      <div>{title || 'Normal HTTP upload'}</div>
+      <div>{title || "Normal HTTP upload"}</div>
 
       {loading ? (
         <div>Progress: {progress}</div>
       ) : error ? (
         <div>{error}</div>
       ) : (
-        <input type="file" onChange={e => setFiles(e.target.files)} />
+        <input type="file" onChange={(e) => setFiles(e.target.files)} />
       )}
     </div>
   );

example/react-app/src/signed-upload.js

@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from 'react';
-import { useUpload } from 'react-use-upload';
+import React, { useState, useEffect } from "react";
+import { useUpload } from "react-use-upload";
 
-const getUrl = async files => {
-  let response = await fetch('http://localhost:3000/get-url');
+const getUrl = async (files) => {
+  let response = await fetch("http://localhost:8080/get-url");
   let { url } = await response.json();
   console.log(
-    'the uploader waits for the promise to resolve and uses this url to upload',
-    files,
+    "the uploader waits for the promise to resolve and uses this url to upload",
+    files
   );
-  await new Promise(resolve => setTimeout(resolve, 1000));
+  await new Promise((resolve) => setTimeout(resolve, 1000));
   return url;
 };
 
@@ -17,14 +17,14 @@ const NormalUpload = () => {
 
   let { loading, progress, error, done } = useUpload(files, {
     getUrl,
-    name: 'test',
+    name: "test",
   });
 
   useEffect(() => {
     if (!done) return;
     console.log(
-      'done uploading, send something to your server if you need to',
-      files,
+      "done uploading, send something to your server if you need to",
+      files
     );
   }, [done, files]);
 
@@ -37,7 +37,7 @@ const NormalUpload = () => {
       ) : error ? (
         <div>{error}</div>
       ) : (
-        <input type="file" onChange={e => setFiles(e.target.files)} />
+        <input type="file" onChange={(e) => setFiles(e.target.files)} />
       )}
     </div>
   );