I’m using FilePond 4.30.4 with React and react-filepond 7.1.2. Everything is working great and I can upload files.
My server responds with a file ID, and this comes back down to FilePond. I can see it in the onprocessfile event.
I’d like to include this is the ‘Upload Complete’ message. e.g. ‘Complete, file 12345’. How can I set this?
I’ve tried to update .labelFileProcessingComplete in onprocessfile, but it has no effect. I can see my events being fired and the correct data in the console. Perhaps there is another way to update the 'Upload Complete' label with a custom message for the file.
<FilePond
ref={filePondRef}
oninit={() => handleInit()}
files={files}
onupdatefiles={setFiles}
onprocessfile={ (error, file) => {
if (error) {
console.log('OnProcessFile: we have an error:' + error);
console.dir(error);
return;
}
console.log('OnProcessFile:File processed', file);
console.log('OnProcessFile:set processed message to ', file.serverId);
//This has no effect
filePondRef.current.labelFileProcessingComplete='Completed:-#' + file.serverId;
}
}
labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
server={ {
timeout: 7000,
process: {
url: apiUrl,
method: 'POST',
withCredentials: false,
timeout: 7000,
onload: (res) => {
console.log('onload:and label with res=' + res);
// this has no effect either
filePondRef.current.labelFileProcessingComplete='Completed:' + res;
return res;
}
}
}
}
labelFileProcessingError= {() => {
// replaces the error on the FilePond error label
console.log('labelFileProcessingError: serverResponse is:' + serverResponse );
return serverResponse;
}}
/>
I would like to pause fineuploader if the document dropped is a pdf to give the end user some options before continuing. I cannot figure out how to get the pause to trigger. I am getting [Fine Uploader 5.3.2] Ignoring pause for file ID 0 (DEVELOPMENT.PDF). Not in progress.
My code below.
var uploader = new qq.s3.FineUploader({
debug: true,
element: document.getElementById('fine-uploader'),
request: {
endpoint: 'bucketname.s3.amazonaws.com',
accessKey: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' //zone-user key id
},
signature: {
endpoint: "/assets/plugins/fine-uploader/signature/endpoint.php"
},
debug:true,
cors: {expected: true},
chunking: {enabled: true},
resume: {enabled: true},
deleteFile:{enabled:false},
validation: {
itemLimit: 5,
sizeLimit: 15000000
},
uploadSuccess:{
//endpoint:"/assets/plugins/fine-uploader/signature/endpoint.php?success"
},
callbacks: {
onSubmitted: function(id, name) {
var fileName = name;
var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1).toUpperCase();
if(fileExtension==='PDF'){
alert('it IS pdf... now what?');
jQuery('#confirmPDFHandler').modal();
uploader.pauseUpload(id); //not pausing here
}else{
alert('its not a pdf... go!');
uploader.continueUpload(id);
}
},
onError: function(id, name, errorReason, xhrOrXdr) {
//alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason));
},
onUpload: function(id, name, isError,responseJSON) {
var obj = JSON.stringify(responseJSON);
//alert(name + 'is in progress');
},
onComplete: function(id,fileId,responseJSON){
var newfilename=uploader.getKey(id);
}
},
retry: {enableAuto: false}
});
If the user drops a pdf in the uploader, we will give them an option to simply upload (continue as usual) or split the file (pause or stop the upload and run our separate custom code to begin the pdf split option pulling one document into multiple documents then passing those to an uploader)
Sounds like you want to potentially cancel the upload, or proceed. In that case, you should ask the user for input inside of an onSubmit or onValidate event handler. Your handler should return a Promise and either resolve the promise to allow the file to go through, or reject it to cancel the file submission. For example:
onSubmit: function(id) {
return new Promise(function(resolve, reject) {
// popup modal
// when user responds...
// ...call resolve() if they want to upload the file
// ...or reject() if they want to cancel the file
});
}
Fine Uploader has a very small "promise" implementation bundled with the library. It's non-standard, so you may be better off finding a standard A+ implementation instead.
I am using the dropzone js plugin to upload files to a php server. It is working great. I am facilitating the user to update the uploaded files. So once the user clicks on update button, the dropzone appears, and I am able to display the uploaded files in it through a JQuery-AJAX call. But my problem is that though the files are displayed in the thumbnail format, the number of files in the dropzone counts to zero. I feel that the accept function is not being triggered.But if a new file is added to the displaying list the file count is 1 though there are files already existing in it.
I am using the following code to display the files in dropzone:
var mockFile = { name: "Filename", size: 12345 };
myDropzone.options.addedfile.call(myDropzone, mockFile);
myDropzone.options.thumbnail.call(myDropzone, mockFile, "/image/url");
Can anyone help me solve this?
I think you need to push the mockFile in the dropZone manually like this
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("complete", mockFile);
myDropzone.files.push(mockFile);
It's work for me... if you need more code just ask!
Mock file is not uploaded as explained here https://github.com/enyo/dropzone/issues/418
If you want to submit the form use myDropzone.uploadFiles([]); in init()
$('input[type="submit"]').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
var form = $(this).closest('#dropzone-form');
if (form.valid() == true) { //trigger ASP.NET MVC validation
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([]);
}
}
});
example for U!
jQuery(function($) {
//文件上传
$(".dropzone").dropzone({
url : "pic_upload.jsp?id=<%=request.getParameter("id")%>",
addRemoveLinks : true,
dictRemoveLinks : "x",
dictCancelUpload : "x",
maxFiles : 5,
maxFilesize : 5,
acceptedFiles: "image/*",
init : function() {
//上传成功处理函数
this.on("success", function(file) {
alert("修改前:"+file.name);
});
this.on("removedfile", function(file) {
alert("File " + file.name + "removed");
//ajax删除数据库的文件信息
$.ajax({
type:'post',
url:'pic_delete.jsp?id='+file.name ,
cache:false,
success:function(data){
}
});
});
<%
if(null!=list){
for(PlaceImg img:list){%>
//add already store files on server
var mockFile = { name: "<%=img.getId()%>", size: <%=img.getFilesize()%> };
// Call the default addedfile event handler
this.emit("addedfile", mockFile);
// And optionally show the thumbnail of the file:
this.emit("thumbnail", mockFile, "<%=img.getImgUrl()%>");
<%}
}%>
}
});
I'm trying to add an existing image to my dropzone programmatically, using the dropzone.js FAQ as a guide:
// Add the existing image if it's there.
// headerDropzone is my dropzone (debug shows it as existing and initialized at this point.
var on_load_header = $( '[name="on_load_header_image"]' ).val();
var on_load_header_path = $( '[name="on_load_header_image_path"]' ).val();
if ( on_load_header ) {
// Hardcoded size value is just for testing, see my second question below.
var on_load_header_data = { name: on_load_header, size: 12345 };
// Call the default addedfile event handler
headerDropzone.options.addedfile.call( headerDropzone, on_load_header_data );
// And optionally show the thumbnail of the file:
headerDropzone.options. thumbnail.call( headerDropzone, on_load_header_data, on_load_header_path);
}
My first problem is that this is just not working. The addedfile event doesn't fire (or at least the addedfile handler in headerDropzone never fires), same goes for thumbnail.
My second problem/question is: do I have to provide the file size? I could get it server side, but I'd rather not do it if I don't actually need to.
If you need to add multiple existing files into Dropzone, declare your existing files as array and then add it into Dropzone programmatically inside a loop like so...
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", {
url: "/file/post",
maxFileSize: 50,
acceptedFiles: ".pdf",
addRemoveLinks: true,
//more dropzone options here
});
//Add existing files into dropzone
var existingFiles = [
{ name: "Filename 1.pdf", size: 12345678 },
{ name: "Filename 2.pdf", size: 12345678 },
{ name: "Filename 3.pdf", size: 12345678 },
{ name: "Filename 4.pdf", size: 12345678 },
{ name: "Filename 5.pdf", size: 12345678 }
];
for (i = 0; i < existingFiles.length; i++) {
myDropzone.emit("addedfile", existingFiles[i]);
//myDropzone.emit("thumbnail", existingFiles[i], "/image/url");
myDropzone.emit("complete", existingFiles[i]);
}
The Dropzone FAQ leaves out important settings required to properly preload a dropzone with (an) existing file(s).
My init method for my dropzone:
Dropzone.options.MyDropZoneID = {
...
init: function () {
var mockFile = { name: fileName, size: fileSize, type: fileMimeType, serverID: 0, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier)
this.emit("addedfile", mockFile);
this.createThumbnailFromUrl(mockFile, fileUrl);
this.emit("success", mockFile);
this.emit("complete", mockFile);
this.files.push(mockFile);
...
I don't know if the above is a perfect implementation, but it is working correctly with the maxFiles setting. Which is very important if you don't want buggy behavior (like the default message displaying when it shouldn't or extra files getting uploaded). You definitely need to set the accepted property to true and add the file to the files property. The only thing that I think is not required is emitting the success. I haven't played around with that enough though to know for sure.
Note: I used the following NuGet package:
Created by: Matias Meno
Id: dropzone
Version: 4.2.0
See if the functions headerDropzone.options.addedfile and headerDropzone.options.thumbnail are actually defined. It should work the way you did it, but without further info it's difficult to tell what's wrong.
About the filesize: No, it's not necessary to actually provide the accurate filesize. It's just that Dropzone automatically displays the filesize. If you don't care if some false filesize is displayed then you can just provide some random number or 0. Otherwise you might want to hide the filesize with CSS, or with JS after you add it. (The element in question has the class dz-size.
The JavaScript version of it would look something like this:
var fileSizeElement = on_load_header_data.previewElement.querySelector(".dz-size");
fileSizeElement.parentNode.removeChild(fileSizeElement);
This is now answered in official FAQ
Dropzone.options.myDropzone = {
init: function() {
let myDropzone = this;
// If you only have access to the original image sizes on your server,
// and want to resize them in the browser:
let mockFile = { name: "Filename 2", size: 12345 };
myDropzone.displayExistingFile(mockFile, "https://i.picsum.photos/id/959/600/600.jpg");
// If the thumbnail is already in the right size on your server:
let mockFile = { name: "Filename", size: 12345 };
let callback = null; // Optional callback when it's done
let crossOrigin = null; // Added to the `img` tag for crossOrigin handling
let resizeThumbnail = false; // Tells Dropzone whether it should resize the image first
myDropzone.displayExistingFile(mockFile, "https://i.picsum.photos /id/959/120/120.jpg", callback, crossOrigin, resizeThumbnail);
myDropzone.files.push(mockFile); // line missing in official docs
// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
let fileCountOnServer = 2; // The number of files already uploaded
myDropzone.options.maxFiles = myDropzone.options.maxFiles - fileCountOnServer;
}
};
Originally I was doing something along these lines to programmatically upload a pre-existing file to Dropzone:
headerDropzone.emit("addedfile", imageFile);
headerDropzone.emit("thumbnail", imageFile, imageUrl);
headerDropzone.files.push(file);
However, referencing this Dropzone Github Issue I found an easier way to directly upload:
headerDropzone.uploadFiles([imageFile])
Unfortunately there are no references to this uploadFiles method in the Dropzone Documentation, so I figured I'd share some knowledge with all you Dropzone users.
Hope this helps someone
I had the same problem and found Dropzone's handleFiles(files) method.
So if you have inputTypeFileRef, you can
// inputTypeFiles.files is an object of type FileList
var fileArray = Object.values(inputTypeFiles.files || {});
myDropZone.handleFiles(fileArray);
That will also trigger all the Dropzone's events and pass file(s) data that it normally would by dragging a file on it - progress, file size, etc.
Hope it helped.
The latest Dropzone is lack of examples and the documentation is not clear or incomplete. You can use the following to add existing images to Dropzone.
for (var i = 0; i < imagesList.length; i++) {
let name = imagesList[i];
name = name.substring(name.lastIndexOf('/') + 1);
fetch(imagesList[i])
.then(res => res.blob())
.then(blob => {
let file = new File([blob], name, blob);
myDropzone1.addFile(file);
});
}
imagesList is a list of images which you want to add to Dropzone.
However, I am still facing a problem: Images are not being added or shown in the order/sequence as in imagesList. They appear rather random. Is there a way to make the images shown in the order/sequence as in imagesList?
Many of these answers are pretty dated, this is working for me in the latest Dropzone JS at the time of writing (take note of the included comments):
init: function() {
var dzObj = this;
// In my template I looped through existing files from the database and created:
// <div class="existing-image" data-url="/path/to/file.jpg"></div>
$('.existing-image').each(function() {
// I didn't have this data - works fine without
var mockFile = { name: '', size: '', dataURL: $(this).data('url') };
// Call the default addedfile event handler
dzObj.emit("addedfile", mockFile);
// The Dropzone JS FAQ incorrectly references "file" here instead of mockFile".
// The other parameters are outdated, dataURL goes in the object above,
// and you need to pass through other parameters.
// It DOES NOT WORK without the thumbnail event being triggered.
dzObj.createThumbnailFromUrl(mockFile, dzObj.options.thumbnailWidth, dzObj.options.thumbnailHeight, dzObj.options.thumbnailMethod, true, function (dataUrl) {
dzObj.emit("thumbnail", mockFile, dataUrl);
});
// Make sure that there is no progress bar, etc...
dzObj.emit("complete", mockFile);
dzObj.options.maxFiles = dzObj.options.maxFiles - 1;
});
}
#tjbp's response worked well for me, with the following changes:
I could not delete the programatically added file and then add another. I fixed this by removing this line, which was setting "maxFiles" to 0.
// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
var existingFileCount = 1; // The number of files already uploaded
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;
To make sure the "Delete" button was visible, I had to add the following line:
if (mockFile.previewElement) {
mockFile.previewElement.classList.add("dz-success");
}
Nothing here worked for me with version 5.7.0 but this did:
var myDropzone = new Dropzone(document.body, {
url: "<?= site_url('site/upload') ?>",
acceptedFiles: "<?= $uploadFieldAcceptValue ?>",
maxFilesize: 15,
maxFiles: 5,
autoQueue: false,
thumbnailWidth: 80,
thumbnailHeight: 80,
init: function(){
var that = this;
that.on("addedfile", function(file) {
// remove the start button
var startButton = file.previewElement.querySelector(".start");
if(startButton){
startButton.parentNode.removeChild(startButton);
}
});
<?php if(is_array($userUploads) && count($userUploads) > 0) { ?>
<?php foreach($userUploads as $userUpload) { ?>
<?php $file = $userUpload['file']; ?>
var mockFile = {
name: '<?= basename($file) ?>',
size: <?= filesize($file) ?>
};
var fileUrl = '<?= base_url() . str_replace('\\', '/', preg_replace('~^'. preg_quote(FCPATH) .'~', '', $file)) ?>';
var callback = null;
var crossOrigin = null;
var resizeThumbnail = true;
that.displayExistingFile(mockFile, fileUrl, callback, crossOrigin, resizeThumbnail);
that.emit("success", mockFile);
that.emit('complete', mockFile);
<?php } ?>
that.options.maxFiles = that.options.maxFiles - <?= count($userUploads) ?>;
<?php } ?>
}
});
On Dropzone 5.7.0 there is a "displayExistingFile" function. I called it on init section, works fine.
/**
* Called when dropzone initialized
* You can add event listeners here
*/
init: function init() {
var mockFile = { name: "Filename 1.pdf", size: 12345678 };
this.displayExistingFile(mockFile, "../../assets/site/wp-content/uploads/cropped-ic_credifisco-1-192x192.png");
},
var manualuploader = new qq.FineUploader({
element: $('#manual-fine-uploader')[0],
request: {
endpoint: '/ViewData/UploadFile'
},
autoUpload: false,
multiple: false,
validation: {
allowedExtensions: ['xlsx']
},
text: {
uploadButton: 'select file',
cancelButton: 'cancel file'
},
messages: {
typeError: '{file} file type error : {extensions}.',
noFilesError: "no files ."
},
failedUploadTextDisplay: {
mode: 'custom',
maxChars: 40,
responseProperty: 'Msg',
enableTooltip: true
},
callbacks: {
onUpload: function (id, name) {
showWaitLayer("uploading ......");
},
onComplete: function (id, name, response) {
closeWaitLayer();
$('input[name=uploadFileName]').val(response.Datas.FILE_0);
}
}
});
I use this code , when i select a 'jpg' file,the typeError will alter;
my question is when the noFilesError will show? i try lots time the noFileError didn't show.
finally,i update to 3.64 version,and before uploadStoredFiles() method i add
var tempA = manualuploader.getUploads({
status: [qq.status.SUBMITTED]
});
if (tempA.length == 0){
alert("no File Error");
return;
}
The documentation on options clearly states:
noFilesError - Text sent to the onError callback (and showMessage if running in FineUploader mode) if a an empty array of files or Blob objects is submitted.
And on callbacks:
onError(String id, String name, String errorReason, XMLHttpRequest xhr) - called whenever an exceptional condition occurs (during an upload, file selection, etc). Note that the last parameter, xhr, will only be included if the error is related to a request initiated by XMLHttpRequest.
If you simply want an error to display when no files have been droppped onto the uploader, add an anonymous function to your onError callback like so:
// ...
callbacks: {
onError: function (id, name, errorReason, xhr) {
alert(errorReason);
}
}
// ...
This will display a simple alert whenever there is an error. You could customize when and how you display your error by manipulating the logic inside of the onError callback.