valums-file-uploader/file-uploader

Multiple file upload plugin for HTML forms. User-friendly progress-bar + uploads via drag-and-drop. Coded in Javascript + AJAX, not Flash. Server-side PHP, Java, & ColdFusion examples included.

file-uploader's Issues

Problem with large file upload

Hello there,

While trying to upload large media files(video files) it gets interrupted and don't get uploaded. I have done many server configuration changes such as upload_max_size, post_max_size, input_post_time but still couldn't resolve the issue. Any help will be greatly appreciated.

Thanks

Methods to control uploads

I was using valums original file uploader, just saw it is no longer maintained and forked here..

BIG question here: How can I cancel uploads? It says in the description they are cancelable.. great.. how? :)

Thing is, I have a chat project where I use a very simple upload file directly to chat functionality. I have a drop down menu where this option (upload file) is available, and a click there gives the file upload requester.. Select a file, and a separate console comes up, where the file upload progress is shown. Once the file is finished, the console disappears again and the file is posted in the chat.

Problem is, if I want to cancel the upload, I'd need a cancel method somewhere. I have not found any. Not in the documentation at least, and currently I am using the original version, and what I have understood from the code is that it basically can only be canceled by clicking on an HTML element that has qq-uploader-cancel.. This is FAR from ideal obviously :)

So in short, I'd like to see some method to control uploads.. It would be VERY nice to just have a JS library that I can control from, say, jQuery

Coldfusion 10 - GetHttpRequestData.content always empty

Hi,

i'm working with coldfusion 10 and the example in file-uploader doesn't work. If i upload a file, the content-Object from GetHttpRequestData() is always empty and then coldfusion throws a error that the content-type of the form is invalid (because its application/octet-stream).

This error message is of course understandable, as in ColdFusion code (if len (content) is 0) is normal to upload the file. But I wonder why the content - object is always empty. Does' to already known problems?

Thank you,
Regards Adrian

The script upload files correctly, but server response is always null.

i have used this beauty script in my webapp and files are correctly uploaded, but the server response is always null. it doesnt show if upload has been ok or failed. i know the problem is in the server side, but i cant find it. ¿Does anyone have the same error? excuse me for my bad english !!!

Works in IE9?

I am wondering if this uploader works in IE9. I have the original version which does not work in IE9. (get unexpected call to method or property access for dataTransfer.EffectsAllowed when trying to drag file into the uploader section)

I would like to move to this version, but will be no point if doesn't work in ie9.

thanks again!

Fine Uploader is MIT licensed once again

FYI: This particular repo is a fork of SimonEast/file-uploader, which itself is a fork of FineUploader/fine-uploader. In other words, Fine Uploader is the parent project. I realize that the readme in Valums-File-Uploader/file-upload claims that Fine Uploader is the fork, but that is not the case - the reverse is in fact true.

Up until recently, Fine Uploader was commercially licensed, which was likely unappealing for all but enterprise users. Starting with Fine Uploader 5.9.0, the project is once again MIT Licensed. In other words, migration back to Fine Uploader is probably a better option than sticking with this particular repo, since it is no longer actively maintained.

Problem in IE 8

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; BTRS130296; GTB7.3; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
Timestamp: Thu, 7 Jun 2012 03:12:23 UTC

Message: Access is denied.

Line: 1136
Char: 9
Code: 0
URI: http://localhost/theme/V02/js/valums/client/fileuploader.js

Error at this line : form.submit();

Please help me fix it.

Regards,
TUAN NGO

qq.extend issue

Hi, your function is does not merge as it should be...sub-object are not merged
e.g: object "classes"

Sorry for my bad english :(

Great plugin ;)

Not working on windows

I have used your plug-in in my web site. Its working good on Ubuntu machine with all major browsers but when i am using it on windows machine, though i can upload file with normal upload button but i could not able to use drag and upload file feature for this plug-in.

And i have tested it on your demo url: http://valums-file-uploader.github.io/file-uploader/

I will appreciate your help for this.

Thanks

Valum's file uploader not working over SSL

We have been using Valum's file uploader on the pages of our site served as HTTP, with no problems. We now want to use it on our HTTPS registration page, to allow people to upload a profile pic for their account. The documentation Valum's file uploader says it works with HTTPS, but it seems to be making the AJAX request via HTTP and we're getting the following errors in the console:

