Just not working

[oelbaga]

This seemed so promising, but a simple copy and paste doesn't work. using the basic file example. When you click upload a file and upload an image there's just no response, nothing in the console, no state change, nothing happens the page stays as is.

Simply using the demo code:

import { useState } from 'react';
import { useS3Upload } from 'next-s3-upload';

export default function UploadTest() {
  let [imageUrl, setImageUrl] = useState();
  let { FileInput, openFileDialog, uploadToS3 } = useS3Upload();

  let handleFileChange = async file => {
    let { url } = await uploadToS3(file);
    setImageUrl(url);
  };

  return (
    <div>
      <FileInput onChange={handleFileChange} />

      <button onClick={openFileDialog}>Upload file</button>

      {imageUrl && <img src={imageUrl} />}
    </div>
  );
}

[montanaflynn]

Same issue but it's intermittent and I can't always reproduce it. The issue appears to be that handleFileChange just doesn't fire after selecting a file sometimes.

import { useState } from 'react';
import { useS3Upload } from 'next-s3-upload';

export default function UploadTest() {
  let [imageUrl, setImageUrl] = useState();
  let { FileInput, openFileDialog, uploadToS3 } = useS3Upload();

  let handleFileChange = async file => {
    alert("upload")
    let { url } = await uploadToS3(file);
    setImageUrl(url);
  };

  return (
    <div>
      <FileInput onChange={handleFileChange} />

      <button onClick={openFileDialog}>Upload file</button>

      {imageUrl && <img src={imageUrl} />}
    </div>
  );
}

Added an alert, about 50% of the time after choosing an image it happens, the other nothing happens.

[ryanto]

@montanaflynn Thank you for doing some testing!

I'd love to be able to follow your exact steps to help debug this.

Few questions:

• What browser are you using?
• Does it happen the first time you select a file? (reload the page, and select file)
• Does it happen the second time you select a file? (reload page, select file, select different file)
• Anything else you think would be helpful?

[montanaflynn]

@ryanto

• Latest chrome
• Sometimes it happens the first time, the second time or any time. I thought maybe it was due to choosing the same file, but I can choose the same file 5 times in a row and it might work on the 3rd and 5th times, or first and last, it's pretty random.
• I made a codesandbox and it works every time, but the exact same code locally is sporadic, and actually a few days ago was working every time.

https://codesandbox.io/s/sharp-shamir-d787sl?file=/src/App.js

[ryanto]

Ok cool! Thank you for setting this all up. I'll take a look and let you know what I find.

[JackWCollins]

Just wanted to chime in that I'm also experiencing this same issue. I am using NextJs v13, so that could be part of the problem. Can/should this be reopened?

I was able to get around this by not using the FileInput and instead just using:

  const startUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    if (!event.target.files) {
      console.error('No file selected')
      return
    }

    const file = event.target.files[0]
    let { url } = await uploadToS3(file);
    setImageUrl(url);
  }

  return (
    <div>
      <input type="file" onChange={startUpload} />

      {imageUrl && <img src={imageUrl} />}
    </div>
  );

[montanaflynn]

I was using next 12, and ended up building the functionality from scratch.

[ryanto]

I'd say don't use FileInput and building from scratch is the way to go if it's not working for you.