bytescale / bytescale-upload-widget-react Goto Github PK

apiKey isn't allowed on the options prop passed to UploadButton:

Type '{ apiKey: string; }' is not assignable to type 'UploadWidgetReactConfig'.
  Object literal may only specify known properties, and 'apiKey' does not exist in type 'UploadWidgetReactConfig'.
  
The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & UploadButtonProps'

Simple reproduction, React/Vite/[email protected]

Other options work fine. I believe it has to do with how it's linking to the @bytescale/sdk types.

By default, the widget connects to a cloud provider (e.g. Bytescale) and uploads/saves the files there.

In my use case, however, I don't need to actually save the files. I just need to read their textual data. (The files I am working with are text and/or JSON files, not images. My workflow is basically (1) Read the raw text of files from the filesystem; (2) do something with that raw text.)

Is there a way to do this? Can I force the widget to not call the cloud storage provider?

Hello,
I'm following up on issue #2.

1. Is it possible to customize this preview screen? Instead of showing a generic icon and the filename, maybe the actual uploaded image. Developers should be able to do that through a render or parameterized children props

I am using the widget in my TypeScript (Next.js) app to upload and process text files. The following onComplete handler works fine:
onComplete={files => alert(files.map(x => x.fileUrl).join("\n"))}

However, the requirement for my application is that I read the actual text data from the file (not the url). I noticed that the UploadWidgetResult class does not have a built-in fileText property.

Is there a simple way to extract the file's text from UploadWidgetResult that doesn't require server-side components or hooks?

<UploadDropzone
          uploader={uploader}
          options={{
            showFinishButton: false,
            maxFileCount: 1,
            mimeTypes: ['image/jpeg', 'image/png'],
            multi: false,
            layout: 'inline',
            showRemoveButton: true,
            editor: { images: { crop: false } },
          }}
          onUpdate={(file) => {
            if (file.length !== 0) {
              generatePhoto(file[0].fileUrl)
            }
          }}
          height="250px"
        />

the continue button just doesn't go away, I wanna use my own button but am unable to

Requirement: Currently All my files are getting uploaded to uploads folder.
But I would like to put them in a different folder but with same organisational structure of year, month and date in uploads folder.

Well, I can create the full path on my own using JS but I was curious if there is a way to make use of the existing mechanism of uploads folder to be copied into a new folder.

What I have tried?
Settings the path: '/redesigner.io/{UTC_YEAR}/{UTC_MONTH}/{UTC_DAY}/{UNIQUE_DIGITS_8}{ORIGINAL_FILE_EXT}',

like above doesn't seem to work

I get TypeError useState not defined if I remove setState from my component.

Ex: let's say I want to use the widget only to upload picture but not set any state on success. or if i want to use it on an RSC, it can't be done at the moment.

codepen with issue: https://codepen.io/kirandash/pen/WNaVqXY?editors=0011

The height prop has been accidentally defaulted as so:

height: "375px" ?? height

Clearly it should be:

height: height ?? "375px"

When uploading files, we see this remove button.

In the current behavior, the file is removed from the UI while keeping the uploaded asset.

The expected behavior should be for the uploaded file to be also deleted. I understand that the file delete resource is protected by the secret key, but I think there should be a secure way to achieve that.

Also, if developers want to do this on their server side, is it possible to have an event callback when the file is deleted?

In my Next.js application, something very strange is occurring when I click Upload to upload files. After the files are finished uploading (but before I click Finish), my backend project (which is a separate Visual Studio ASP.NET 6.0 Minimal API project, running locally in debug mode in the IDE on https://localhost:7238) crashes with this error:

C:\Users\cade.bryant\source\repos\xxx.xxx.xxx.POC\xxx.xxx.xxx.POC.TestAPI\bin\Debug\net6.0\xxx.xxx.xxx.POC.TestAPI.exe (process 12956) exited with code -1.
To automatically close the console when debugging stops, enable Tools->Options->Debugging->Automatically close the console when debugging stops.

The strange thing is this: my UploadButton handler is not written to communicate with my backend project! (At least not yet). But somehow Visual Studio or the .NET platform mysteriously "knows" that my UploadButton's onComplete callback has been called! This makes absolutely no sense, and yet it is happening!

Here is how my UploadButton is set up:

<UploadButton options={options}
onComplete={
  files => {
	files.map(x => console.log(x.filePath)
  )}
}>
{({ onClick }) =>
  <button onClick={onClick}>
	Upload Certificate...
  </button>
}
</UploadButton>

As you can see, it is not calling my API project. (There are other parts of the code which utilize it, but they are not being called in this particular workflow. My browser's Network tab in dev tools does not show any traffic being sent to my API project).

I should mention that my .NET project utilizes the AWS toolkit and many other libraries from Amazon Web Services (in case this makes a difference). I should also mention that the files themselves are being successfully saved to my Bytescale account.

Any suggestions or possible explanations? Could it possibly be a conflict between the AWS account that my Visual Studio project is attached to, and the AWS account that your upload widget uses?

Hello

I took react-uploader for a spin and works well so far for me, although I found a little issue with using it with my current application. Not much of a bug but would allow me to take full advantage of the library

Whenever an upload is going to be made, I've added the mime to be images ALONE as follows

mimeTypes: ["image/jpeg", "image/png", "image/jpg"]

But then, when user clicks on the upload button and the file directory opens up the user can select other file types before getting an error, compared to another library I tested, only allowed file types are available for selection. This feature would help in improving the user experience generally.

This is an example of when I try to upload with 'react-uploader' - the user is allowed to select even a doc file for image upload

The expected result should be this, with the file types not allowed disabled:

In Html, this could be done by:

<label>Image File
  <input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>

If there's an extra prop, or I'm missing something I'd be glad to check it out again. Thank you!

When I tried to upload the file i want to save into one of my local directory. I added the path into the options.
But when upload is clicked it shows some error like this

You must enable "Folder can be overridden by the uploader"