Skip to content

Commit 89f7555

Browse files
Popoch39Popoch39
committed
feat: added callback on dropzone
1 parent ff11f58 commit 89f7555

File tree

2 files changed

+113
-109
lines changed

2 files changed

+113
-109
lines changed

‎bundle.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/DropZone.tsx‎

Lines changed: 112 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ export interface DropZoneProps {
3636
// callback api
3737
uploadSuccessCallback?: (files: FileList) => boolean,
3838
uploadErrorCallback?: (files: FileList, error: string) => boolean,
39-
addCallBack? : () => void,
39+
uploadStartCallback?: (file: File) => void,
40+
addCallBack?: () => void,
4041
dropzoneParams: Map<string, any>
4142
}
4243

@@ -62,7 +63,7 @@ export const DropZone = React.forwardRef<HTMLFormElement, DropZoneProps>(
6263
token,
6364
url,
6465
redirect_url,
65-
addCallBack = () => {},
66+
addCallBack = () => { },
6667
dropzone_index,
6768
accepted_files,
6869
accepted_extensions,
@@ -71,10 +72,11 @@ export const DropZone = React.forwardRef<HTMLFormElement, DropZoneProps>(
7172
label = "Terminé",
7273
addRemoveLinks = false,
7374
autoProcessQueue = true,
74-
hiddenLabel = false,
75-
chunking = "0",
76-
chunkSize = "2000000",
77-
dropzoneParams = {}
75+
hiddenLabel = false,
76+
chunking = "0",
77+
chunkSize = "2000000",
78+
dropzoneParams = {},
79+
uploadStartCallback
7880
},
7981
ref
8082
) => {
@@ -89,9 +91,9 @@ export const DropZone = React.forwardRef<HTMLFormElement, DropZoneProps>(
8991
acceptedFiles: accepted_files,
9092
maxFiles: max_files,
9193
maxFilesize: max_file_size,
92-
chunking : chunking == "1" ?? false,
93-
chunkSize : chunkSize != "" ? Number.parseInt(chunkSize) : 2000000,
94-
retryChunks: true,
94+
chunking: chunking == "1" ?? false,
95+
chunkSize: chunkSize != "" ? Number.parseInt(chunkSize) : 2000000,
96+
retryChunks: true,
9597
url: url
9698
};
9799

@@ -136,105 +138,106 @@ export const DropZone = React.forwardRef<HTMLFormElement, DropZoneProps>(
136138
...dropZoneParameter,
137139
previewTemplate: ReactDOMServer.renderToString(DropZonePreviewTemplate),
138140
error: (file: any, message: any) => {
139-
// Code from github "npm dropzone"
140-
if (file.upload && file.upload.uuid && file.previewElement) {
141-
file.previewElement.classList.add("dz-error");
142-
if (typeof message !== "string" && (message.error || message.file)) {
143-
message = message.error || message.file;
144-
} else if (typeof message !== "string") {
145-
// Custom error sent by api
146-
var finalMessage: string[] = [];
147-
148-
// CUSTOM : Iterate on each message
149-
if (message.message.length > 0) {
150-
message.message.forEach((currentMessage: any) => {
151-
var errorList: string[] = [];
152-
// Iterate on each errors
153-
currentMessage.errors.forEach((errorMessage: string) => {
154-
errorList.push((currentMessage.row ? "Ligne " + currentMessage.row + " : " : "") + errorMessage + " \n ");
155-
})
156-
// Return result message
157-
finalMessage = finalMessage.concat(errorList);
158-
});
159-
160-
message = "<p>" + finalMessage.sort().join("</p><p>") + "</p>";
161-
162-
} else {
163-
message = "Une erreur est surevenue, veuillez vérifier le fichier importé.";
164-
}
165-
166-
}
167-
168-
// CUSTOM : add span data-dz-errormessage-index
169-
const divFileError = $("<div id='dropzone-info' class='alert alert-danger' role='alert' data-dz-errormessage-" + file.upload.uuid + ">" + message + "</div>");
170-
$('#dropzone-error-list').append($(divFileError));
171-
}
172-
173-
setIsInfoHidden(true);
174-
setIsHidden(true);
141+
// Code from github "npm dropzone"
142+
if (file.upload && file.upload.uuid && file.previewElement) {
143+
file.previewElement.classList.add("dz-error");
144+
if (typeof message !== "string" && (message.error || message.file)) {
145+
message = message.error || message.file;
146+
} else if (typeof message !== "string") {
147+
// Custom error sent by api
148+
var finalMessage: string[] = [];
149+
150+
// CUSTOM : Iterate on each message
151+
if (message.message.length > 0) {
152+
message.message.forEach((currentMessage: any) => {
153+
var errorList: string[] = [];
154+
// Iterate on each errors
155+
currentMessage.errors.forEach((errorMessage: string) => {
156+
errorList.push((currentMessage.row ? "Ligne " + currentMessage.row + " : " : "") + errorMessage + " \n ");
157+
})
158+
// Return result message
159+
finalMessage = finalMessage.concat(errorList);
160+
});
161+
162+
message = "<p>" + finalMessage.sort().join("</p><p>") + "</p>";
163+
164+
} else {
165+
message = "Une erreur est surevenue, veuillez vérifier le fichier importé.";
166+
}
167+
168+
}
169+
170+
// CUSTOM : add span data-dz-errormessage-index
171+
const divFileError = $("<div id='dropzone-info' class='alert alert-danger' role='alert' data-dz-errormessage-" + file.upload.uuid + ">" + message + "</div>");
172+
$('#dropzone-error-list').append($(divFileError));
173+
}
174+
175+
setIsInfoHidden(true);
176+
setIsHidden(true);
175177
},
176-
success: (file: any) => {
177-
// Hide custom progress bar when processing
178-
$(file.previewElement).find(".custom-dz-upload").hide();
179-
// Override css success mark
180-
$(file.previewElement).find(".dz-success-mark").css("animation", "slide-in 3s cubic-bezier(0.77, 0, 0.175, 1)");
181-
$(file.previewElement).find(".dz-success-mark").css("opacity", "1");
182-
183-
if (!autoProcessQueue) {
184-
// ManualProcess context : Is there file left to process ?
185-
if (dropZone!.getQueuedFiles().length > 0) {
186-
dropZone!.processQueue();
187-
} else {
188-
setIsInfoHidden(false);
189-
}
190-
} else {
191-
// AutoProcess context : Refresh button available
192-
setIsHidden(false);
193-
setIsInfoHidden(true);
194-
}
195-
196-
addCallBack && addCallBack();
197-
},
198-
processing: (file: any) => {
199-
setIsHidden(true);
200-
setIsInfoHidden(true);
201-
// Hide default progress bar when processing
202-
$(file.previewElement).find(".dz-upload").hide();
203-
// Show custom progress bar when processing
204-
$(file.previewElement).find(".custom-dz-upload").show();
205-
$(file.previewElement).find(".dz-progress").css("height", "inherit");
206-
},
207-
addedfiles: () => {
208-
if (!autoProcessQueue) {
209-
// Hide custom progress bar when add files
210-
$("#upload_form-" + dropzoneIndex + " .custom-dz-upload").hide();
211-
setIsHidden(false);
212-
setIsInfoHidden(true);
213-
}
214-
},
215-
sending: (file: any, _xhr, formData) => {
216-
if (dropZoneParameter.chunking) {
217-
formData.append('dzuuid', file.upload?.uuid);
218-
formData.append('dztotalchunkcount', file.upload?.totalChunkCount);
219-
220-
let index = 1;
221-
// @ts-nocheck
222-
if(file.upload?.chunks)
223-
{
224-
index = file.upload.chunks[file.upload.chunks.length - 1].index
225-
}
226-
227-
formData.append('dzchunkindex', index.toString());
228-
formData.append('dztotalfilesize', file.size );
229-
formData.append('dzchunksize', dropZoneParameter.chunkSize.toString());
230-
}
231-
232-
if(dropzoneParams) {
233-
for (const [key, value] of Object.entries(dropzoneParams)) {
234-
formData.append(key, value)
235-
}
236-
}
237-
}
178+
success: (file: any) => {
179+
// Hide custom progress bar when processing
180+
$(file.previewElement).find(".custom-dz-upload").hide();
181+
// Override css success mark
182+
$(file.previewElement).find(".dz-success-mark").css("animation", "slide-in 3s cubic-bezier(0.77, 0, 0.175, 1)");
183+
$(file.previewElement).find(".dz-success-mark").css("opacity", "1");
184+
185+
if (!autoProcessQueue) {
186+
// ManualProcess context : Is there file left to process ?
187+
if (dropZone!.getQueuedFiles().length > 0) {
188+
dropZone!.processQueue();
189+
} else {
190+
setIsInfoHidden(false);
191+
}
192+
} else {
193+
// AutoProcess context : Refresh button available
194+
setIsHidden(false);
195+
setIsInfoHidden(true);
196+
}
197+
198+
addCallBack && addCallBack();
199+
},
200+
processing: (file: any) => {
201+
uploadStartCallback && uploadStartCallback(file);
202+
setIsHidden(true);
203+
setIsInfoHidden(true);
204+
// Hide default progress bar when processing
205+
$(file.previewElement).find(".dz-upload").hide();
206+
// Show custom progress bar when processing
207+
$(file.previewElement).find(".custom-dz-upload").show();
208+
$(file.previewElement).find(".dz-progress").css("height", "inherit");
209+
},
210+
211+
addedfiles: () => {
212+
if (!autoProcessQueue) {
213+
// Hide custom progress bar when add files
214+
$("#upload_form-" + dropzoneIndex + " .custom-dz-upload").hide();
215+
setIsHidden(false);
216+
setIsInfoHidden(true);
217+
}
218+
},
219+
sending: (file: any, _xhr, formData) => {
220+
if (dropZoneParameter.chunking) {
221+
formData.append('dzuuid', file.upload?.uuid);
222+
formData.append('dztotalchunkcount', file.upload?.totalChunkCount);
223+
224+
let index = 1;
225+
// @ts-nocheck
226+
if (file.upload?.chunks) {
227+
index = file.upload.chunks[file.upload.chunks.length - 1].index
228+
}
229+
230+
formData.append('dzchunkindex', index.toString());
231+
formData.append('dztotalfilesize', file.size);
232+
formData.append('dzchunksize', dropZoneParameter.chunkSize.toString());
233+
}
234+
235+
if (dropzoneParams) {
236+
for (const [key, value] of Object.entries(dropzoneParams)) {
237+
formData.append(key, value)
238+
}
239+
}
240+
}
238241

239242
}
240243
));
@@ -267,12 +270,12 @@ export const DropZone = React.forwardRef<HTMLFormElement, DropZoneProps>(
267270
<small>Documents au formats {acceptedExtensions}. {dropZoneParameter.maxFiles} fichier(s) maximum {dropZoneParameter.maxFilesize}Mo maximum par fichier.</small>
268271
</div>
269272
{/* <p class="alert alert-danger" role="alert" hidden>Connexion impossible, veuillez réssayer.</p> */}
270-
<div id="dropzone-error-list" className="dz-error-message" style={{paddingTop : 0.5 + 'em' }}></div>
273+
<div id="dropzone-error-list" className="dz-error-message" style={{ paddingTop: 0.5 + 'em' }}></div>
271274
</form>
272275
</div>
273276
</div>
274277
);
275278
}
276279
);
277280

278-
export default DropZone;
281+
export default DropZone;

0 commit comments

Comments
 (0)