I'm using the jQuery file upload plugin which has an API to programmatically upload files. The documentation writes:
$('#fileupload').fileupload('add', {files: filesList});
The problem is that I don't know what filesList should be. I have tried the following unsuccessfully:
$('#fileupload').fileupload('add', {files: ['/Users/bob/Desktop/test.png']});
What should filesList be exactly?
I'm using the jQuery file upload plugin which has an API to programmatically upload files. The documentation writes:
$('#fileupload').fileupload('add', {files: filesList});
The problem is that I don't know what filesList should be. I have tried the following unsuccessfully:
$('#fileupload').fileupload('add', {files: ['/Users/bob/Desktop/test.png']});
What should filesList be exactly?
- 1 You certainly cannot upload any file from the user's computer like that. Where would that lead. – kapa Commented Jan 20, 2012 at 11:05
- @bazmegakapa: Please see here, the "Example: Non-HTTP synchronous request" – Randomblue Commented Jan 20, 2012 at 11:07
- Yes, that could work from a locally running script to fetch a file. But you cannot use it to upload files to a remote server. – kapa Commented Jan 20, 2012 at 11:10
- @bazmegakapa: Hum. So why is the API provided? – Randomblue Commented Jan 20, 2012 at 11:11
3 Answers
Reset to default 9ridiculous example :) that works !
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="fileupload"></div>
<input class="zz" type="file" name="files[]" multiple><br />
<input class="zz" type="file" name="files[]" multiple><br />
<input class="zz" type="file" name="files[]" multiple><br />
<input class="zz" type="file" name="files[]" multiple><br /><br /><br /><br />
<input id="envoi_fax" type="submit" class="btn btn-primary start"> <i class="icon-upload icon-white"></i><span>Start upload</span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-fp.js"></script>
<script src="js/jquery.fileupload-ui.js"></script>
<script>
$('document').ready(function () {
var mycars = new Array();
$('#fileupload').fileupload({
url:'server/php/',
dataType: 'json',
singleFileUploads: false,
done: function (e, data) {
$.each(data.result, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
$('.zz').bind('change', function (e) {
var f;
f = e.target.files || [{name: this.value}];
mycars.push(f[0]);
});
$("#envoi_fax").click(function () {
$('#fileupload').fileupload('send', {files: mycars});
});
});
</script>
</body>
</html>
To quote the documentation:
The second argument must be an object with an array (or array-like list) of File or Blob objects as files property.
You can get file objects using the files property of a file type input or the HTML5 File API.
For more detail regarding working with the FileAPI and file inputs see: MDC - Using files from web applications
The documentation tells you
The second argument must be an object with an array (or array-like list) of File
or Blob objects as files property.
while linking File to Mozilla's DOM File object
You should supply an array of these objects