feat: added file-size-limit feature (#60)

* feat: added file-size-limit feature

* hotfix
This commit is contained in:
Toyin Muhammed
2023-11-30 18:10:20 +03:00
committed by GitHub
parent bb36cac4d4
commit 0081a6a910
@@ -33,6 +33,8 @@
}[] = []; }[] = [];
let fileInput: HTMLInputElement; let fileInput: HTMLInputElement;
let label = "Upload Image"
const onChange = (tabValue: string) => () => (currentTab = tabValue); const onChange = (tabValue: string) => () => (currentTab = tabValue);
async function handleImageClick(img: string) { async function handleImageClick(img: string) {
@@ -42,6 +44,12 @@
const onFileSelected = () => { const onFileSelected = () => {
const file = fileInput?.files?.[0]; const file = fileInput?.files?.[0];
const sizeInkb = file?.size! / 1024;
if (sizeInkb > 500){
snackbar.error("File Size must not be greater than 500kb")
label = "Try Again"
return;
}
if (file) { if (file) {
let reader = new FileReader(); let reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
@@ -109,7 +117,7 @@
disabled={isUploading} disabled={isUploading}
/> />
<PrimaryButton <PrimaryButton
label="Upload Image" label={label}
onClick={handleUpload} onClick={handleUpload}
isLoading={isUploading} isLoading={isUploading}
className="w-full font-semibold m-auto" className="w-full font-semibold m-auto"
@@ -117,7 +125,7 @@
<p class="text-center text-sm text-gray-500 my-2"> <p class="text-center text-sm text-gray-500 my-2">
Images wider than 1500 pixels work best. Images wider than 1500 pixels work best.
</p> </p>
<p class="text-center text-sm text-gray-500">The maximum size per file is 5 MB.</p> <p class="text-center text-sm text-gray-500">The maximum size per file is 500kb.</p>
</div> </div>
</TabContent> </TabContent>
<TabContent value={tabs[0].value} index={currentTab}> <TabContent value={tabs[0].value} index={currentTab}>