🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

reactstrap-react-lib

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

reactstrap-react-lib - npm Package Compare versions

Comparing version

to
4.1.0

@@ -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