I need a no-flash images uploader script that supports:
Multiple Uploads
Drag & Drop
Progress bar for every upload
Small preview for every upload
Resumable downloads
Selectable preferences for every upload
So something like this script: jQuery-File-Upload
A screenshot:
But I need to add some options for every upload, for example: "Title" and "Category", than I need to run a function for every upload that takes the submitted datas e puts them into my database, is there any way I can do it?
If you use the templates that come with jQuery-File-Upload, you can add in your own fields that appear when each item is added to the queue. The plugin will need to know about these fields, so you can use the callback to add more data:
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
// get content from the new input fields
var inputs = data.context.find('select'); // or whatever inputs you added
// assign values to data.formData
// you can simply $.extend() the new inputs with $(this), and $.serializeArray() both
data.formData = $.extend(inputs.serializeArray(), $(this).serializeArray());
});
See this for more information.
Related
I have a dynamic form using EJS and Express in which the user can choose to add more images by clicking a button,
The response works, however for data storing purpose, I want each image response to be stored together in a single array. As this is dynamic, how do I iterate through each of the image form response in order to store tham in an array? as users may only put 1 image, making checking for every single request a bit redundant?
var images = [];
function addImage(file) {
images.push(file);
}
function removeImage(file) {
images = images.filter(img => img != file);
}
When a customer clicks submit button, this arrya value (images) would be submitted.
I want to implement a multiple file uploader in a form wherein I want the files so that the user may sort the priority of the files (I am using draggable and sortable Jquery tool).
Therefore I have added a multiple file input as:
<input type = "file" multiple>
Now when I select some files, it shows say 3 files selected.
But when I select 3 files, I wish to split the file uploader in 3 parts so that the user may set the priority ordering accordingly.
For that I have used the following kind of code:
$('.files').change(function(e){
var filesSelected = e.target.files;
if(filesSelected.length > 1){ //if user selects multiple files, then automatically split the files into multiple divs so that he/she may do the ordering of files
//Here I want to create a list of all the files and implement the draggable and sortable thing.
}
});
The situation is, that I am not able to split the array of objects of FileList and assign each object to another input.
Hope I am clear in my doubt and the question is understandable, as it is the first time I am posting in any such forum.
You cannot set value for <input type="file"> programmatically. It would be a major security flow. Imagine some website automatically uploading arbitrary files from your computer.
You can try to iterate through the selected files and then create a div dynamically with jquery that contains the data from the file like this
$('.files').change(function(e){
var filesSelected = e.target.files;
if(filesSelected.length > 1){
for(var i=0;i<filesSelected.length;i++) { // We iterate through the selected Files
$("#idFromParentElement").append('<div> id=File'+i+'</div'); // Then we create and append the new div to the parent element of our choice
var fileId = 'File'+i;
$("#fileId").data("file",filesSelected[i]); //After that we include a data into the div with the selected file.
}
}
});
From the posts I received and the brief discussions, it is evident that setting file values programmatically will pose security threat and so is not a good option. As far as solving my issue is concerned, best would be to find a way to create multiple divs/fields containing the filenames of the files that are being uploaded and then applying the drag/drop/sort feature in that set of divs. This way the user can easily prioritize the files and while saving the form the array/field containing the priority shall be considered before saving the files data in the database.
Thanks to the responders for their quick response.
I am currently working on with Dropzonejs for uploading files. For each file I am attaching a form field. I have to do something like this, if the form field attached with that file is not empty, I want to upload. Else, I show error message below the thumbnail. I have pretty much accomplished this.
The only problem I am facing is, suppose there are 3 files selected. 1st one doesn't have the form field attached but 2nd and 3rd have form field attached. The error message is shown saying the form field is required. But the rest of the files, 2nd and 3rd are not uploaded. It only uploads when I provide the required field on the 1st one.
So, my question is how do I upload only those that have form field attached but leave the rest in the Dropzone area for the user to fill the form field?
Update:
Once the files are added, the user is required to put the values in the form field. If the form field is not filled, error message is shown and the file is not uploaded but remain in the queue. Else, if the field is filled, the file is uploaded.
You might hook into an event.
There is the accept function:
is a function that gets a file and a done function as parameter. If the done function is invoked without a parameter, the file will be processed. If you pass an error message it will be displayed and the file will not be uploaded. This function will not be called if the file is too big or doesn't match the mime types.
dz.options = {
accept: function(file, done) {
if (valid) {
done();
}
else {
done("error message");
}
}
}
Unfortunately, this seems to be called automatically and immediately after a drop.
You might find the other events more appropriate for your app e.g. send: function(file, xhr, formData).
Using http://blueimp.github.io/jQuery-File-Upload/ I am trying to add a title field to go with uploaded image. Once uploaded I want to be able to edit the title field for each image. I am associating each image with an entity in the database successfully but I can't find a way to add and edit an additional title field.
You can add any data to send with the formData option. Let's see the documentation.
You also can add data to the data object, it's the same object you'll get with the response:
.on('fileuploadadd', function (e, data)
{
$.each(data.files, function (index, file)
{
file.myTitle = 'anyThing';
});
});
With both solution you can add your title and an extra parameter to inform your DB if it's an edit or an insert.
plupload creates nice ids in file object. How this id can be sent to the upload script?
The upload script has 3 variables in $_POST - file name, chunk number and total number of chunks.
How to add another parameter to plupload's POST request (in my case, the file.id)?
The first step would be to add a handler to the BeforeUpload event.
Then, if you are using multipart, you can change the uploader settings to dynamically set different multipart params:
plupload_instance.bind('BeforeUpload', function (up, file) {
up.settings.multipart_params = {fileid: file.id}
});
(warning: this example overrides any and all multipart_params, you can play it smarter than that by just setting fileid)
if you are not using multipart, your only options would be to pass the argument as a header, or to manually add the param to the URL for each file (these 2 options should also be done within BeforeUpload).
Note that when not using multipart, plupload will add the name and chunk params to the URL after any URL you already set for the uploader, for each file, so this is where extra params go.