jQuery Upload File plugin provides Multiple file Uploads with progress bar.Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
Home Page: http://hayageek.com/
License: MIT License
jQuery Upload File plugin provides Multiple file Uploads with progress bar.Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
http://hayageek.com/docs/jquery-upload-file.php
Progress bar is not showing on IE9 or IE8. Can you help me?
My code:
<script type="text/javascript">
$(document).ready(
function load() {
$("#uploader").uploadFile(
{
"url": "/uploadFiles/",
"multiple": true
}
);
}
);
</script>```
Generated code:
There should be a "Upload" inside the div after the form?
(Live example: http://finbit.dy.fi:6543/files/ -> click "Lisää kuvia")
It would be useful to have a way to customize/translate button labels.
doc says:
formData
An object that should be send with file upload. data: { key1: 'value1', key2: 'value2' }
should be:
An object that should be send with file upload. formData: { key1: 'value1', key2: 'value2' }
Hi,
I'm creating a thumbnail by the upload.php
Due to the scrolling issues with the preview function I would like to show the generated thumbnail on the same place as the preview thumb is shown, right after each thumbnail is created.
How would that be possible?
thank you verymuch!
From your original code,
function setDragDropHandlers(obj, s, ddObj) {
ddObj.on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
$(this).css('border', '2px solid #A5A5C7');
});
ddObj.on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
});
ddObj.on('drop', function (e) {
$(this).css('border', '2px dotted #A5A5C7');
e.preventDefault();
obj.errorLog.html("");
var files = e.originalEvent.dataTransfer.files;
if (!s.multiple && files.length > 1) {
if (s.showError) $("<div><font color='red'>" + s.multiDragErrorStr + "</font></div>").appendTo(obj.errorLog);
return;
}
serializeAndUploadFiles(s, obj, files);
});
$(document).on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
ddObj.css('border', '2px dotted #A5A5C7');
});
$(document).on('drop', function (e) {
e.stopPropagation();
e.preventDefault();
ddObj.css('border', '2px dotted #A5A5C7');
});
}I have made some changes:
function setDragDropHandlers(obj, s, ddObj) {
ddObj.on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
$(this).css("content", "");
$(this).addClass("fakechatboxcontent");
});
ddObj.on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
});
ddObj.on('dragleave', function (e) {
e.stopPropagation();
e.preventDefault();
$(this).removeClass("fakechatboxcontent");
});
ddObj.on('drop', function (e) {
$(this).css('border-left', '1px solid #D5D5D5');
$(this).css('border-right', '1px solid #D5D5D5');
e.preventDefault();
obj.errorLog.html("");
var files = e.originalEvent.dataTransfer.files;
if (!s.multiple && files.length > 1) {
if (s.showError) $("<div style='color:red;'></div>").appendTo(obj.errorLog);
return;
}
if(s.onSelect(files) == false)
return;
serializeAndUploadFiles(s, obj, files);
$(this).removeClass("fakechatboxcontent");
});
$(document).on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
ddObj.css('border', '1px solid #D5D5D5');
});
$(document).on('drop', function (e) {
e.stopPropagation();
e.preventDefault();
ddObj.css('border', '1px solid #D5D5D5');
});
}And from the browser console, I am getting Unknown TypeError at this function.
If you use multiple uploads, do not transmit the transmission at a time
Is it possible to upload one by one in sequence?
<h3>Photos</h3><br><br><div id="ihere"></div>
<input type="hidden" name="aphotos" id="aphotos">
<br><br>
<div id="Photosuploader">Add Photos</div>
///////////////////////////////////////////////////////////////////// Php file
///////////////////////////////////////////////////////////////// php delete file
"; } ?>using
onSuccess:function(files,data,xhr,pd)
{
//custom error handling
var info = JSON.parse(data);
if (info["jquery-upload-file-error"]!=null)
alert(info["jquery-upload-file-error"]);
REQUEST ->here add code to hide the file groupbox(?)I got :
after press ok :
Hello,
I use the jQuery version 1.10.2. Unfortunately, the script no longer works here after the update to 3.0.4. The files are not uploaded. Is there a solution for this?
Greeting Steven
I am getting "ERROR: SyntaxError: Unexpected token" when I tried to upload via drag or selecting using the div selector.. what's the meaning of this error?
Hi,
It seems the plugin doesn't support PUT, PATCH, DELETE methods, are there any plans in adding these to the method option?
Many thanks.
While executing jquery_upload_file code JSON.parse: unexpected character at line 1 column 1 of the JSON data error is getting how to solved it. I updated code for my use. I have added code adding watermark to image and save it in particular folder. Can you please tell me how to solve this issue?
I cannot find an option to set the global ajax variable to false. This would be useful if someone is using ajaxStart and ajaxStop methos for spinners etc in order to avoid them to fire when this plugin is used.
hi,
In Safari browser only single file upload is only working,
and by using multiple file upload, it upload all the files, with no contents, means file uploaded with 0 size. and also max limit for the file size is not working in safari.
Hi,
That's great plugin, thanks!
My issue is the next situation:
1.- Upload Files OK!
2.- Open Files ??
You can make the same box or a new div and show the uploaded files can be generated and the link to open?
Regards,
Gil Gzz
Monterrey, México
Hi, thanks for excellent work!!
As Amir pointed at http://hayageek.com/docs/jquery-upload-file.php#comment-1621726351 (scroll to comments and wait) there is no option to refresh the control. The answer you wrote doesnt effect
1-when maxFileCount:1
2-hide the status group
in detail :
1-a bootstrap modal form, shown when a button clicked
http://i.imgur.com/JWCSFc3.png
2-user upload a file
http://i.imgur.com/UcJCqOn.png
then , click modal BACK button
3-when click the button (aka step 1) show
http://i.imgur.com/UcJCqOn.png
when user choose/drag a file
http://i.imgur.com/oQhYo2Z.png
FYI - general use of bootstrap modal : there is an event, that resets all html elements aka :
//when modal closed, hide the warning messages + reset
$('#modalOFFERS2').on('hidden.bs.modal', function() {
//when close - clear elements
$('#formOFFERS2').trigger("reset");
});when using custom aka dtp / switch / file-upload ## developer has to reset manually (aka call the element reset method in event)
my code :
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
$('#btn_lead_proposals_new').on('click', function(e)
{
e.preventDefault();
$('#modalOFFERS2').modal('toggle');
})
$("#file_prop_approval").uploadFile({
url:"x.php",
showProgress : true,
fileName:"myfile",
autoSubmit:true,
maxFileCount:1,
maxFileSize:31457280, //30mb
dynamicFormData: function()
{
var data ={ client_id : <?= $_GET['id'] ?>, offer_id: $("#OFFERS2FORM_updateID").val() };
return data;
},
afterUploadAll:function(obj)
{//callback after upload
//http://hayageek.com/docs/jquery-upload-file.php#comment-1621726351
var uploadObj = $("#file_prop_approval");
console.log(uploadObj);
uploadObj.fileCounter = 0;
uploadObj.selectedFiles = 0;
uploadObj.fCounter = 0; //failed uploads
uploadObj.sCounter = 0; //success uploads
uploadObj.tCounter = 0; //total uploads
console.log("*1*");
console.log(obj);
console.log("*2*");
}
}); <button id="btn_lead_proposals_new" class="btn btn-success" type="submit" name="submit">
New
</button>
<!-- NEW OFFER approval attachment MODAL [START] -->
<div class="modal fade" id="modalOFFERS2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id='lblTitle_OFFERS2'>
New
</h4>
</div>
<div class="modal-body">
<form id="formOFFERS2" role="form">
<button id="btn_dn_file_prop_approval" type="button" class="btn btn-primary">
Download
</button>
<div id="file_prop_approval">Upload</div>
<input name="OFFERS2FORM_updateID" id="OFFERS2FORM_updateID" class="form-control" style="display:none;">
<div class="modal-footer">
<button id="bntCancel_OFFERS2" type="button" class="btn btn-default" data-dismiss="modal">
back
</button>
</div>
</form>
</div><!-- End of Modal body -->
</div><!-- End of Modal content -->
</div><!-- End of Modal dialog -->
</div><!-- End of Modal -->
<!-- NEW OFFER approval attachment MODAL [END] -->this jsFiddle proove the 2-hide the *status group * aka doesnt refresh itself..
http://jsfiddle.net/55t0wx2x/
Hi,
i need to add one "I agree" button after selecting a file and before submit it to the server, i think we can use the onSubmit function for this process, but if i clicked that "I agree" is should submit that particular file to the server
Please help me on this.
I am trying to have some custom wording / events happen when a user tries to upload over the max file size. Currently as far as I can tell you can only edit the string that gets sent back when this happens. Is there a function that fires this event? If so which one
i have forum post message with images max upload count is 3.
and when someone editing the message he see the images he uploads and he can upload more images or delete the old images
i cant do this..
i was able to load them in the form.. and to handle selectedFiles counter..
but no way to connect the events like ondelete
Hi,
It seems impossible to return a custom json response to allow the script decide if or not the upload was a success (eg: {"error":"custom error"} instead of ["myfile.jpg"]).
Have you planned this kind of possibility?
Thanks.
Hello everyone,
I'm trying the demo but finished the file transfer I getting this error .. ERROR: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
can someone help me?
thank you very much ..
Luca
Can I add input form every file upload (before file uploaded) ?
Hello,
i can upload files to 200 MB ... over this size i get no response and if the upload is canceled, the message from Firebug:
jquery upload SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Server-Options are:
php_value post_max_size 2000M
php_value upload_max_filesize 2000M
php_value memory_limit 4000M
What is wrong?
Thank you
Mark
I'm using this jquery to upload files in php, I test locally and it works, I try it on-line at http and it works, but at one place it appears and https button disappears
I'm trying to send the value of an input file on the index.html to the upload.php, but unfortunately I'm not successful; the content of the input is not available with $_POST['directory'] on the upload.php.
How would the ajax request on the index.html to the upload.php would look like for an input look like?
thank you for your help! btw your script is awesome!!!
hi there, great plugin btw. Quick question though, im using version 3.1.2 and im trying to add a thumbnail to my list element via the .load() option which is working, kind of.
My load always seem to be one step behind, for example after the first successful load i get nothing, then after the second upload i get image 1. I can send you my web address and login details if you prefer, but would prefer to pm the details to you, do you have a private email?
readme doc's "showPreivew" is wrong.
How can I change order of files in uploaded files listing? Currently new files are added to the bottom of list. I'd like them to have on top of the list. Is there any way to do that?
Hello, if I use multiple uploads, then file uploaded randomly. How to make sure that the files loaded one by one like in preview order? Thx
Hello,
It seems we can had a class to some buttons but not the delete button. Is there any particular reason?
Regards,
currently checking the error handling,
seems that any error occured at event
onError: function(files,status,errMsg,pd)auto handled by library and shown at user when the showError=true (by default)
when raising errors by your php script the only way to catch it is by
onSuccess:function(files,data,xhr,pd)onSubmit will be called before uploading, but the argument is just a useless file name.
While the onSelect get a File object, including file name and fie size.
So, why not post a File object to onSubmit? A File object is more useful.
So, I changed the source code a little to fill my need.
In the line 556 of jquery.uploadfile.js, I change
if(s.onSubmit.call(this, fileArray) != false)
to
if(s.onSubmit.call(s, file) != false)
and In my code:
onSubmit: function(file) {
uploadobj.update({
dynamicFormData: function(){
return {size: file.size};
}
});
}I'm not sure if it raise other problems.
Hi Ravishanker,
It seems DragExit never fires when you move the file away from the drop zone.
ddObj.on('dragexit', function (e) { e.stopPropagation(); e.preventDefault(); });
hello,
just a litte thing:
onSuccess:function(files,data,xhr,pd)
{
pd.preview.attr("src","http://www.foo.bar/php4/uploads/<? echo $album; ?>/thumbs/"+files[0].toLowerCase());
}
[/code]
is supposed to change a symbol image (one preload image for all uploads) to the created thumbnail.
that actually just works immediately if there are less than 7 pictures selected for upload. If you select a larger amout of pictures for upload, the thumbnails will be shown when ALL uploads are finished (although the correct source of the thumbnail is already shown in the source code).
Do you know what I mean?
Thank you for your advice!!!
Hi!
I faced a problem when I tried your plugin.
https://rawgithub.com/hayageek/jquery-upload-file/master/js/jquery.uploadfile.min.js
I recieved "Object doesn't support property or method 'dynamicFormData'" On line 321 character 21.
Any idea of what the problem could be? Thanks
there's no way to handle failed uploads, is this the only error function?
onError: function() { }
If the goal for that function is only outputting a message sent with a 200 status, you might consider adding a function for onFail
Hi
Thanks for your plugin. I've used this plugin many times before and it worked very well. But as of now, I've an upload script on backend which works smoothly. But when I try to use same script (copy) on frontend file upload doesn't work at all.
Instead of uploading file it sends two POST requests and calls onError() callback. After calling callback, it redirects me to another page (i.e. file upload URL).
Thanks in advance.
Regards
John Smith
What is the possible cause if it returns null after dragging and dropping the file?
Hello, I'm getting a very strange problem with your plugin.
The $_FILES return empty many of the times, but not "ALL" the time, which is really really strange to me. One night, it will work, but the next it won't.
I've checked obvious disk space, PHP things, etc. But I have noticed that its not sending the files Headers level, meaning the image is not even being transferred through the headers to the post file. Response and all comes back normal, but since there are no files being transfered it sorta defeats the purpose.
IF you have any pointers I would greatly appreciate it.
Using current version, when dropdown is selected, loads instance with galleryID to upload form. Jquery version "jQuery v1.11.1"
<script>
$("#uploadHide").hide();
var gallerySelection = $("#galleryName").val();
$("#galleryName").change(function() {
if($("#galleryName").val() != "default") {
$("#uploadHide").show();
} else {
$("#uploadHide").hide();
}
$("#uploadHide").html("<div id=\'multipleupload\'>Upload</div><div id=\'status\'></div>");
$("#multipleupload").uploadFile({
url: "'.$this->action('addImage').'",
method: "POST",
allowedTypes: "jpg,png,gif,jpeg",
fileName: "myfile",
multiple: true,
showStatusAfterSuccess: false,
formData: {
"galleryName": $("#galleryName").val(),
"ccm_token": "'. $vt->generate("uploader") .'"
},
onSuccess: function(files,data,xhr) {
$(".ccm-dashboard-page-header").after(\'<div class="ccm-ui" id="ccm-dashboard-result-message"><div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">x</button>\' + data + \'</div></div>\');
$("#ccm-dashboard-result-message").delay(8000).fadeOut("slow");
},
onError: function(files,status,errMsg) {
$(".ccm-dashboard-page-header").after(\'<div class="ccm-ui" id="ccm-dashboard-result-message"><div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">x</button>\' + data + \'</div></div>\');
$("#ccm-dashboard-result-message").delay(8000).fadeOut("slow");
}
});
});
</script>
After setting maxfile count to 1, when we upload more than 1 images , Currently it displays error.But instead showing error how to replace the image and upload new without appending progressbar and file name.
Is it possible to add an option for hiding status bar initially?
(I write css for hiding div.ajax-file-upload-statusbar, but I think the initial layout would be set by the option is better.)
Create div with id 'ihere'
Create div with id 'Photosuplaoder'
Create input with id 'aPhotos'
///////////////////////////////////////////////////////////////////// Php file
///////////////////////////////////////////////////////////////// php delete file
"; } ?>I have to change the name of file on the server side and need to send this name as response?Any idea how that can be done?Asking this because it seems you are already returning some data.
Hello everyone ..
when I upload I would also create thumbnails and change the name and size of files ..
is it possible?
thank you ..
luca
Hi there,
I'd like to get the address of a photo via onSuccess callback after is uploaded. It doesn't work only in IE 8 and 9, always return a undefined. Could you take a look on it and add an example to show how to archive this?
Thanks
jquery.uploadfile.js 111 line:
var uploadLabel =
var uploadLabel =
Is there any way to edit files listing template? I'm talking about this part of code generated by plugin:
<div class="ajax-file-upload-statusbar">
<img class="ajax-file-upload-preview" style="width: 100%; height: auto; display: none;">
<div class="ajax-file-upload-filename">question.png</div>
<div class="ajax-file-upload-progress" style="display: block;">
<div class="ajax-file-upload-bar ajax-file-upload-1403519106884" style="width: 100%; text-align: center;">100%</div>
</div>
<div class="ajax-file-upload-red ajax-file-upload-abort ajax-file-upload-1403519106884" style="display: none;">Abort</div>
<div class="ajax-file-upload-red ajax-file-upload-cancel ajax-file-upload-1403519106884" style="display: none;">Cancel</div><div class="ajax-file-upload-green" style="display: none;">Done</div>
<div class="ajax-file-upload-green" style="display: none;">Download</div>
<div class="ajax-file-upload-red" style="">Delete</div>
</div>
I know I can change visibility of some elements by editings plugin option but I literally want to change the structure of this code. Is there any way for doing it?
Tested on Chrome and IE 10,
can't get into onLoad method;
$("#fileuploader").uploadFile({
url:"/zs/upload/upl",
multiple:true,
showDelete:true,
showDone:false,
cache:true,
fileName:"docfile",
onLoad : function (obj){
alert("onload");
},
onSelect:function(files)
{
alert("onSelect");
},
onSuccess:function(files,data,xhr)
{
//files: list of files
//data: response from server
//xhr : jquer xhr object
},
onError: function(files,status,errMsg)
{
//files: list of files
//status: error status
//errMsg: error message
},
deleteCallback: function (data, pd) {
var statusRestServiceJs = new RestServiceJs(conP + '/upload/del');
var data = data[0];
statusRestServiceJs.add(data,function succes(data){
if(data.status==true){
pd.statusbar.hide();
}
},
function error(data){
});
}
});
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.