reactstrap-react-lib
Advanced tools
@@ -7,2 +7,3 @@ import AlertP from "./lib/units/AlertP"; | ||
import FormDelete from "./lib/forms/FormDelete"; | ||
import ImageUpload from "./lib/forms/ImageUplaod"; | ||
import Table, { column } from "./lib/tables/"; | ||
@@ -17,2 +18,3 @@ import SectioPanel from "./lib/admin/SectionPanel"; | ||
export { FormDelete }; | ||
export { ImageUpload }; | ||
export { Sidebar, SectioPanel }; | ||
@@ -19,0 +21,0 @@ export { Table }; |
@@ -6,3 +6,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.TimeZone = exports.DateTime = exports.Table = exports.SectioPanel = exports.Sidebar = exports.FormDelete = exports.FormSubmit = exports.LinkP = exports.ModelP = exports.ButtonP = exports.AlertP = void 0; | ||
exports.TimeZone = exports.DateTime = exports.Table = exports.SectioPanel = exports.Sidebar = exports.ImageUpload = exports.FormDelete = exports.FormSubmit = exports.LinkP = exports.ModelP = exports.ButtonP = exports.AlertP = void 0; | ||
// main entry for libr | ||
@@ -21,2 +21,4 @@ const AlertP_1 = __importDefault(require("./lib/units/AlertP")); | ||
exports.FormDelete = FormDelete_1.default; | ||
const ImageUplaod_1 = __importDefault(require("./lib/forms/ImageUplaod")); | ||
exports.ImageUpload = ImageUplaod_1.default; | ||
const tables_1 = __importDefault(require("./lib/tables/")); | ||
@@ -23,0 +25,0 @@ exports.Table = tables_1.default; |
@@ -111,3 +111,2 @@ "use strict"; | ||
e.preventDefault(); | ||
// modRef.current?.show(); | ||
if (props.recpthaSetting) { | ||
@@ -114,0 +113,0 @@ //@ts-ignore |
import { ReactElement } from "react"; | ||
interface Props { | ||
accept: string; | ||
multiple: boolean | undefined; | ||
accept?: string; | ||
fileName: string; | ||
uri: string; | ||
} | ||
/** | ||
* | ||
*@props accept?: string; | ||
*@props fileName: string; | ||
*@props uri: string; | ||
*@returns ReactElement | ||
*/ | ||
export default function FormUpload(props: Props): ReactElement; | ||
export {}; | ||
//# sourceMappingURL=FormUpload.d.ts.map |
"use strict"; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { | ||
Object.defineProperty(o, "default", { enumerable: true, value: v }); | ||
}) : function(o, v) { | ||
o["default"] = v; | ||
}); | ||
var __importStar = (this && this.__importStar) || function (mod) { | ||
if (mod && mod.__esModule) return mod; | ||
var result = {}; | ||
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); | ||
__setModuleDefault(result, mod); | ||
return result; | ||
}; | ||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
}; | ||
var __importDefault = (this && this.__importDefault) || function (mod) { | ||
@@ -6,18 +34,80 @@ return (mod && mod.__esModule) ? mod : { "default": mod }; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
const react_1 = __importDefault(require("react")); | ||
const react_1 = __importStar(require("react")); | ||
const reactstrap_1 = require("reactstrap"); | ||
const index_1 = require("../../index"); | ||
const axios_1 = __importDefault(require("axios")); | ||
const AlertP_1 = __importDefault(require("../units/AlertP")); | ||
const ModelP_1 = __importDefault(require("../units/ModelP")); | ||
/** | ||
* | ||
*@props accept?: string; | ||
*@props fileName: string; | ||
*@props uri: string; | ||
*@returns ReactElement | ||
*/ | ||
function FormUpload(props) { | ||
const submitHandler = (e) => { | ||
e.preventDefault(); | ||
const [selectedFile, setSelectedFile] = react_1.useState(); | ||
const [previewSource, setPreviewSource] = react_1.useState(); | ||
const butRef = react_1.useRef(null); | ||
const modRef = react_1.useRef(null); | ||
const alerRef = react_1.useRef(null); | ||
const onChangeHandler = (e) => { | ||
setSelectedFile(e.target.files[0]); | ||
const fileReader = new FileReader(); | ||
fileReader.readAsDataURL(e.target.files[0]); | ||
fileReader.onloadend = () => { | ||
setPreviewSource(fileReader.result); | ||
}; | ||
}; | ||
const submitHandler = () => __awaiter(this, void 0, void 0, function* () { | ||
var _a, _b, _c, _d, _e, _f, _g; | ||
try { | ||
(_a = modRef.current) === null || _a === void 0 ? void 0 : _a.close(); | ||
(_b = butRef.current) === null || _b === void 0 ? void 0 : _b.showSpin(); | ||
(_c = alerRef.current) === null || _c === void 0 ? void 0 : _c.alertLight(); | ||
const formData = new FormData(); | ||
if (selectedFile != undefined) { | ||
formData.append("upload", selectedFile, props.fileName); | ||
let res = yield axios_1.default.post(props.uri, formData, { | ||
headers: { | ||
"Content-Type": "multipart/form-data", | ||
}, | ||
}); | ||
(_d = butRef.current) === null || _d === void 0 ? void 0 : _d.hideSpin(); | ||
(_e = alerRef.current) === null || _e === void 0 ? void 0 : _e.alertSuccess("Uploaded file"); | ||
} | ||
else { | ||
throw (new Error().message = "File can not be null"); | ||
} | ||
} | ||
catch (error) { | ||
console.log(error); | ||
(_f = alerRef.current) === null || _f === void 0 ? void 0 : _f.alertError("Error Occured"); | ||
(_g = butRef.current) === null || _g === void 0 ? void 0 : _g.hideSpin(); | ||
} | ||
}); | ||
return (react_1.default.createElement(react_1.default.Fragment, null, | ||
react_1.default.createElement(reactstrap_1.Form, { onSubmit: (e) => submitHandler(e) }, | ||
react_1.default.createElement(reactstrap_1.FormGroup, null, | ||
react_1.default.createElement(reactstrap_1.Label, null, "Upload"), | ||
react_1.default.createElement(reactstrap_1.Input, { type: "file", accept: props.accept, multiple: props.multiple })), | ||
react_1.default.createElement(reactstrap_1.FormGroup, null, | ||
react_1.default.createElement(index_1.ButtonP, { disabled: false, text: "Upload" }))))); | ||
react_1.default.createElement(reactstrap_1.Row, null, | ||
react_1.default.createElement(reactstrap_1.Col, null, | ||
react_1.default.createElement(ModelP_1.default, { ref: modRef, Ok: () => __awaiter(this, void 0, void 0, function* () { | ||
var _h; | ||
(_h = modRef.current) === null || _h === void 0 ? void 0 : _h.close(); | ||
yield submitHandler(); | ||
}), modelTitle: "Do you want to Upload file ?", modelText: "Press Ok to upload, Press cancel to exit" }), | ||
react_1.default.createElement(reactstrap_1.Form, { onSubmit: (e) => { | ||
var _a; | ||
e.preventDefault(); | ||
(_a = modRef.current) === null || _a === void 0 ? void 0 : _a.show(); | ||
} }, | ||
react_1.default.createElement(reactstrap_1.FormGroup, null, | ||
react_1.default.createElement(reactstrap_1.Label, null, "Upload"), | ||
react_1.default.createElement(reactstrap_1.Input, { type: "file", accept: props.accept, multiple: false, onChange: (e) => { | ||
onChangeHandler(e); | ||
} })), | ||
react_1.default.createElement(reactstrap_1.FormGroup, null, | ||
react_1.default.createElement(index_1.ButtonP, { disabled: false, text: "Upload" })), | ||
react_1.default.createElement(AlertP_1.default, { ref: alerRef })), | ||
previewSource && react_1.default.createElement("img", { src: previewSource, height: "100rem" }))))); | ||
} | ||
exports.default = FormUpload; | ||
//# sourceMappingURL=FormUpload.js.map |
{ | ||
"name": "reactstrap-react-lib", | ||
"version": "4.0.1", | ||
"version": "4.1.0", | ||
"description": "This is a lib for react and next", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -15,2 +15,3 @@ # reactstrap-react-lib | ||
5. TimeZone | ||
6. ImageUpload | ||
@@ -440,1 +441,67 @@ ## React-Table | ||
``` | ||
# Image Upload | ||
```javascript | ||
// front end code | ||
import React from 'react' | ||
import { ImageUpload } from "reactstrap-react-lib" | ||
export default function FormUploadCompent() { | ||
return ( | ||
<ImageUpload | ||
uri="/api/image-upload" | ||
fileName="image" | ||
onSuccess= {(res)=>{ | ||
return res.data.mes | ||
}} | ||
onError={(err)=>{ | ||
console.log( err.response.data) | ||
return err.response.data | ||
}} | ||
/> | ||
) | ||
} | ||
// backennd next js rout with cloudanary | ||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction | ||
const cloudanry = require("cloudinary").v2 | ||
export default async(req, res) => { | ||
try { | ||
const data = req.body.data | ||
cloudanry.config({ | ||
"api_key": process.env.api_key, | ||
"api_secret": process.env.api_secret, | ||
"cloud_name": process.env.cloud_name, | ||
}) | ||
let curRes = await cloudanry.uploader.upload(data, { | ||
"public_id": "org1_letter_pad", | ||
"overwrite": true | ||
}) | ||
console.log(curRes) | ||
res.status(200).json ({mes: "uploaded file"}) | ||
} catch (error) { | ||
console.log(error) | ||
res.status(500).send(error) | ||
} | ||
} | ||
``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
198549
9.79%111
3.74%2660
9.29%506
15.26%