bytescale / bytescale-upload-widget-react Goto Github PK
View Code? Open in Web Editor NEWBeautiful File Upload Component | Developed for React by Bytescale
Home Page: https://www.bytescale.com/docs/upload-widget/react
License: MIT License
Beautiful File Upload Component | Developed for React by Bytescale
Home Page: https://www.bytescale.com/docs/upload-widget/react
License: MIT License
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.
render
or parameterized children
propsI 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"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.