Fine-uploader drag-and-drop: distinct dropzone and help div
There's no need for JS control over the help block. CSS can easily do the job as it follows using the tilde / squiggle (~) selector (if it's not exactly next to main. In case it is, use the adjacent (+) selector) : HTML Code: <div id="main">... your code ...</div>...
FineUploader - “isBrowserPreviewCapable” variable not thrown out by Chrome 40, though it should
Fine Uploader does not send the POST variable you are speaking of. The S3 demo on http://fineuploader.com/demos includes a line of code that ensures the parameter is sent with the request. For example, the following option is configured: uploadSuccess: { endpoint: "http://s3-demo.fineuploader.com/s3demo-thumbnails-cors.php?success", params: { isBrowserPreviewCapable: qq.supportedFeatures.imagePreviews } } ...
FineUploader drop area located outside of template?
You can locate the drop area wherever you like, in fact, you can have as many drop areas as you want. If you only want one drop area, and want to include it outside of the template container, then simply omit the drop area container from the template, create a...
FineUploader: Track Scaled Images ClientSide
javascript,image,fine-uploader
I appreciate the responses but I was able to find the answer by looking at the FineUploader API. It looks like the getParentId method is exactly what I was looking for. getParentId (scaledFileId) Get the ID of the parent file for this scaled file. Parameters: Integer id The ID of...
Fine Uploader S3 - Nowhere to safely call the asynchronous “setUploadSuccessParams()”
javascript,jquery,amazon-web-services,amazon-s3,fine-uploader
The key of each file is determined as late as possible, currently just before the upload occurs. This happens after the onUpload event callback handler is executed (not that it matters since onUpload does not allow for a promissory return type). So, the best course of action to handle your...
Grab FindUploader object from UI element
If you want to change a parameter after initializing the plug-in, you must do so via one of the API methods. For example, to change the endpoint url: uploader.setEndpoint(newUrl); or if you are using the jQuery plugin wrapper: $(element).fineUploader('setEndpoint', newUrl);.
How can I save fineuploaders uuid in a database?
Fine Uploader's S3 uploader sends an upload success POST request to your server after the file has been successfully sent to S3. A number of parameters are sent in the payload of this request, which is URL encoded. The name of the uuid parameter for the S3 upload success request...
How can i remove some file from fineuploader before upload [closed]
To remove a file (before it has started or completed uploading), simply cancel it via the cancel API method. For example: callbacks: { onSubmit: function(id) { if (fileIsInvalid) { this.cancel(id); } } } A better way to do this, in my opinion, is to test files in an onValidate callback,...
FineUploader - add file id from response to preview li
The code below will take a parameter returned in the server's upload response and ensure it is passed as a parameter when a delete request is sent for the same file: $("#fine-uploader-container").fineUploader({ callbacks: { onComplete: function(id, name, response) { this.setDeleteFileParams({attachment_id: response.attachment_id}, id); } } }); Note that the above code...
Fine Uploader - S3 Server Setup Not working
You will need to ensure wget is installed on your system or is available on your path, according to the error message. You really don't need wget to get that file though, just navigate to https://github.com/Widen/fine-uploader-server/blob/master/nodejs/s3/s3handler.js....
Template: Preview as background image
It sounds like the easiest solution would be to ask Fine Uploader to generate a thumbnail, pass the API method a temporary <img>, grab the src attribute from the <img> and use that to construct the background-image. For example: callbacks: { onSubmit: function(id) { var tempImg = document.createElement('img'), self =...
FineUploader - Error on multi-part upload to S3
Since you haven't included anything really specific to your setup, code, or the failing request, my best guess is that your server isn't returning a proper signature response for uploads made to the S3 REST API (which is used for larger files). You'll need to review that procedure for generating...
FineUploader - add uploaded files on page load
php,jquery,initialization,fine-uploader
If you want to display files in the upload list that have been uploaded in a previous session, just use the Initial File List feature. No need to reinvent the wheel here. If you want to reset Fine Uploader, use the reset API method. I've noticed that you are asking...
FineUploader - Passing customers parameters to the “Signature Endpoint”
You are correct in that there is no API method or option to specify your own custom parameters to be sent with the S3 or Azure signature requests. You can track case #996, which will be updated when we begin work on this. There are a couple other ways you...
Remove specific file from Fine Uploader list after upload
Have you tried using the getItemByFileId method to get a handle on the file container in the UI? callbacks: { onComplete: function(id) { qq(this.getItemByFileId(id)).remove(); } } ...
Work with php file outside public directory? I can access the file but receive error
javascript,php,directory-structure,fine-uploader
You are getting a notice message and then the headers cannot be sent. Disable the notice messages with error_reporting(E_ALL ^ E_NOTICE) at the beginning of your script;
S3 jQuery objectProperties file (key) naming and path?
Yes, you can also define a function value for the objectProperties.key option. For example: objectProperties: { key: function(fileId) { return 'dir1/dir2/dir3/' + this.getName(fileId); }, } ...
How to make Fine Uploader not to ignore text areas?
Looks like the form field parser isn't currently handling <textarea> elements. I've opened up a case and will fix that as part of Fine Uploader 5.0. Until that is fixed, you can easily work around this issue by parsing the <textarea> in an onUploader (or any other desired) callback handler...
FineUploader onDelete and onComplete
The parameters for your callbacks are incorrect. If you are using the jQuery plug-in wrapper for Fine Uploader, each event handler always has an initial parameter of Event. That is, the jQuery event object associated with the event you are handling. Just to be clear, you code should look like...
how to show drag files and remaining files on UI?
There are a number of ways to determine which files have been submitted to Fine Uploader. For example, via the getUploads API method: var submittedFiles = uploader.getUploads({status: qq.status.SUBMITTED}); or via an onSubmitted event handler: callbacks: { onSubmitted: function(id) { // handle submitted file with id of `id`... } See http://docs.fineuploader.com...
How to handle FineUploader POST request in Java in PlayFramework?
multipartform-data,playframework-2.2,fine-uploader
I eventually found out by exploring play apis, sample code below. Http.MultipartFormData body = request().body().asMultipartFormData(); Http.MultipartFormData.FilePart uploadFilePart = body.getFile("qqfile"); String fileName = uploadFilePart.getFilename(); File file = uploadFilePart.getFile(); Map<String,String[]> dataPart = request().body().asMultipartFormData().asFormUrlEncoded(); Iterator it = dataPart.entrySet().iterator(); while (it.hasNext()) { Map.Entry pair = (Map.Entry)it.next(); String[] values = (String[]) pair.getValue();...
FineUploader - add data-id to preview li
jquery,fine-uploader,jquery-sortable
First, get a handle on the file container element, then, find the appropriate child element. Finally, add the desired attribute. callbacks: { onComplete: function(id, name, response) { var fileContainer = this.getItemByFileId(id), $child = $(fileContainer).find("{{CHILD ELEMENT SELECTOR HERE}}"); $child.attr("data-id", response.attach_id); } } ...
Holding the upload queue until the first upload is complete in fineupoader
First off, onSubmit will be fired for all files that have been "submitted" via the API or file chooser before any files are uploaded. So, that will not be useful to solve #2 in your question. Instead, you will need to handle the onComplete event, grab any data from your...
Amazon s3 error on fineuploader version 4.0.3
amazon-web-services,amazon-s3,fine-uploader
You can turn on debug mode by setting debug: true in the uploader's options. Also, you can turn on bucket logging in S3 to get logs from that end.
How to get attributes from fineuploader handler?
This is more of a general JavaScript question then a Fine Uploader question. The problem is that you are misunderstanding how context works in JavaScript. In your code, this will always refer to the window object. Obviously, this is not what you want. You can either do this: $('.cv-uploader').fineUploader({ debug:...
Access Actual File Name
If you'd like access to any response from your server, you must do so inside an onComplete event handler. The response JSON is included as a parameter passed to your handler. It sounds like you want to make an request to your server with the updated name (from your server?)....
Change file name from within validateBatch?
There is no way to do this in the onValidate or onValidateBatch event handlers, mostly due to the fact that an ID doesn't exist for the file at this stage. A better option for you wold be to use the onSubmit callback instead. Here, you can also reject a file...
Validate (custom) before adding file
Use the onSubmit event -- which called is before the item has been added to the DOM -- and return false or a qq.Promise that will be rejected to disable the addition of that item to the file list. var userLoggedIn = true; // snippet ... onSubmit: function(id, name){ return...
Display images uploaded by fineuploder to Amazon S3?
php,amazon-web-services,amazon-s3,fine-uploader
The error message suggests that the server-side key does not have proper permissions to make a ListObjects or some related call on the bucket in question. You'll need to re-evaluate the IAM user/group associated with your server-side key and ensure it has all required assigned permissions.
FineUploaderS3 (4.4) Accept Header in Firefox
amazon-web-services,amazon-s3,amazon,fine-uploader
Solved! Thanks @RayNicholus I had to add the customHeaders option to my uploadSuccess endpoint in order to force Firefox to send the application/json Accept header. uploadSuccess: { endpoint: "/api/amazons3/uploadSuccessful", customHeaders: { 'accept': 'application/json' } }, ...
FineUploader and Mime type (------WebKitFormBoundary) appended into files
javascript,mime-types,fine-uploader
There is no issue here. The files are sent, by default, in multipart encoded requests. The file will be encased in a multipart boundary in the payload of this request, and the MIME type of the file will be specified as a parameter in the header of its multipart boundary....
How to manipulate filestream in memory before uploading
javascript,azure,fine-uploader,fileapi
I figured it out. This was the crucial part: if(needsManipulation(byteArray)) { manipulateByteArray(byteArray); // construct a new blob var newBlob = { blob: new Blob([byteArray], { type: 'application/octet-stream' }), name: name }; // restart the process for the adjusted file uploader.addFiles(newBlob); // signal failure and exit early promise.failure(); return; } Here's...
“Could not find the file list container in the template” error
Your template is not valid. The template must contain a top-level element with a CSS class of "qq-uploader-selector". This element must contain all other elements in your template. Simply wrapping the contents of your template in an element with this class should fix your issue.
Fine Uploader cannot draw thumbnail from amazon S3
Fine Uploader loads thumbnails at the URL returned by your initial file list endpoint using an ajax request (XMLHttpRequest) in modern browsers. It does this so it can scale and properly orient the image preview. You'll need a CORS rule on your S3 bucket that allows JS access via a...
Fineuploader addFiles ie 8/9
No, this is not possible, as the File API is not available in IE9 and older. No polyfill will allow you to turn a file input element into a File or Blob object unless the browser supports the File API. You can, however, pass <input type="file"> elements into Fine Uploader's...
Fine-Uploader php installation directory
php,installation,directory,fine-uploader
Response just received from Fine-Uploader support: "At this time, due to resource limitations, we are not able to provide the same support for Fine Uploader PHP that we have consistently provided for the JavaScript library. Fine Uploader PHP is in a beta state at the moment. We have decided to...
fine uploader S3 with large file fails
Your signature server is returning an invalid response to Fine Uploader's signature request. Fine Uploader expects a valid JSON response, but your server is returning HTML followed by a JSON string. For example, before the signature JSON string, your server is including this in the signature response: <br /> <b>Deprecated</b>:...
Alter file contents before uploading
javascript,html5,filereader,fine-uploader,fileapi
How about returning false to reject the file from onSubmit, encrypt it, then re-submit the encrypted version via the addBlobs API method. For example: callbacks: { onSubmit: function(id) { if (!fileOrBlob.blob || !fileOrBlob.blob.encrypted) { var fileOrBlob = uploader.getFile(id), reader = new FileReader(); reader.onload = function (e) { //encrypt here encryptedBlob.encrypted...
Fine-Uploader - Validation “specific” for each Drag and Drop element
jquery,validation,fine-uploader
Though other suggestions were valuable, this answer from RayNicholus was the correct one. It was under a comment, so I'm posting this answer here. You can examine the qqDropTarget on the File object in your onSubmit handler and reject (return false) if the file is not valid for that particular...
Clone element with fineuploader applied to it
javascript,jquery,fine-uploader
The cloned element needs to be binded to the file upload button since this refers to that specific element only. You also don't need to have duplicated HTML code. See this working example. HTML <table id="mytable"> <tr class="row"> <td class="proposal-td"> <div class="upload" title="Upload">Upload</div> </td> </tr> </table> <button id="add">Add new</button> JS...
Override the Content-Type when using FineUploader direct to S3 bucket
Setting the Content-Type header to some generic value is not the proper way to solve your problem. Instead, you'll need to set the appropriate Content-Disposition header. Currently, you'll need to make this adjustment on your object via the sever using the S3 API as part of handling Fine Uploader's upload...
Server timeout when re-assembling the uploaded file
It seems like you have two options: Remove the timeout in Apache. Delegate the chunk-combination effort to a separate thread, and return a response to the request as soon as possible. With the latter approach, you will not be able to let Fine Uploader know if the chunk combination operation...
Is Fineuploader with File Chunking more expensive on Amazon S3?
amazon-web-services,amazon-s3,fine-uploader
Yes, there are more requests, so chunking may result in increased fees. If you expect to allow your users to upload large files, the benefit of chunking is significant in terms of user experience, especially when the new concurrent chunking feature is enabled. However, if the increased cost bothers you,...
Fine Uploader with form option questions
php,jquery,jquery-validate,fine-uploader,jquery-forms-plugin
Answering your questions in order: Fine Uploader sends each file in a separate request, and there is no way to change this. Fine Uploader already generates a unique ID (UUID) for each file. This ID is sent with the upload request. If you want to send additional data for a...
Azure CORS Configuration
jquery,azure,cors,azure-storage-blobs,fine-uploader
As the error message indicates, your CORS rules are incorrect. Your allowed origins must include the domain of the URL you provided for the request.endpoint option.
Override fineuploader delete behavior?
javascript,jquery,fine-uploader
To react to an event when the delete is finished, subscribe to the deleteComplete event. The delete event is fired before the actual request is sent to the server and the deletion is processed. The deleteComplete event is fired after the response is received from the server even if the...
Post upload clipboard paste for Markdown syntax, for uploaded files - in Fine Uploader
javascript,php,amazon-s3,fine-uploader
It sounds like you are simply looking for a way to easily retrieve the url in S3 of each uploaded file. This can be done by having your server return the URL of the file in the response to the upload success POST request sent by Fine Uploader. Fine Uploader...
Uploading Google Drive document with fine-uploader fails, returns json
While working on a chromebook (http://www.howtogeek.com/128575/how-to-run-chrome-os-from-a-usb-drive-and-use-it-on-any-computer/) and selecting a file from Google Drive, the chrome os doesn't actually returns the file contents, only a json-string with a link to the content. This is a 'feature' from Google, not from fine-uploader....
Deleting a file from S3 using Django + Fineuploader + boto
python,django,amazon-s3,boto,fine-uploader
It turned out I had not properly configured my S3 bucket policy to also allow DELETE requests from my server, hence the bucket logs were showing an error 204. I had allowed PUT and GET requests, hence uploading and retrieval worked, but not DELETE. I changed my bucket policy to...
Changing - to in fineuploader
javascript,html,css,fine-uploader
Fine Uploader is expecting a container inside of the qq-upload-list-selector to to hold the file item. Consider adding another <div> as the only child of the qq-upload-list-selector. So... <div class="qq-upload-list-selector col-lg-3 col-md-4 col-xs-6"> <div> <div class="qq-progress-bar-container-selector"> <div class="qq-progress-bar-selector qq-progress-bar"></div> </div> Rest of the code .... </div> </div> Why do you...
in fineuploader
javascript,html,css,fine-uploader
Fine Uploader is expecting a container inside of the qq-upload-list-selector to to hold the file item. Consider adding another <div> as the only child of the qq-upload-list-selector. So... <div class="qq-upload-list-selector col-lg-3 col-md-4 col-xs-6"> <div> <div class="qq-progress-bar-container-selector"> <div class="qq-progress-bar-selector qq-progress-bar"></div> </div> Rest of the code .... </div> </div> Why do you...
How to include Content-MD5 header in FineUploader Azure request?
Fine Uploader provides direct access to the underlying File or Blob object via the getFile(id) API method. Once you have access to this, you can make use of FileReader to read the file/blob bytes and generate a hash. To make hashing even easier, consider using a JS library like SparkMD5....
Fine-Uploader: extraButtons.element allows only ID, but not CLASS
Seems like this is not expected behavior. You should file a bug if you are sure that the jquery object you have passed contains more than on element (at the time you create it). If you are sure your jquery object contains multiple objects when it is created, and fine...
Default template not found
Your Fine Uploader configuration is invalid, as you have not specified a container element for Fine Uploader to render the template. You'll need to add a container element, and then reference it in your config via the element option....