Skip to content
This repository was archived by the owner on Jan 11, 2024. It is now read-only.

Commit b47b12e

Browse files
cp-dharti-rcp-dharti-r
committed
Publish package with js
1 parent 3f78fe3 commit b47b12e

File tree

4 files changed

+497
-3
lines changed

4 files changed

+497
-3
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "@canopassoftware/react-file-upload",
3-
"version": "1.1.28",
3+
"version": "1.1.29",
44
"description": "Show the preview of file and manage files data to upload",
55
"private": false,
6-
"main": "/src/app/index.ts",
6+
"main": "/src/app/index.js",
77
"repository": {
88
"type": "git",
99
"url": "git+https://github.com/canopas/react-file-upload.git"
@@ -23,7 +23,7 @@
2323
"homepage": "https://github.com/canopas/react-file-upload#readme",
2424
"scripts": {
2525
"dev": "next dev",
26-
"build": "next build",
26+
"build": "tsc ./src/app/index.ts && next build",
2727
"start": "next start",
2828
"lint": "next lint",
2929
"build-css": "tailwindcss -i ./src/app/globals.css -o ./dist/css/output.css --minify && cp ./src/app/style.scss ./dist/css/style.scss"

‎src/app/components/multipleFileUpload.js‎

Lines changed: 319 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,319 @@
1+
"use client";
2+
"use strict";
3+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
4+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
5+
return new (P || (P = Promise))(function (resolve, reject) {
6+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
7+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
8+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
9+
step((generator = generator.apply(thisArg, _arguments || [])).next());
10+
});
11+
};
12+
var __generator = (this && this.__generator) || function (thisArg, body) {
13+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
14+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
15+
function verb(n) { return function (v) { return step([n, v]); }; }
16+
function step(op) {
17+
if (f) throw new TypeError("Generator is already executing.");
18+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
19+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
20+
if (y = 0, t) op = [op[0] & 2, t.value];
21+
switch (op[0]) {
22+
case 0: case 1: t = op; break;
23+
case 4: _.label++; return { value: op[1], done: false };
24+
case 5: _.label++; y = op[1]; op = [0]; continue;
25+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
26+
default:
27+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
28+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
29+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
30+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
31+
if (t[2]) _.ops.pop();
32+
_.trys.pop(); continue;
33+
}
34+
op = body.call(thisArg, _);
35+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
36+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
37+
}
38+
};
39+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
40+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
41+
if (ar || !(i in from)) {
42+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
43+
ar[i] = from[i];
44+
}
45+
}
46+
return to.concat(ar || Array.prototype.slice.call(from));
47+
};
48+
Object.defineProperty(exports, "__esModule", { value: true });
49+
var react_1 = require("react");
50+
var pdf_icon_png_1 = require("../../assets/images/pdf-icon.png");
51+
var text_icon_png_1 = require("../../assets/images/text-icon.png");
52+
var music_icon_png_1 = require("../../assets/images/music-icon.png");
53+
var apk_icon_png_1 = require("../../assets/images/apk-icon.png");
54+
var zip_icon_png_1 = require("../../assets/images/zip-icon.png");
55+
var sql_icon_png_1 = require("../../assets/images/sql-icon.png");
56+
var file_icon_png_1 = require("../../assets/images/file-icon.png");
57+
function MultipleFileUpload(_a) {
58+
var _this = this;
59+
var _b = _a.accept, accept = _b === void 0 ? "" : _b, _c = _a.uploadedFiles, uploadedFiles = _c === void 0 ? [] : _c, callback = _a.callback, _d = _a.removeBtnText, removeBtnText = _d === void 0 ? "x" : _d, _e = _a.uploadBtnText, uploadBtnText = _e === void 0 ? "Upload" : _e, _f = _a.progressBtnText, progressBtnText = _f === void 0 ? "Uploading..." : _f, _g = _a.pdfPreview, pdfPreview = _g === void 0 ? pdf_icon_png_1.default : _g, _h = _a.textPreview, textPreview = _h === void 0 ? text_icon_png_1.default : _h, _j = _a.audioPreview, audioPreview = _j === void 0 ? music_icon_png_1.default : _j, _k = _a.apkPreview, apkPreview = _k === void 0 ? apk_icon_png_1.default : _k, _l = _a.zipPreview, zipPreview = _l === void 0 ? zip_icon_png_1.default : _l, _m = _a.sqlPreview, sqlPreview = _m === void 0 ? sql_icon_png_1.default : _m, _o = _a.filePreview, filePreview = _o === void 0 ? file_icon_png_1.default : _o, children = _a.children;
60+
var defaultPreview = [];
61+
var defaultFiles = [];
62+
if (uploadedFiles) {
63+
for (var i = 0; i < uploadedFiles.length; i++) {
64+
var obj = {
65+
previewType: uploadedFiles[i].fileType,
66+
previewUrl: uploadedFiles[i].fileUrl,
67+
previewName: uploadedFiles[i].fileName,
68+
isDragging: false,
69+
};
70+
defaultPreview.push(obj);
71+
defaultFiles.push(uploadedFiles[i]);
72+
}
73+
}
74+
var _p = (0, react_1.useState)(defaultPreview), filesPreview = _p[0], setFilesPreview = _p[1];
75+
var _q = (0, react_1.useState)(false), isUploading = _q[0], setIsUploading = _q[1];
76+
var _r = (0, react_1.useState)(defaultFiles), files = _r[0], setFiles = _r[1];
77+
var inputRefs = (0, react_1.useRef)(new Array().fill(null));
78+
var selectFile = function (index) {
79+
var _a, _b;
80+
if (isUploading) {
81+
return;
82+
}
83+
if (inputRefs.current[index] && ((_a = inputRefs.current[index]) === null || _a === void 0 ? void 0 : _a.current)) {
84+
(_b = inputRefs.current[index]) === null || _b === void 0 ? void 0 : _b.current.click();
85+
}
86+
};
87+
var inputsRef = (0, react_1.useRef)(null);
88+
var selectFiles = function () {
89+
if (isUploading) {
90+
return;
91+
}
92+
if (inputsRef.current) {
93+
inputsRef.current.click();
94+
}
95+
};
96+
var add = function (previewType, previewUrl, previewName, isDragging, file) {
97+
// add file
98+
setFiles(function (files) {
99+
return __spreadArray(__spreadArray([], files, true), [file], false);
100+
});
101+
// add file preview
102+
setFilesPreview(function (filesPreview) {
103+
return __spreadArray(__spreadArray([], filesPreview, true), [
104+
{
105+
previewType: previewType,
106+
previewUrl: previewUrl,
107+
previewName: previewName,
108+
isDragging: isDragging,
109+
},
110+
], false);
111+
});
112+
};
113+
var update = function (previewType, previewUrl, previewName, isDragging, file, index) {
114+
// update file
115+
setFiles(function (files) {
116+
var newFiles = __spreadArray([], files, true);
117+
newFiles[index] = file;
118+
return newFiles;
119+
});
120+
// update file preview
121+
setFilesPreview(function (filesPreview) {
122+
var newFiles = __spreadArray([], filesPreview, true);
123+
newFiles[index].previewType = previewType;
124+
newFiles[index].previewUrl = previewUrl;
125+
newFiles[index].previewName = previewName;
126+
newFiles[index].isDragging = isDragging;
127+
return newFiles;
128+
});
129+
};
130+
var handleFileChange = function (event, index, action) {
131+
var files = event.target.files;
132+
for (var i = 0; i < files.length; i++) {
133+
try {
134+
previewFile(files[i], index + i, action);
135+
}
136+
catch (error) {
137+
console.error("error : ", error);
138+
}
139+
}
140+
};
141+
var previewFile = function (file, index, action) {
142+
var obj = {
143+
previewType: "image",
144+
previewUrl: "",
145+
previewName: file.name,
146+
isDragging: false,
147+
};
148+
var reader = new FileReader();
149+
reader.onload = function () {
150+
if (file.type.startsWith("image/")) {
151+
obj.previewUrl = reader.result;
152+
}
153+
else if (file.type === "text/plain") {
154+
obj.previewUrl = textPreview;
155+
}
156+
else if (file.type === "application/pdf") {
157+
obj.previewUrl = pdfPreview;
158+
}
159+
else if (file.type.startsWith("video/")) {
160+
obj.previewType = "video";
161+
obj.previewUrl = URL.createObjectURL(file);
162+
}
163+
else if (file.type.startsWith("audio/")) {
164+
obj.previewUrl = audioPreview;
165+
}
166+
else if (file.type === "application/vnd.android.package-archive") {
167+
obj.previewUrl = apkPreview;
168+
}
169+
else if (file.type === "application/zip") {
170+
obj.previewUrl = zipPreview;
171+
}
172+
else if (file.type === "application/sql") {
173+
obj.previewUrl = sqlPreview;
174+
}
175+
else {
176+
obj.previewUrl = filePreview;
177+
}
178+
obj.previewName = file.name;
179+
if (action == "reset") {
180+
update(obj.previewType, obj.previewUrl, obj.previewName, obj.isDragging, file, index);
181+
}
182+
else {
183+
add(obj.previewType, obj.previewUrl, obj.previewName, obj.isDragging, file);
184+
}
185+
};
186+
reader.onerror = function (error) {
187+
console.error("Error while reading file ".concat(file.name, ": ").concat(error));
188+
};
189+
reader.readAsDataURL(file);
190+
};
191+
var uploadingFunction = function () { return __awaiter(_this, void 0, void 0, function () {
192+
var gotFiles, _loop_1, i;
193+
return __generator(this, function (_a) {
194+
switch (_a.label) {
195+
case 0:
196+
if (isUploading) {
197+
return [2 /*return*/];
198+
}
199+
setIsUploading(true);
200+
return [4 /*yield*/, callback(files)];
201+
case 1:
202+
gotFiles = _a.sent();
203+
setFilesPreview([]);
204+
setFiles([]);
205+
if (gotFiles) {
206+
_loop_1 = function () {
207+
var obj = {
208+
previewType: gotFiles[i].fileType,
209+
previewUrl: gotFiles[i].fileUrl,
210+
previewName: gotFiles[i].fileName,
211+
isDragging: false,
212+
};
213+
setFilesPreview(function (filesPreview) {
214+
return __spreadArray(__spreadArray([], filesPreview, true), [obj], false);
215+
});
216+
var file = gotFiles[i];
217+
setFiles(function (files) {
218+
return __spreadArray(__spreadArray([], files, true), [file], false);
219+
});
220+
};
221+
for (i = 0; i < gotFiles.length; i++) {
222+
_loop_1();
223+
}
224+
}
225+
setIsUploading(false);
226+
return [2 /*return*/];
227+
}
228+
});
229+
}); };
230+
var handleDragOver = function (event, index, action) {
231+
if (isUploading) {
232+
return;
233+
}
234+
event.preventDefault();
235+
if (action == "reset") {
236+
filesPreview[index].isDragging = true;
237+
}
238+
};
239+
var handleDragLeave = function (event, index, action) {
240+
event.preventDefault();
241+
if (action == "reset") {
242+
filesPreview[index].isDragging = false;
243+
}
244+
};
245+
var handleDrop = function (event, index, action) {
246+
if (isUploading) {
247+
return;
248+
}
249+
event.preventDefault();
250+
if (action == "reset") {
251+
filesPreview[index].isDragging = false;
252+
}
253+
var files = event.dataTransfer.files;
254+
for (var i = 0; i < files.length; i++) {
255+
try {
256+
if (accept ? accept.split(", ").includes(files[i].type) : true) {
257+
previewFile(files[i], index + i, action);
258+
}
259+
}
260+
catch (error) {
261+
console.error("error : ", error);
262+
}
263+
}
264+
};
265+
var removeImg = function (index) {
266+
if (isUploading) {
267+
return;
268+
}
269+
// remove file
270+
setFiles(function (files) {
271+
var newFiles = __spreadArray([], files, true);
272+
newFiles.splice(index, 1);
273+
return newFiles;
274+
});
275+
// remove file preview
276+
setFilesPreview(function (filesPreview) {
277+
var newFiles = __spreadArray([], filesPreview, true);
278+
newFiles.splice(index, 1);
279+
return newFiles;
280+
});
281+
};
282+
return (<div className="flex flex-wrap">
283+
{filesPreview.map(function (item, index) { return (<div className="flex" key={index}>
284+
<div className="cursor-pointer" onClick={function () { return selectFile(index); }} onDragOver={function (event) { return handleDragOver(event, index, "reset"); }} onDragLeave={function (event) { return handleDragLeave(event, index, "reset"); }} onDrop={function (event) { return handleDrop(event, index, "reset"); }}>
285+
{children && children(item)}
286+
<input type="file" ref={function (element) {
287+
inputRefs.current[index] = element
288+
? { current: element }
289+
: null;
290+
}} className="hidden" onChange={function (event) { return handleFileChange(event, index, "reset"); }}/>
291+
</div>
292+
<button className="remove-btn bg-[#ccc] h-7 rounded-full dark:bg-stone-500 dark:text-white px-2.5" onClick={function () { return removeImg(index); }}>
293+
{removeBtnText}
294+
</button>
295+
</div>); })}
296+
<div className="flex">
297+
<div className="cursor-pointer" onClick={selectFiles} onDragOver={function (event) {
298+
return handleDragOver(event, filesPreview.length, "add");
299+
}} onDragLeave={function (event) {
300+
return handleDragLeave(event, filesPreview.length, "add");
301+
}} onDrop={function (event) { return handleDrop(event, filesPreview.length, "add"); }}>
302+
{children({})}
303+
<input type="file" ref={inputsRef} className="hidden" onChange={function (event) {
304+
return handleFileChange(event, filesPreview.length, "add");
305+
}} multiple/>
306+
</div>
307+
<div className={isUploading
308+
? "progress progress-striped active upload-btn relative"
309+
: "upload-btn relative"}>
310+
<button type="button" className={isUploading
311+
? "progress-bar cursor-wait flex items-center justify-center bg-slate-700 dark:text-slate-300 dark:bg-blue-700 text-white flex-none py-3 px-8 rounded-full bottom-0 absolute disabled:opacity-70 disabled:cursor-not-allowed"
312+
: "flex items-center justify-center bg-slate-700 dark:text-slate-300 dark:bg-blue-700 text-white flex-none py-3 px-8 rounded-full bottom-0 absolute disabled:opacity-70 disabled:cursor-not-allowed"} onClick={uploadingFunction} disabled={filesPreview.length > 0 ? false : true}>
313+
{isUploading ? progressBtnText : uploadBtnText}
314+
</button>
315+
</div>
316+
</div>
317+
</div>);
318+
}
319+
exports.default = MultipleFileUpload;

0 commit comments

Comments
 (0)