OPTIONS http://flooting.com/lib/upload?label=&creationdate=&format=json&type=160x160&session=015b57b5958a7e5141234788ca480b63&collection=&qqfile=IMG_0298.JPG No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://flooting.com' is therefore not allowed access.

XMLHttpRequest cannot load http://flooting.com/lib/upload?label=&creationdate=&format=json&type=160x160&session=015b57b5958a7e5141234788ca480b63&collection=&qqfile=IMG_0298.JPG. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://flooting.com' is therefore not allowed access.

Is there a parameter we can set to make the uploader send the request via HTTPS (we've not been able to find one).

We've tried setting action to //lib/upload (two slashes)
That does force the request to https but we lose the domain from the path. i.e. We see a request to
https://lib/upload?[params] which doesn't work.

Our code is as follows;

    var uploader = new qq.FileUploader({
        // pass the dom node (ex. $(selector)[0] for jQuery users)
        element: [% IF element %][% element %][% ELSE %]document.getElementById('file-uploader')[% END %],
        // path to server-side upload script
        action: '/lib/upload',
        debug: true,
        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
        sizeLimit: 10485760, // max size 10Mb  
        minSizeLimit: 100, 
        showMessage: function(message){ alert(message); },
        onError: function(id, fileName, errorReason) {
            if (errorReason.indexOf("code #6") != -1) {
                warn('No space left');
                alert('Error: You have no space for images left. Please contact support.');
            }
        },
        onComplete: function(id, fileName, responseJSON){
            if( ! responseJSON.filesdata || ! responseJSON.filesdata[0].url)
            {
                console.log(responseJSON);
                //ngn_dump(responseJSON, true, 'responseJSON');
                alert('Error: didn\'t get image url from server.');
            }
            else
            {
                console.log(responseJSON);
                $('#[% id %]').attr('src',responseJSON.filesdata[0].url);
                [% IF fieldname %]
                $('#[% fieldname %]').val(responseJSON.filesdata[0].url);
                [% END %]
            }
        },
        params: {
            label:'',
            creationdate:'',
            format:'json',
            type:"[% rep_type %]",
            session:"[% IF y; y.session.id; ELSE; c.sessionid; END; %]",                
            collection:"[% collectionId || story.id %]",
        }
    });

.indexOf issue in ie8

here is function to fix this issue

[].indexOf || (Array.prototype.indexOf = function (v, n) {
n = (n == null) ? 0 : n;
var m = this.length;
for (var i = n; i < m; i++)
if (this[i] == v)
return i;
return -1;
});

Failed to upload image

On the walkthrough it says Set the debug option of the FileUploader to true.
Open the page where you have a FileUploader.
Open developer console in your browser.
Try to upload the file. You should see a server serponse.

I did this, and there is no difference in what happens. Whenever I try to upload an image it just says failed without any sort of errors popping up. I can't find any documentation on what to do when failed. This is working on another site I have but not on the one im currently working on. Can someone point me in the direction of how to troubleshoot failed uploads?

FF crashes when I try to upload large file

When I try to upload 90 Mb file in Firefox 27.0 on Mac OS X 10.8.5 browser crashes all the time. Report information:

AdapterDeviceID: 0x 166
AdapterVendorID: 0x8086
Add-ons: %7B6e84150a-d526-41f1-a480-a67d3fed910d%7D:1.5.6,%7Be3f6c2cc-d8db-498c-af6c-499fb211db97%7D:1.12.9.1,%7B972ce4c6-7e08-4474-a285-3208198ce6fd%7D:27.0,jid0-IjImIyAhC6aVwuN2VA4XpGwFbHk%40jetpack:1.5.1,firebug%40software.joehewitt.com:1.12.6,onepassword4%40agilebits.com:4.1.0
BuildID: 20140127194636
CrashTime: 1392315595
EMCheckCompatibility: true
Email:
FramePoisonBase: 7ffffffff0dea000
FramePoisonSize: 4096
InstallTime: 1392193906
Notes: AdapterVendorID: 0x8086, AdapterDeviceID: 0x 166GL Layers! GL Context? GL Context+ GL Layers+
ProductID: {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
ProductName: Firefox
ReleaseChannel: release
SecondsSinceLastCrash: 874
StartupTime: 1392314725
Theme: classic/1.0
Throttleable: 1
URL: wyciwyg://4/http://localhost:8080/author-publisher
Vendor: Mozilla
Version: 27.0
useragent_locale: ru

Who faced with the same problem?

Thanks,
Tamara.

Resize before upload.

I am trying to implement the re-size before upload, but there is an error "upload failed" int the image preview container. Are you sure the resize function works. Note I use the original valum-file upload and it works fine.

Add support on exiting filename upload

Adding a support on exiting filename upload, the upload should return a modal asking what to do (override, rename, cancel) when a same filename exist on upload.

Use options.inputName in multipart encoding

In multipart encoding, the name of the file input field is currently set as the filename. It would be better if if was the value of options.inputName. X-File-Name header is also not required for multipart handling:

        // build query string
        params = params || {};
        if (this._options.encoding != 'multipart') {
            params[this._options.inputName] = name;
        }
        var queryString = qq.obj2url(params, this._options.action);

        xhr.open("POST", queryString, true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        if (this._options.encoding == 'multipart') {
            var formData = new FormData();
            formData.append(this._options.inputName, file);
            file = formData;
        } else {
            xhr.setRequestHeader("X-File-Name", encodeURIComponent(name));
            xhr.setRequestHeader("Content-Type", "application/octet-stream");
            //NOTE: return mime type in xhr works on chrome 16.0.9 firefox 11.0a2
            xhr.setRequestHeader("X-Mime-Type",file.type );
        }

Found bug in code

Faced with error with 'qqfile' parameter sending to server . Spent some time comparing my old version of file and the newest one.
fileupload.js, line 1352. Now it is
formData.append(name, file);

but must be
formData.append(this._options.inputName, file);

because in onld code it was
formData.append('qqfile', file); and this._options.inputName means qqfile by default.

Need default button style

I want the button area look like my other buttons in the view.
It's rather difficult to get to know default button-style colors, alpha, and so on.
How can I do so?

Unable to Include ValidateAntiForgeryToken when using with ASP.NET MVC

I have been trying to use this uploader and also made use of the ValidateAntiForgeryToken attribute on my Upload action.

I tried including the token by editing the _createForm function in the source code but have so far failed to get this functionality working.

Thanks

Just wanted to say thanks for doing this. Sucks when a project gets abandoned.

Hey! Wondering if you are still interested in maintaining the fork?

If yes, please let me know if you need some help. I would be more than happy to point to this release as a new official version, and highlight all the effort you have put into it.

By the way, I can't find the github's messaging feature anymore. Can you please send me your email to andrew (at) valums.com ?

Keep order in multiple upload

Is there any option to keep order when doing multiple selection? Already tried with maxConnections: 1, but instead of ordering it chooses a random entry to upload.

can rule options autoupload

can rule options autoupload
helpe

Problems with UTF-8 site and perl

I have this one working perfectly on a latin-1 encoded site but on another one, which is UTF-8, the images are corrupted and not properly uploaded. I'm sure the error is somewhere in my UTF-8 workflow for perl but I just can't find it. Has someone experienced this?

Drag & Drop does not have a way to restrict multiple file uploads

I managed to make the browser window upload restrict multiple file uploads but when dragging and dropping to its default qq-fileupload drag drop it still allows for multiple file uploads. I would rather not have to disable the drop area all together.

Broken in FF8, FF13

For some reason, it doesn't work at all in FF 8.

I'm attaching qq.FileUploaderBasic to a <button> element, multiple is off. It inits correctly, attaches event and appends <input type="file"> inside my button.

Unfortunatelly clicking the button does nothing. Works fine in Chrome.

How to automatically resubmit file to saved files after an error occurs on uploading the file?

I am uploading a file using uploadStoredFiles() method. During upload it shifts the file from the array, and array the emptied during. What I want is if an error occurs from backend during the upload, then the files should come back in the stored files for upload. Cannot figure out how to do it. Help needed.

Bower

Hi guys, i aded this awesome plugin in bower package manager.

It was necessary to use in the project. Now that developers can have updates in bower, you need to publish a new version and release a valid semver tag.

bower info valums-file-uploader

toBytes() PHP method

Hi there,

I think your example php file and the method toBytes() is multiplying the value incorrectly within the switch for MB and GB - it uses 1024 for all cases.
I just thought you might want to know that. :)

IE9 problem with the onComplete() in FUB

I'm constantly getting the boolean 'false' with the third parameter of the onComplete() method : responseJSON.success in IE9 (which is the only version of IE I'm testing in).

I'm using the basic version of the plugin and the ajax returns from within the PHP:

try {

// code processing upload
echo json_encode(array('success' => true, 'content' => $image));

} catch (Exception $e) {
$message = $e->getMessage();
echo json_encode(array('success' => false, 'error' => $message));
}

It works fine in Firefox, Chrome etc. - it's just IE that fails.

Is there a problem with the onComplete() method and IE?

Not Able To Use HTTP Method 'PUT' For Uploads

I want to use HTTP Method 'PUT' for it to adhere by RESTful practices. I don't see it in docs or in the code. Can someone help me with this?

Bootstrap template

Hi,

are you using bootstrap with file uploader, please? If yes, could you paste here what you have in template, fileTemplate and classes options? Thank you!

Petr

File Name truncation when the full path length is more than 260 characters

Hey Guys,

We have a scenario where the file name is truncating when the full path length is more than 260 characters. Do you have any thoughts on how we can resolve this issue.
e.g.
actual file name and path- C:\Users\abcdef\Desktop\AAAAAAAAAAAAAAAAAAAAAAAAAAAA\BBBBBBBBBBBBBBBBBBBBBBBBBBBB\CCCCCCCCCCCCCCCCC\DDDDDDDDDDDDDDDDDDDDDDDDDDDDD\EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE\FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF\FileName1111111111111111111111111111111111111111111111111111.txt

File name when uploaded as - FileNa~1.txt

Look forward to your help in resolving this.

Let me know if you need any more details to help.

Thanks and regards,
Pratik Lara

Inline style applied to drop-area in JavaScript.

In our design, we'd like to keep the droparea visible at all times. Currently this is not possible to implement in the uploader, because it hides the drop area manually in JavaScript. This happens in the _setupDropzone() function.

ie7,8,9 --> Access is denied File: fileuploader.js, Line: 1195, Column: 9

I get a access denied on all versions of IE..I am trying this from localhost..how to get around this

Drag and Drop Broken: Uncaught TypeError: Object [object Object] has no method '_isValidFileDrag'

Drag and drop is no longer working, including in the supplied demo. Console is returning:

Uncaught TypeError: Object [object Object] has no method '_isValidFileDrag' (fileuploader.js:670)

Using Chrome Version 23.0.1271.97

Not working on IE

The problem is that the request on IE gets (pending) status and doesn't uploads anything.
I wanted to try the library using client/demo.htm, but making it upload to server/php.php. Here's how I used it:

client/demo.htm

<script>        
    function createUploader(){            
        var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader-demo1'),
            action: '/server/php.php',
            debug: true,
            extraDropzones: [qq.getByClass(document, 'qq-upload-extra-drop-area')[0]]
        });           
    }

    // in your app create uploader as soon as the DOM is ready
    // don't wait for the window to load  
    window.onload = createUploader;     
</script>

server/php.php

$allowedExtensions = array('wmv', 'mpg', 'avi', 'mov');
$sizeLimit = 30 * 1024 * 1024;
$uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
$result = $uploader->handleUpload('uploads/');
echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

Upload fails on Struts app

Hello,

The lines of code need modifying below for it to work:

if (this._options.encoding == 'multipart') {
var formData = new FormData();
/* formData.append(name, file); */ <<<< Removed
formData.append(this._options.inputName, file); <<< Added
file = formData;
} else {
....
}

Also need to add encoding: 'multipart' to the qq.FileUploader page options.

Cheers

Not working

Hi I followed all steps to setup the file uploader, But can't find the upload button. Please help.

Autoupload and drag&drop options

Hi

I was wondering if there is any plan of adding autoupload and drag&drop options as suggested in https://github.com/valums/file-uploader/pull/116 ?

This would make Valums-File-Uploader a tad more awesome :)

víðir