datasync-blob 1.1.25 → 1.1.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -5
- package/dist/components/DsBlob.js +0 -623
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "datasync-blob",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.27",
|
|
4
4
|
"description": "Datasync Blob component",
|
|
5
5
|
"main": "./dist/components/DsBlob.js",
|
|
6
6
|
"files": [
|
|
@@ -42,8 +42,5 @@
|
|
|
42
42
|
},
|
|
43
43
|
"keywords": [],
|
|
44
44
|
"author": "",
|
|
45
|
-
"license": "ISC"
|
|
46
|
-
"dependencies": {
|
|
47
|
-
"react-toastify": "^11.1.0"
|
|
48
|
-
}
|
|
45
|
+
"license": "ISC"
|
|
49
46
|
}
|
|
@@ -1,623 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.DsBlob = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _reactToastify = require("react-toastify");
|
|
10
|
-
require("react-toastify/dist/ReactToastify.css");
|
|
11
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
|
-
class DsBlob extends _react.Component {
|
|
14
|
-
constructor(props) {
|
|
15
|
-
super(props);
|
|
16
|
-
this.state = {
|
|
17
|
-
hover_input: false,
|
|
18
|
-
hover_image: false,
|
|
19
|
-
data: props.data || "",
|
|
20
|
-
binaryData: props.binaryData || null
|
|
21
|
-
};
|
|
22
|
-
this.debugging = false;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
//-----------------------------------------
|
|
26
|
-
/**
|
|
27
|
-
* PROTOTYPE : uploadToDatasyncCloud
|
|
28
|
-
* Purpose : Upload binary data to My Custom Cloud server using Datasync SncPushCloud endpoint and return the accessible URL for the uploaded file.
|
|
29
|
-
* @param base64Data
|
|
30
|
-
* @param fileName
|
|
31
|
-
*/
|
|
32
|
-
uploadToDatasyncCloud = async pictureBlob => {
|
|
33
|
-
try {
|
|
34
|
-
const formData = new FormData();
|
|
35
|
-
let cloud_filename = pictureBlob.cloud_url_prefix.split('/').pop(); // Extract filename from cloud_url_prefix
|
|
36
|
-
|
|
37
|
-
console.log("Uploading to Datasync Cloud with filename:", cloud_filename);
|
|
38
|
-
formData.append('action', "syncPushCloud");
|
|
39
|
-
//formData.append('filename', `${CGUID()}.jpg`);
|
|
40
|
-
formData.append('filename', cloud_filename); // Extract filename from cloud_url_prefix
|
|
41
|
-
|
|
42
|
-
// Convert blob URL to actual binary data
|
|
43
|
-
let binaryString;
|
|
44
|
-
if (pictureBlob.isBlobUrl && pictureBlob.data.startsWith('blob:')) {
|
|
45
|
-
// Fetch the blob URL to get actual file content
|
|
46
|
-
console.log('Fetching blob URL:', pictureBlob.data);
|
|
47
|
-
const blobResponse = await fetch(pictureBlob.data);
|
|
48
|
-
const blob = await blobResponse.blob();
|
|
49
|
-
|
|
50
|
-
// Convert blob to ArrayBuffer then to Uint8Array
|
|
51
|
-
const arrayBuffer = await blob.arrayBuffer(); // Raw binary JPEG data
|
|
52
|
-
const uint8Array = new Uint8Array(arrayBuffer); // ← THIS CONTAINS THE GENUINE JPEG FILE BINARY DATA
|
|
53
|
-
|
|
54
|
-
// Convert to base64 string for transmission (chunked to avoid stack overflow)
|
|
55
|
-
let binaryStr = '';
|
|
56
|
-
const chunkSize = 8192; // Process in 8KB chunks to avoid stack overflow
|
|
57
|
-
for (let i = 0; i < uint8Array.length; i += chunkSize) {
|
|
58
|
-
const chunk = uint8Array.slice(i, i + chunkSize);
|
|
59
|
-
binaryStr += String.fromCharCode(...chunk);
|
|
60
|
-
}
|
|
61
|
-
binaryString = btoa(binaryStr); // ← THIS CONTAINS THE GENUINE JPEG FILE AS BASE64 STRING
|
|
62
|
-
|
|
63
|
-
console.log('Converted blob URL to binary data, size:', uint8Array.length);
|
|
64
|
-
} else if (Array.isArray(pictureBlob.binaryData)) {
|
|
65
|
-
// Convert Uint8Array or regular array to base64 string
|
|
66
|
-
const uint8Array = new Uint8Array(pictureBlob.binaryData);
|
|
67
|
-
let binaryStr = '';
|
|
68
|
-
const chunkSize = 8192;
|
|
69
|
-
for (let i = 0; i < uint8Array.length; i += chunkSize) {
|
|
70
|
-
const chunk = uint8Array.slice(i, i + chunkSize);
|
|
71
|
-
binaryStr += String.fromCharCode(...chunk);
|
|
72
|
-
}
|
|
73
|
-
binaryString = btoa(binaryStr);
|
|
74
|
-
} else if (pictureBlob.binaryData instanceof Uint8Array) {
|
|
75
|
-
// Already a Uint8Array, convert to base64
|
|
76
|
-
let binaryStr = '';
|
|
77
|
-
const chunkSize = 8192;
|
|
78
|
-
for (let i = 0; i < pictureBlob.binaryData.length; i += chunkSize) {
|
|
79
|
-
const chunk = pictureBlob.binaryData.slice(i, i + chunkSize);
|
|
80
|
-
binaryStr += String.fromCharCode(...chunk);
|
|
81
|
-
}
|
|
82
|
-
binaryString = btoa(binaryStr);
|
|
83
|
-
} else {
|
|
84
|
-
// Assume it's already a string
|
|
85
|
-
binaryString = pictureBlob.binaryData || "";
|
|
86
|
-
}
|
|
87
|
-
formData.append('binary', binaryString);
|
|
88
|
-
console.log("binaryString ->", binaryString.substring(0, 100) + '...'); // Log the beginning of the base64 string for debugging
|
|
89
|
-
|
|
90
|
-
const results = await fetch('http://localhost:8888/datasync-service/Sync.php', {
|
|
91
|
-
method: 'POST',
|
|
92
|
-
body: formData
|
|
93
|
-
});
|
|
94
|
-
if (!results.ok) {
|
|
95
|
-
throw new Error(`HTTP error! status: ${response.statusText}`);
|
|
96
|
-
}
|
|
97
|
-
let sync_push_cloud_response = await results.json();
|
|
98
|
-
|
|
99
|
-
// Try to parse as JSON
|
|
100
|
-
try {
|
|
101
|
-
if (!sync_push_cloud_response.state) throw new Error(`syncPushCloud returned error: ${sync_push_cloud_response.message}`);else console.log('syncPushCloud upload response:', sync_push_cloud_response.message);
|
|
102
|
-
return true; // Return true on successful upload
|
|
103
|
-
} catch (parseError) {
|
|
104
|
-
console.error('syncPushCloud : JSON parse error:', parseError);
|
|
105
|
-
throw new Error(`syncPushCloud raised error: ${parseError}`);
|
|
106
|
-
}
|
|
107
|
-
} catch (error) {
|
|
108
|
-
if (true) {
|
|
109
|
-
console.error('syncPushCloud upload error details:', error);
|
|
110
|
-
}
|
|
111
|
-
throw error;
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
setPicture = data => {
|
|
115
|
-
console.log("setPicture => Fake procedure canbe deleted !");
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
//-----------------------------------------
|
|
119
|
-
convert_blob_picture_into_cloud_file = async pictureBlob => {
|
|
120
|
-
try {
|
|
121
|
-
console.log("Received pictureBlob in uploadPicture:cloud_url_prefix -> ", pictureBlob.cloud_url_prefix);
|
|
122
|
-
if (!pictureBlob || !pictureBlob.data) {
|
|
123
|
-
//Reset picture
|
|
124
|
-
this.setPicture("");
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
if (pictureBlob.isBlobUrl && pictureBlob.data.startsWith('blob:') && pictureBlob.cloud_url_prefix) {
|
|
128
|
-
let updloadSucces = await this.uploadToDatasyncCloud(pictureBlob); // Upload the image to custom Datasync cloud
|
|
129
|
-
if (updloadSucces) {
|
|
130
|
-
//Clear the data URL to free memory since the image is now uploaded and accessible via cloud URL
|
|
131
|
-
if (pictureBlob.data && pictureBlob.data.startsWith('blob:')) {
|
|
132
|
-
URL.revokeObjectURL(pictureBlob.data);
|
|
133
|
-
}
|
|
134
|
-
this.setPicture(pictureBlob.cloud_url_prefix); //Display the image using the cloud URL only if upload succeeded
|
|
135
|
-
_reactToastify.toast.success("Image uploadée");
|
|
136
|
-
console.log("pictureBlob->", pictureBlob);
|
|
137
|
-
|
|
138
|
-
//inform parent component of the new cloud URL for the uploaded image
|
|
139
|
-
this.props.uploadPicture({
|
|
140
|
-
data: pictureBlob.cloud_url_prefix
|
|
141
|
-
});
|
|
142
|
-
} else {
|
|
143
|
-
console.error("Upload to Datasync cloud failed - no success response received");
|
|
144
|
-
throw new Error("Upload to Datasync cloud failed - no success response received");
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
} catch (error) {
|
|
148
|
-
_reactToastify.toast.error("Erreur lors du téléchargement de l'image");
|
|
149
|
-
console.error("Upload error:", error);
|
|
150
|
-
}
|
|
151
|
-
};
|
|
152
|
-
|
|
153
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
154
|
-
reduceBase64Image = e => {
|
|
155
|
-
let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
|
|
156
|
-
|
|
157
|
-
if (this.debugging) console.log("imageSource = ", imageSource);
|
|
158
|
-
var canvas = document.createElement('canvas'),
|
|
159
|
-
context,
|
|
160
|
-
width = imageSource.width,
|
|
161
|
-
height = imageSource.height;
|
|
162
|
-
|
|
163
|
-
//Exact size props are set
|
|
164
|
-
if (this.props.width && this.props.height) {
|
|
165
|
-
//Check image size
|
|
166
|
-
if (width > this.props.width || height > this.props.height) {
|
|
167
|
-
alert("L'image est trop grande, le format requis est " + this.props.width + "x" + this.props.height);
|
|
168
|
-
return;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
//Check image size
|
|
172
|
-
if (width < this.props.width || height < this.props.height) {
|
|
173
|
-
alert("L'image est trop petite, le format requis est " + this.props.width + "x" + this.props.height);
|
|
174
|
-
return;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
//Max size props are set
|
|
179
|
-
if (this.props.maxWidth && this.props.maxHeight) {
|
|
180
|
-
if (width > height) {
|
|
181
|
-
//Check resize is enabled
|
|
182
|
-
if (!this.props.reduceImage) {
|
|
183
|
-
alert("L'image est trop large ! la largeur maximale est de " + this.props.maxWidth);
|
|
184
|
-
return;
|
|
185
|
-
}
|
|
186
|
-
if (width > this.props.maxWidth) {
|
|
187
|
-
height *= this.props.maxWidth / width;
|
|
188
|
-
width = this.props.maxWidth;
|
|
189
|
-
}
|
|
190
|
-
} else {
|
|
191
|
-
if (height > this.props.maxHeight) {
|
|
192
|
-
//Check resize is enabled
|
|
193
|
-
if (!this.props.reduceImage) {
|
|
194
|
-
alert("L'image est trop haute, la hauteur maximale est de " + this.props.maxHeight);
|
|
195
|
-
return;
|
|
196
|
-
}
|
|
197
|
-
width *= this.props.maxHeight / height;
|
|
198
|
-
height = this.props.maxHeight;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
//Build 2d picture
|
|
204
|
-
canvas.width = width;
|
|
205
|
-
canvas.height = height;
|
|
206
|
-
context = canvas.getContext('2d');
|
|
207
|
-
context.drawImage(imageSource, 0, 0, width, height);
|
|
208
|
-
|
|
209
|
-
//Jpeg conversion
|
|
210
|
-
let jpegCompressionRatio = this.props.jpegQuality && this.props.jpegQuality > 0 && this.props.jpegQuality < 1 ? this.props.jpegQuality : 1;
|
|
211
|
-
let canvasData = canvas.toDataURL('image/jpg', jpegCompressionRatio); //Jpeg conversion
|
|
212
|
-
|
|
213
|
-
if (this.debugging) console.log("jpegCompressionRatio->", jpegCompressionRatio, " canvasData.length = ", canvasData.length);
|
|
214
|
-
const processedData = this.props.removebase64 ? canvasData ? canvasData.substring("data:image/png;base64".length) : "" : canvasData ? canvasData : "";
|
|
215
|
-
this.setData(processedData);
|
|
216
|
-
if (this.props.removebase64) {
|
|
217
|
-
//remove base64 prefix if property is set
|
|
218
|
-
this.props.uploadPicture({
|
|
219
|
-
data: processedData
|
|
220
|
-
});
|
|
221
|
-
} else {
|
|
222
|
-
//Keep base 64 prefix as it is
|
|
223
|
-
this.props.uploadPicture({
|
|
224
|
-
data: processedData
|
|
225
|
-
});
|
|
226
|
-
}
|
|
227
|
-
};
|
|
228
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
229
|
-
reduceBinaryImage = e => {
|
|
230
|
-
let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
|
|
231
|
-
|
|
232
|
-
if (this.debugging) console.log("imageSource = ", imageSource);
|
|
233
|
-
var canvas = document.createElement('canvas'),
|
|
234
|
-
context,
|
|
235
|
-
width = imageSource.width,
|
|
236
|
-
height = imageSource.height;
|
|
237
|
-
|
|
238
|
-
//Exact size props are set
|
|
239
|
-
if (this.props.width && this.props.height) {
|
|
240
|
-
//Check image size
|
|
241
|
-
if (width > this.props.width || height > this.props.height) {
|
|
242
|
-
alert("L'image est trop grande, le format requis est " + this.props.width + "x" + this.props.height);
|
|
243
|
-
return;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
//Check image size
|
|
247
|
-
if (width < this.props.width || height < this.props.height) {
|
|
248
|
-
alert("L'image est trop petite, le format requis est " + this.props.width + "x" + this.props.height);
|
|
249
|
-
return;
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
//Max size props are set
|
|
254
|
-
if (this.props.maxWidth && this.props.maxHeight) {
|
|
255
|
-
if (width > height) {
|
|
256
|
-
//Check resize is enabled
|
|
257
|
-
if (!this.props.reduceImage) {
|
|
258
|
-
alert("L'image est trop large ! la largeur maximale est de " + this.props.maxWidth);
|
|
259
|
-
return;
|
|
260
|
-
}
|
|
261
|
-
if (width > this.props.maxWidth) {
|
|
262
|
-
height *= this.props.maxWidth / width;
|
|
263
|
-
width = this.props.maxWidth;
|
|
264
|
-
}
|
|
265
|
-
} else {
|
|
266
|
-
if (height > this.props.maxHeight) {
|
|
267
|
-
//Check resize is enabled
|
|
268
|
-
if (!this.props.reduceImage) {
|
|
269
|
-
alert("L'image est trop haute, la hauteur maximale est de " + this.props.maxHeight);
|
|
270
|
-
return;
|
|
271
|
-
}
|
|
272
|
-
width *= this.props.maxHeight / height;
|
|
273
|
-
height = this.props.maxHeight;
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
//Build 2d picture
|
|
279
|
-
canvas.width = width;
|
|
280
|
-
canvas.height = height;
|
|
281
|
-
context = canvas.getContext('2d');
|
|
282
|
-
context.drawImage(imageSource, 0, 0, width, height);
|
|
283
|
-
|
|
284
|
-
//Binary conversion using toBlob to maintain binary output
|
|
285
|
-
let jpegCompressionRatio = this.props.jpegQuality && this.props.jpegQuality > 0 && this.props.jpegQuality < 1 ? this.props.jpegQuality : 1;
|
|
286
|
-
canvas.toBlob(async blob => {
|
|
287
|
-
if (blob) {
|
|
288
|
-
console.log("Binary blob created, size:", blob.size);
|
|
289
|
-
if (this.debugging) console.log("jpegCompressionRatio->", jpegCompressionRatio, " blob.size = ", blob.size);
|
|
290
|
-
|
|
291
|
-
// Fallback: use blob URL for display but keep binary data
|
|
292
|
-
const blobUrl = URL.createObjectURL(blob);
|
|
293
|
-
|
|
294
|
-
// Convert blob to ArrayBuffer to maintain genuine binary data
|
|
295
|
-
const reader = new FileReader();
|
|
296
|
-
reader.onload = () => {
|
|
297
|
-
const binaryData = reader.result; // ArrayBuffer - genuine binary data
|
|
298
|
-
console.log("Fallback: Using binary data, size:", binaryData.byteLength);
|
|
299
|
-
|
|
300
|
-
// Store both display URL and binary data
|
|
301
|
-
this.setData(blobUrl, binaryData);
|
|
302
|
-
this.props.uploadPicture({
|
|
303
|
-
data: this.props.cloud_url_prefix,
|
|
304
|
-
// Pass the cloud URL for display
|
|
305
|
-
binaryData: null,
|
|
306
|
-
// Clear binary data since we now have a cloud URL
|
|
307
|
-
cloud_url_prefix: this.props.cloud_url_prefix,
|
|
308
|
-
// Pass cloud URL prefix if needed for parent component
|
|
309
|
-
isBlobUrl: false // The final URL is not a blob URL, it's a cloud URL
|
|
310
|
-
});
|
|
311
|
-
|
|
312
|
-
//Call the upload callback with both blob URL for display and binary data for upload
|
|
313
|
-
this.convert_blob_picture_into_cloud_file({
|
|
314
|
-
data: blobUrl,
|
|
315
|
-
// For display in img tag
|
|
316
|
-
binaryData: binaryData,
|
|
317
|
-
// Genuine JPEG binary stream
|
|
318
|
-
cloud_url_prefix: this.props.cloud_url_prefix,
|
|
319
|
-
// Pass cloud URL prefix if needed for parent component
|
|
320
|
-
isBlobUrl: true // Flag to track blob URLs for cleanup
|
|
321
|
-
});
|
|
322
|
-
};
|
|
323
|
-
reader.readAsArrayBuffer(blob);
|
|
324
|
-
} else {
|
|
325
|
-
console.error("Failed to create blob from canvas");
|
|
326
|
-
}
|
|
327
|
-
}, 'image/jpeg', jpegCompressionRatio);
|
|
328
|
-
};
|
|
329
|
-
|
|
330
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
331
|
-
storeBase64ImageToImg = e => {
|
|
332
|
-
var image = document.createElement('img');
|
|
333
|
-
image.onload = this.reduceBase64Image;
|
|
334
|
-
console.log("storeBase64ImageToImg:e.currentTarget.result = ", e.currentTarget.result);
|
|
335
|
-
image.src = e.currentTarget.result;
|
|
336
|
-
};
|
|
337
|
-
|
|
338
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
339
|
-
storeBinaryImageToImg = e => {
|
|
340
|
-
var image = document.createElement('img');
|
|
341
|
-
//2Do DEBUG image.onload = this.reduceImage;
|
|
342
|
-
console.log("storeBinaryImageToImg:e.currentTarget.result = ", e.currentTarget.result);
|
|
343
|
-
// Convert ArrayBuffer to Blob URL since image.src cannot accept ArrayBuffer directly
|
|
344
|
-
// Use the detected image type from the original file
|
|
345
|
-
const imageType = this.currentImageType || 'image/jpeg'; // fallback to jpeg
|
|
346
|
-
const blob = new Blob([e.currentTarget.result], {
|
|
347
|
-
type: imageType
|
|
348
|
-
});
|
|
349
|
-
const blobUrl = URL.createObjectURL(blob);
|
|
350
|
-
image.src = blobUrl;
|
|
351
|
-
|
|
352
|
-
// Clean up blob URL after image loads to prevent memory leaks
|
|
353
|
-
image.onload = loadEvent => {
|
|
354
|
-
this.reduceBinaryImage(loadEvent);
|
|
355
|
-
URL.revokeObjectURL(blobUrl);
|
|
356
|
-
// Clear the stored image type
|
|
357
|
-
this.currentImageType = null;
|
|
358
|
-
};
|
|
359
|
-
};
|
|
360
|
-
|
|
361
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
362
|
-
readImageAsBase64 = async aPictureFile => {
|
|
363
|
-
let _reader = new FileReader();
|
|
364
|
-
console.log("readImageAsBase64:aPictureFile = ", aPictureFile);
|
|
365
|
-
_reader.onload = this.storeBase64ImageToImg;
|
|
366
|
-
_reader.readAsDataURL(aPictureFile); //The readAsDataURL() method of the FileReader interface is used to read the contents of the specified file's data as a base64 encoded string.
|
|
367
|
-
};
|
|
368
|
-
|
|
369
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
370
|
-
readImageAsBinary = async aPictureFile => {
|
|
371
|
-
let _reader = new FileReader();
|
|
372
|
-
console.log("readImageAsBinary:aPictureFile = ", aPictureFile);
|
|
373
|
-
|
|
374
|
-
// Store the image type for use in storeBinaryImageToImg
|
|
375
|
-
this.currentImageType = aPictureFile.type;
|
|
376
|
-
console.log("Detected image type:", this.currentImageType);
|
|
377
|
-
_reader.onload = this.storeBinaryImageToImg;
|
|
378
|
-
_reader.readAsArrayBuffer(aPictureFile); //The readAsArrayBuffer() method reads the file as genuine binary content without base64 conversion.
|
|
379
|
-
};
|
|
380
|
-
|
|
381
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
382
|
-
resetUpload = () => {
|
|
383
|
-
// Clean up any blob URLs before resetting
|
|
384
|
-
this.cleanupBlobUrl();
|
|
385
|
-
this.setData("", null);
|
|
386
|
-
this.props.uploadPicture({
|
|
387
|
-
data: "",
|
|
388
|
-
cloud_url_prefix: this.props.cloud_url_prefix,
|
|
389
|
-
isBlobUrl: false
|
|
390
|
-
});
|
|
391
|
-
//this.props.uploadPicture({data:"",cloud_url_prefix:this.props.cloud_url_prefix, isBlobUrl:true});
|
|
392
|
-
};
|
|
393
|
-
|
|
394
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
395
|
-
cleanupBlobUrl = () => {
|
|
396
|
-
// Only show alert if not in test environment
|
|
397
|
-
if (typeof jest === 'undefined') {
|
|
398
|
-
console.log("cleanupBlobUrl !");
|
|
399
|
-
}
|
|
400
|
-
// Revoke blob URL if it exists to prevent memory leaks
|
|
401
|
-
if (this.state.data && this.state.data.startsWith('blob:')) {
|
|
402
|
-
URL.revokeObjectURL(this.state.data);
|
|
403
|
-
console.log("Blob URL cleaned up:", this.state.data);
|
|
404
|
-
}
|
|
405
|
-
};
|
|
406
|
-
|
|
407
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
408
|
-
componentDidUpdate(prevProps) {
|
|
409
|
-
// Sync state with prop changes from parent
|
|
410
|
-
if (prevProps.data !== this.props.data) {
|
|
411
|
-
this.setState({
|
|
412
|
-
data: this.props.data || ""
|
|
413
|
-
});
|
|
414
|
-
}
|
|
415
|
-
if (prevProps.binaryData !== this.props.binaryData) {
|
|
416
|
-
this.setState({
|
|
417
|
-
binaryData: this.props.binaryData || null
|
|
418
|
-
});
|
|
419
|
-
}
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
423
|
-
componentWillUnmount() {
|
|
424
|
-
// Cleanup blob URLs when component unmounts
|
|
425
|
-
this.cleanupBlobUrl();
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
429
|
-
onInputChange = e => {
|
|
430
|
-
const errs = [];
|
|
431
|
-
const files = Array.from(e.target.files);
|
|
432
|
-
const types = ['image/png', 'image/jpeg', 'image/gif'];
|
|
433
|
-
const _1Mo = 1024 * 1024;
|
|
434
|
-
const SizeLimit = 9;
|
|
435
|
-
|
|
436
|
-
//Reset input cache value - to assure trigger if user select the same file again
|
|
437
|
-
e.target.value = null;
|
|
438
|
-
if (this.debugging) console.log("onInputChange");
|
|
439
|
-
if (files.length > 1) {
|
|
440
|
-
const msg = 'Pas plus d\'une image à la fois';
|
|
441
|
-
alert(msg);
|
|
442
|
-
return;
|
|
443
|
-
}
|
|
444
|
-
files.forEach((file, i) => {
|
|
445
|
-
let errCount = errs.length;
|
|
446
|
-
if (types.every(type => file.type !== type)) {
|
|
447
|
-
errs.push(`'${file.type}' : format non supporté`);
|
|
448
|
-
}
|
|
449
|
-
if (file.size > SizeLimit * _1Mo) {
|
|
450
|
-
errs.push(`'${file.name}' image trop volumineuse (max:${SizeLimit}Méga-octets)`);
|
|
451
|
-
}
|
|
452
|
-
if (this.debugging) console.log(`errCount = ${errCount} vs errs.length = ${errs.length}`);
|
|
453
|
-
if (errCount == errs.length) {
|
|
454
|
-
//None new error occurs
|
|
455
|
-
if (this.debugging) console.log("readImageAsBase64::", file.name);
|
|
456
|
-
if (this.props.cloud_storage) {
|
|
457
|
-
this.readImageAsBinary(file);
|
|
458
|
-
} else {
|
|
459
|
-
this.readImageAsBase64(file);
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
});
|
|
463
|
-
if (errs.length) {
|
|
464
|
-
return errs.forEach(err => alert(err));
|
|
465
|
-
}
|
|
466
|
-
};
|
|
467
|
-
|
|
468
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
469
|
-
getImageSrc = () => {
|
|
470
|
-
if (!this.state.data) return "";
|
|
471
|
-
|
|
472
|
-
// Check if it's already a complete URL (cloud storage URL or blob URL)
|
|
473
|
-
if (this.state.data.startsWith('http://') || this.state.data.startsWith('https://') || this.state.data.startsWith('blob:')) {
|
|
474
|
-
return this.state.data;
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
// Check if it's already a data URL (base64)
|
|
478
|
-
if (this.state.data.startsWith('data:')) {
|
|
479
|
-
return this.state.data;
|
|
480
|
-
}
|
|
481
|
-
|
|
482
|
-
// Otherwise, treat as base64 and add appropriate prefix
|
|
483
|
-
const prefix = this.props.removebase64 ? "data:image/png;base64," : "";
|
|
484
|
-
return prefix + this.state.data;
|
|
485
|
-
};
|
|
486
|
-
|
|
487
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
488
|
-
getBinaryData = () => {
|
|
489
|
-
// Return the genuine JPEG binary stream (ArrayBuffer)
|
|
490
|
-
// This can be used by parent components for uploading or processing
|
|
491
|
-
return this.state.binaryData || this.props.binaryData || null;
|
|
492
|
-
};
|
|
493
|
-
|
|
494
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
495
|
-
// Data getter and setter methods for read-write access
|
|
496
|
-
getData = () => {
|
|
497
|
-
return this.state.data;
|
|
498
|
-
};
|
|
499
|
-
setData = (data, binaryData = null) => {
|
|
500
|
-
this.setState({
|
|
501
|
-
data: data || "",
|
|
502
|
-
binaryData: binaryData
|
|
503
|
-
});
|
|
504
|
-
};
|
|
505
|
-
|
|
506
|
-
//-----------------------------------------------------------------------------------------------------------------------------------------
|
|
507
|
-
getImageType = () => {
|
|
508
|
-
// Return the type of image data being used
|
|
509
|
-
if (this.props.isCloudUrl) return 'cloud';
|
|
510
|
-
if (this.props.isBlobUrl) return 'blob';
|
|
511
|
-
if (this.state.data && this.state.data.startsWith('data:')) return 'base64';
|
|
512
|
-
return 'unknown';
|
|
513
|
-
};
|
|
514
|
-
render() {
|
|
515
|
-
const upload_picture_label = {
|
|
516
|
-
cursor: "pointer"
|
|
517
|
-
};
|
|
518
|
-
const upload_picture_label_input = {
|
|
519
|
-
opacity: "0",
|
|
520
|
-
width: "0px",
|
|
521
|
-
height: "0px"
|
|
522
|
-
};
|
|
523
|
-
const div_show_image_hover = {
|
|
524
|
-
position: "relative",
|
|
525
|
-
margin: "0px",
|
|
526
|
-
opacity: "0.5"
|
|
527
|
-
};
|
|
528
|
-
const div_show_image = {
|
|
529
|
-
position: "relative",
|
|
530
|
-
margin: "0px"
|
|
531
|
-
};
|
|
532
|
-
const div_show_image_hover_input = {
|
|
533
|
-
display: "block",
|
|
534
|
-
top: "0px",
|
|
535
|
-
left: "0px",
|
|
536
|
-
position: "absolute"
|
|
537
|
-
};
|
|
538
|
-
const div_show_image_input = {
|
|
539
|
-
position: "absolute",
|
|
540
|
-
display: "none",
|
|
541
|
-
cursor: "pointer"
|
|
542
|
-
};
|
|
543
|
-
return /*#__PURE__*/_react.default.createElement("div", null, !this.state.data && /*#__PURE__*/_react.default.createElement("label", {
|
|
544
|
-
id: "upload-picture-label",
|
|
545
|
-
className: this.props.buttonStyle,
|
|
546
|
-
style: upload_picture_label
|
|
547
|
-
}, this.props.Caption, /*#__PURE__*/_react.default.createElement("input", {
|
|
548
|
-
style: upload_picture_label_input,
|
|
549
|
-
id: "nested-input",
|
|
550
|
-
type: "file",
|
|
551
|
-
accept: "image/*",
|
|
552
|
-
onChange: this.onInputChange,
|
|
553
|
-
multiple: true
|
|
554
|
-
})), this.state.data && this.state.data.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
555
|
-
class: "show-image",
|
|
556
|
-
style: div_show_image,
|
|
557
|
-
onMouseOver: () => {
|
|
558
|
-
this.setState({
|
|
559
|
-
hover_input: true,
|
|
560
|
-
hover_image: true
|
|
561
|
-
}, () => {
|
|
562
|
-
if (this.debugging) console.log("onMouseOver");
|
|
563
|
-
});
|
|
564
|
-
},
|
|
565
|
-
onMouseLeave: () => {
|
|
566
|
-
this.setState({
|
|
567
|
-
hover_input: false,
|
|
568
|
-
hover_image: false
|
|
569
|
-
}, () => {
|
|
570
|
-
if (this.debugging) console.log("onMouseLeave");
|
|
571
|
-
});
|
|
572
|
-
}
|
|
573
|
-
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
574
|
-
style: this.state.hover_image ? div_show_image_hover : div_show_image,
|
|
575
|
-
src: this.getImageSrc(),
|
|
576
|
-
className: this.props.pictureStyle
|
|
577
|
-
}), !this.props.readOnly && /*#__PURE__*/_react.default.createElement("input", {
|
|
578
|
-
style: this.state.hover_input ? div_show_image_hover_input : div_show_image_input,
|
|
579
|
-
className: "btn btn-primary delete",
|
|
580
|
-
type: "button",
|
|
581
|
-
value: "Effacer",
|
|
582
|
-
onClick: this.resetUpload
|
|
583
|
-
})), /*#__PURE__*/_react.default.createElement(_reactToastify.ToastContainer, {
|
|
584
|
-
position: "top-right",
|
|
585
|
-
autoClose: 3000,
|
|
586
|
-
hideProgressBar: false,
|
|
587
|
-
newestOnTop: false,
|
|
588
|
-
closeOnClick: true,
|
|
589
|
-
rtl: false,
|
|
590
|
-
pauseOnFocusLoss: true,
|
|
591
|
-
draggable: true,
|
|
592
|
-
pauseOnHover: true
|
|
593
|
-
}));
|
|
594
|
-
}
|
|
595
|
-
}
|
|
596
|
-
exports.DsBlob = DsBlob;
|
|
597
|
-
DsBlob.propTypes = {
|
|
598
|
-
// Image handling props (note: data and binaryData are managed as read-write state internally)
|
|
599
|
-
data: _propTypes.default.string,
|
|
600
|
-
binaryData: _propTypes.default.object,
|
|
601
|
-
// Upload callback
|
|
602
|
-
uploadPicture: _propTypes.default.func.isRequired,
|
|
603
|
-
// Image size constraints
|
|
604
|
-
width: _propTypes.default.number,
|
|
605
|
-
height: _propTypes.default.number,
|
|
606
|
-
maxWidth: _propTypes.default.number,
|
|
607
|
-
maxHeight: _propTypes.default.number,
|
|
608
|
-
// Image processing options
|
|
609
|
-
reduceImage: _propTypes.default.bool,
|
|
610
|
-
jpegQuality: _propTypes.default.number,
|
|
611
|
-
removebase64: _propTypes.default.bool,
|
|
612
|
-
// Cloud storage options
|
|
613
|
-
cloud_storage: _propTypes.default.bool,
|
|
614
|
-
cloud_url_prefix: _propTypes.default.string,
|
|
615
|
-
// UI props
|
|
616
|
-
Caption: _propTypes.default.string,
|
|
617
|
-
buttonStyle: _propTypes.default.string,
|
|
618
|
-
pictureStyle: _propTypes.default.string,
|
|
619
|
-
readOnly: _propTypes.default.bool,
|
|
620
|
-
// Status flags
|
|
621
|
-
isCloudUrl: _propTypes.default.bool,
|
|
622
|
-
isBlobUrl: _propTypes.default.bool
|
|
623
|
-
};
|