How to Programming with Fine-uploader

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....

Grab FindUploader object from UI element

amazon-web-services,amazon-s3,amazon,fine-uploader

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);.

FineUploaderS3 (4.4) Accept Header in Firefox

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' } }, ...

Fine Uploader - S3 Server Setup Not working

osx,terminal,fine-uploader

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....

FineUploader - Error on multi-part upload to S3

amazon-s3,fine-uploader

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 - “isBrowserPreviewCapable” variable not thrown out by Chrome 40, though it should

amazon-s3,fine-uploader

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 } } ...

Server timeout when re-assembling the uploaded file

apache,tomcat,fine-uploader

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...

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...

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...

FineUploader onDelete and onComplete

php,jquery,fine-uploader

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...

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.

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;

“Could not find the file list container in the template” error

javascript,mime-types,fine-uploader

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.

FineUploader and Mime type (------WebKitFormBoundary) appended into files

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 make Fine Uploader not to ignore text areas?

javascript,php,fine-uploader

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...

Access Actual File Name

javascript,azure,fine-uploader,fileapi

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?)....

How to manipulate filestream in memory before uploading

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...

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...

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...

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...

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>:...

FineUploader - add file id from response to preview li

amazon-s3,cors,fine-uploader

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 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...

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:...

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...

Fineuploader addFiles ie 8/9

python,django,amazon-s3,boto,fine-uploader

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...

Deleting a file from S3 using Django + Fineuploader + boto

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...

Holding the upload queue until the first upload is complete in fineupoader

javascript,image,fine-uploader

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...

FineUploader: Track Scaled Images ClientSide

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...

Change file name from within validateBatch?

javascript,jquery,fine-uploader

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...

Override fineuploader delete behavior?

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...

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,...

Override the Content-Type when using FineUploader direct to S3 bucket

amazon-s3,fine-uploader

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...

Template: Preview as background image

amazon-web-services,amazon-s3,fine-uploader

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 =...

Is Fineuploader with File Chunking more expensive on Amazon S3?

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,...

How to include Content-MD5 header in FineUploader Azure request?

azure,md5,fine-uploader

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....

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();...

How can I save fineuploaders uuid in a database?

javascript,php,fine-uploader

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...

Remove specific file from Fine Uploader list after upload

javascript,html5,filereader,fine-uploader,fileapi

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(); } } ...

Alter file contents before uploading

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...

Validate (custom) before adding file

javascript,html,css,fine-uploader

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...

Changing
to
in fineuploader

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...

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.

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...

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>...

S3 jQuery objectProperties file (key) naming and path?