I have looked over the doc and searched for forums but I can not seem to find an examples on how to implement the Initial File List functionality for fine-uploader.
Below is the script that I am using - works great but what I would like to do is to use the Initial File List function to populate the fineuploader with the existing files that have been uploaded during this session.
I have code that will return a json feed with the required files in an array format.
I just can ot figure out where our how to call the function to initalize.
Thanks in advance.
<script>
// Wait until the DOM is 'ready'
$(document).ready(function () {
$("#fine-uploader").fineUploader({
debug: true,
request: {
endpoint: 'upload.cfm'
},
session : {
endpoint: 'imageStatus.cfm',
refreshOnRequest:true
},
validation: {
itemLimit: 2,
allowedExtensions: ["jpeg", "jpg", "gif" , "png"],
sizeLimit: 5000000 // 5 MiB
},
messages: {
tooManyItemsError: 'You can only add 2 images'
},
deleteFile: {
enabled: true, // defaults to false
endpoint: 'upload_delete.cfm?uuid=',
method: 'post'
},
retry: {
enableAuto: false
},
scaling: {
sendOriginal: true,
hideScaled: true,
sizes: [
{name: "THUMB_XX", maxSize: 113},
{name: "FULLIMAGE", maxSize: 450}
]
},
});
});
</script>
I solved the issue.
ends up that I did a custom build of the JS files and did not include the status function.
rebuild the downloads and works like a charm.
thanks everyone for the help.
The initial file list feature is not a function that you call, per say, it is an option that you set in the client. More or less, all you need to set is the endpoint where the uploader can retrieve this list of files, and then have your server correctly process them.
The server response should be a JSON Array of Objects.
[{ name: 'foo.jpg', uuid: "7afs-sdf8-sdaf-7asdf" }, ... ]
The trickiest part is getting that list of files server-side, and you may want to ask some Coldfusion folks about how to do that.
Related
I am having an issue trying to use the addInitialFiles method listed here:
http://docs.fineuploader.com/branch/master/api/methods.html#addInitialFiles
I get a javascript error in my chrome dev console that says:
1032:381 Uncaught TypeError: uploader.addInitialFiles is not a function
This is the code I use to initialize Fine Uploader, and make the call the addInitialFiles():
<script type="text/javascript">
$(function () {
var uploader = $('#fine-uploader').fineUploaderS3({
request: {
endpoint: "myfineuploaderbucket.com.s3.amazonaws.com",
accessKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
},
signature: {
endpoint: "/SignatureHandler",
version: 4
},
validation: {
allowedExtensions: ["gif", "jpeg", "jpg", "png", "bmp"],
acceptFiles: "image/gif, image/jpeg, image/png, image/bmp",
sizeLimit: 5000000,
itemLimit: 3
},
retry: {
enableAuto: true
},
deleteFile: {
enabled: true,
endpoint: "/DeleteImage/?id=#Model.Id",
method: 'POST',
},
paste: {
targetElement: $(document),
promptForName: true
},
uploadSuccess: {
endpoint: "/UploadSuccessful/?id=#Model.Id"
},
iframeSupport: { //This path needs to be a blank HTML page and is used for fine-uploader to support IE9 and older
localBlankPagePath: "/Blank"
},
objectProperties: {
acl: "public-read",
key: function (fileId) {
var re = /(?:\.([^.]+))?$/;
fileExt = re.exec($("#fine-uploader").fineUploader("getName", fileId))[0];
uuid = $("#fine-uploader").fineUploader("getUuid", fileId);
filename = uuid + fileExt;
key = "/#ViewBag.Id + "/" + filename;
return key;
}
},
scaling: {
hideScaled: true,
sizes: [
{ name: "small", maxSize: 350 },
{ name: "large", maxSize: 800 },
]
},
callbacks: {
onDelete: function (id) {
if (id == 2) {
$("#fine-uploader").fineUploader("deleteFile", 0);
$("#fine-uploader").fineUploader("deleteFile", 1);
}
},
},
});
uploader.addInitialFiles([
{
"name": "a3ef2360-881d-452c-a5f6-a173d5291066.jpg",
"uuid": "a3ef2360-881d-452c-a5f6-a173d5291066",
"size": "66000",
"thumbnailUrl": "https://s3.amazonaws.com/myfineuploaderbucket.com/1032/ecdca7bb-fb02-4072-b526-4e51cedb1f2b.jpg",
"s3Key": "1032/a3ef2360-881d-452c-a5f6-a173d5291066.jpg",
"s3Bucket": "myfineuploaderbucket.com"
}
]);
Is there something that I am doing wrong? Is addInitialFiles not a method, but an option that needs to be initialized when creating the Fine Uploader instance? I have tried adding "addInitialFiles" to the options of the Fine Uploader instance as well, and I do not receive a javascript error, but it does not load the initial file either.
I am using the latest version, 5.7.1.
Just like any other jQuery plug-in, the Fine Uploader jQuery wrapper returns a jQuery-wrapped element. This means that you are attempting to call an addInitialFiles method on a jQuery object. Of course, this method does not exist. If you really want to continue using the jQuery wrapper, you must change uploader.addInitialFiles(...) to uploader.fineUploaderS3('addInitialFiles', ...).
But you should know that you don't need jQuery for any of this, especially when using Fine Uploader. There is no benefit to using the jQuery wrapper with Fine Uploader, and you can fix your code simply by forgoing the wrapper (and saving a few bytes) and changing the first couple lines of your Fine Uploader initialization to:
var uploader = new qq.s3.FineUploader({
element: document.querySelector('#fine-uploader'),
...
})
Now, uploader.addInitialFiles works as you would expect.
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.
Filter parameter value i.e name value is not included when i was performing filter operation in my API call as written below
_dc:1427270031651
counrtyId:2
custId:1
id:
name:
page:1
start:0
limit:10
sort:[{"property" : "id", "direction" : "desc"}]
This is my store
Ext.define('MyDesktop.store.DirectoriesStore', {
extend: 'Ext.data.Store',
requires:'MyDesktop.model.DirectoriesNumberModel',
model: 'MyDesktop.model.DirectoriesModel',
storeId:'DirectoriesStore',
autoLoad : {
params : {
start : 0,
limit : '10'
}
},
pageSize : 10,
remoteSort : true,
sorters : [{
property : 'id',
direction : 'desc'
}],
remoteFilter : true,
proxy:{
type:'ajax',
url:'./configuration/directory/get',
reader:{
type: 'json',
root: 'data',
totalProperty: 'total'
},
extraParams: {
'countryId': '',
'custId': ''
}
},
autoLoad:false
});
and this is my view
Ext.require([
'Ext.ux.grid.FiltersFeature'
]);
var filters = {
ftype: 'filters',
local: true,
features: [{type: 'integer',dataIndex: 'name'},
{type: 'string',dataIndex: 'description'},
{type: 'string',dataIndex: 'fileName'}]
};
and I added it grid as follows:
features: [filters],
Filters are working but In API call filters are not calling
Please anyone help me.
You have remote filtering disabled in your store.
Change remoteFilter: false to remoteFilter: true and try again.
From the docs:
remoteFilter : Boolean
true to defer any filtering operation to the server. If false,
filtering is done locally on the client.
It also appears that your specifically telling your application to apply the filters locally with the local:true config.
The problem is, the params are not being sent to the ajax call. But hey, try changing the page after you loaded your store. Then try sorting again. You will see that the params are now being sent along in the Ajax request.
My current workaround is to imitate a changepage via gridStore.loadPage(page, [options]). You should also change it back to first page again after that.
After you change the page, sort will be working for all following requests.
This of course is just a workaround and we may have different requirements. My grid is calling store.load() after render so I attached the change page there.
Hope you have some hints.
NOTE: THIS IS ONLY A WORKAROUND!
Say I want to upload several files at once, which is something I can do when setting the multiple option to true:
var myUploader = new qq.FineUploader({
element: $('#test')[0],
multiple: true,
request: { endpoint: 'path/to/master/server/php/' },
autoUpload: false,
});
Now, let's say I have a button that will allow me to select the files I want to upload. If I click said button and select, say, test.txt file, test.txt will be added to the list of files that will be uploaded. So far so good. Now, my problem is that, if I click the button again, and select test.txt file again, it will be added to the list even though it's already in the list.
Is there any way to prevent FineUploader from letting me do this?
Thanks in advance
I'd be careful declaring a file a duplicate simply based on the name. You should also take size into account, at least. Although, this is not possible in IE9 and older since we can't determine file size client-side in those browsers. Just for the purposes of simplicity, let's use the file name exclusively...
One way is to maintain an array of file names submitted to the uploader. You can add to this list in your an onSubmitted handler. The, you can contribute an onValidate handler that will reject the file if it already exists in the array. Your code would look something like this:
var filenames = [];
var myUploader = new qq.FineUploader({
element: $('#test')[0],
multiple: true,
request: { endpoint: 'path/to/master/server/php/' },
autoUpload: false,
callbacks: {
onSubmitted: function(id, name) {
filenames.push(name);
},
onValidate: function(fileData) {
return qq.indexOf(filenames, fileData.name) < 0;
}
}
});
Also, just for kicks, why not just use Fine Uploader's jQuery plug-in, since you seems to already be using jQuery in your project? The above example is rewritten using the jQuery plug-in below:
var filenames = [];
$('#test').fineUploader({
multiple: true,
request: { endpoint: 'path/to/master/server/php/' },
autoUpload: false
})
.on("submitted", function(event, id, name) {
filenames.push(name);
})
.on("validate", function(event, fileData) {
return $.inArray(fileData.name, filenames) < 0;
});
How can I implement the onDeleteComplete, do I put inside the deletefile: request or outside?
I've used the complete method before and I tried to implement the onDeleteComplete the same way but I get no actions. Below is the code I've tried to use but it fails.
$('#jquery-wrapped-fine-uploader').fineUploader({
request: {
endpoint: '/Test.aspx'
},
deleteFile: {
enabled: true,
endpoint: '/Test.aspx'
}
}).on('onDeleteComplete', function (id, xhr, isError) {
alert('hi');
})
So I finally got it working with your suggestion.
Here my final code
$('#jquery-wrapped-fine-uploader').fineUploader({
request: {
endpoint: '/Test.aspx'
},
deleteFile: {
enabled: true,
endpoint: '/Test.aspx'
}
}).on('deleteComplete', function (event, id, name, responseJSON) {
alert('hi');
});
Use of callbacks when using the jQuery plug-in is well documented in both the examples/demos on fineuploader.com and in the documentation. There are two distinct places in the documentation where us of callbacks are mentioned: the callbacks readme page and in the callbacks section of the using the jQuery plugin readme page.
The "on" in "onDeleteComplete" in your code is redundant, it should be changed to .on("deleteComplete", ...). Also, the first parameter passed to all event handlers by jQuery is "event".
Please read the documentation, starting with the first page at http://docs.fineuploader.com/. Read the introductory info, then follow the path outlined based on your use case.
How about now?
$('#jquery-wrapped-fine-uploader').fineUploader({
request: {
endpoint: '/Test.aspx'
},
deleteFile: {
enabled: true,
endpoint: '/Test.aspx'
}
}).on('deleteComplete', function (id, xhr, isError) {
alert('hi');
});